3.1 表单

3.1.1 表单概述

在遨游网络世界时,我们除了浏览网页信息,有时还需要将一些数据输入到网页中,经过网页提交至服务器。例如,我们登录邮箱时,需要输入用户名和密码。注册网站的用户时需要输入用户的信息,用户输入到网页中的信息均通过表单中的各表单元素来接收,然后传递给服务器。

HTML网页设计基础笔记 • 【第3章 表单】_css

表单在网页开发中很常见,典型的应用场景有以下几种:

网站的登录、注册。

HTML网页设计基础笔记 • 【第3章 表单】_表单_02

填写订单信息。

HTML网页设计基础笔记 • 【第3章 表单】_html5_03

填写调查问卷。

HTML网页设计基础笔记 • 【第3章 表单】_html_04

输入关键字搜索。

HTML网页设计基础笔记 • 【第3章 表单】_html_05

以注册页面为例,注册表单中包含了以下表单元素:


  • 文本框:常用于输入姓名、用户名和电子邮件等。
  • 密码框:用于输入密码,显示为代替字符,如星号“*”。
  • 单选按钮:在多个选项中选择 1 个,如性别。
  • 复选框:在多个选项中可以选择 1 个或多个,如爱好。
  • 下拉列表:在多个下拉选项中选择 1 个,如省份、月份等。
  • 按钮:通常用于执行表单信息的提交或取消等功能。

HTML网页设计基础笔记 • 【第3章 表单】_css3_06

3.1.1 表单概述(续)

表单是 HTML5 的一个重要部分,主要用于采集和提交用户输入的信息。例如,登录时输入的用户名和密码就是通过表单实现数据提交,如果没有表单,输入的登录信息将无法被网站获取。

HTML网页设计基础笔记 • 【第3章 表单】_css_07

3.1.2 表单标签

在 HTML 中,<form> 和 </form> 标签对用来创建一个表单,即定义表单的开始和结束位置,在标签对之间的一切都属于表单的内容。在表单的 form 标签中,还可以设置表单的基本属性,包含表单的名称、处理程序和传送方法等。

语法:

<form name=“表单名字” action=“URL” method=“get/post”>
表单元素
</form>


name 属性用于设置表单的名称。

action 属性用于设置处理表单提交数据的 url。

method 属性用于定义浏览器将表单中的信息提交给服务器端的方式,其值可以取 get 和 post 两种,默认为get。


示例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 无标题文档 </title>
</head>
<body>
<h2> 处理登录 ........</h2>
</body>
</html>
<body>
<h2> 用户登录 </h2>
<hr/>
<form name="login" action="login_success.html">
用户名 :<input type="text" name="username" /><br/> 密 &nbsp;&nbsp;&nbsp;&nbsp; 码 :
<input type="password" name="password" /><br/>
<input type="submit" value=" 登录 " />&nbsp;&nbsp;
<input type="reset" value=" 取消 " />
</form>
</body>

3.1.3 表单数据的提交方式

表单的 method 属性用来定义处理程序从表单中获得信息的方式,它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择,即 get 和 post。

HTML网页设计基础笔记 • 【第3章 表单】_html_08

get 方式提交:使用 get 方式提交数据时,表单数据会附加在 URL 之后,由用户端直接发送至服务器,所以速度比 post 快,但缺点是数据长度不能太长。

HTML网页设计基础笔记 • 【第3章 表单】_html_09

post 方式提交

使用 post 时,表单数据是与 URL 分开发送的,客户端的计算机会通知服务器来读取数据,所以通常没有数据长度上的限制,缺点是速度比 get 慢。

HTML网页设计基础笔记 • 【第3章 表单】_表单_10

两种提交方式在使用上的主要区别:

安全性。

  • 使用 get 方式提交时,提交的信息会出现在浏览器的地址栏中,post 方式提交时不会出现在地址栏中。在对安全性有要求的情况下,不建议使用 get 方式,而应该使用 post 方式。

提交数据的长度。

  • 使用 get 方式提交的数据有长度限制,使用 post 方式提交的数据没有长度限制,所以当使用表单提交的数据比较大时,如文件上传,建议使用 post 方式。

HTML网页设计基础笔记 • 【第3章 表单】_表单_11

3.2 输入框和按钮

3.2.1 表单元素概述

表单中大部分表单元素均使用 input 标签,只是它们的属性设置不同,其统一用法如下:

语法:

<input name=“表单元素名称” type=“类型” value=“值” size=“显示宽度”
maxlength=“能输入的最大字符长度” checked=“是否选中”/>

input标签属性


属性



说明



type    



指 定 表 单 元 素 的 类 型, 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button,默认为 text



name     



指定表单元素的名称



value      



指定表单元素的初始值



size        



指定表单元素的初始宽度。如果 type 为 text 或 password,则表单元素的大小以字符为单位;对于其他输入类型,宽度以像素为单位



maxlength



指定可在 text 或 password 元素中输入的最大字符串,默认无限制



checked



此属性只有一个值,为 checked,表示选中状态,如果不选中,则无须添加此属性



readonly



当文本框标签的 readonly 属性指定为 readonly 时,文本框中的值不允许更改


HTML5 表单常用控件的标签


表单控件标签写法



说明



<input type="text">



单行文本输入框。使用的是 input 标签和 type 属性



<input type="submit">



将表单中的信息提交给表单中 action 属性所指向的地址



<input type="checkbox"> 



复选框



<input type="radio">



单选钮



<input type="password">



密码输入框(输入的文字用 * 表示)



<select>



下拉框



<textArea>



多行文本输入框


3.2.2 输入框

文本框:表单中最常用的输入元素就是文本框(text),它提供给用户输入的单行文本信息,如用户名的输入。文本框的用法很简单,只需将 input 标签的 type 属性设置为 text 即可。

语法:

<input name=“表单元素名称” type=“text”id=“表单元素名称” value=“值” />

示例:

<body>
<form name="myform" action="" method="post">
姓 名 :
<input type="text" name="username" size="20" value="jack" />
<br/>
邮箱 :
<input type="text" name="username" value="xxx@xxx" />
<br/>
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css_12

密码框:密码框主要用于一些保密信息的输入,如密码。因为用户输入时,显示的不是输入的内容,而是“*”。

语法:

<input type=“password” id=“userPwd” name=“userPwd”/>

示例:

<body>
<form name="myform" action="" method="post">
姓名 :<input type="text" name="username" size="20"/><br/>
密码 :<input type="password" name="pwd"/><br/>
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_html5_13

多行文本域:多行文本域用于显示或输入两行或两行以上的文本,它使用的标签是 textarea。

语法:

<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>


其中,cols 用于指定多行文本域的列数,rows 用于指定多行文本域的行数。在 <textarea>……<textarea> 标签中不能使用 value 属性来初始化文本域中的内容。


示例:

<body>
<form name="myform" action="" method="post">
<h4> 自我介绍 </h4>
<textarea cols="50" rows="5"> 请输入自我介绍的内容 .......</textarea>
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_表单_14

3.2.3 按钮

重置、提交与普通按钮

根据按钮的功能,分为提交按钮、重置按钮和普通按钮。


  • 提交按钮用于提交表单数据,
  • 重置按钮用于清空现有表单数据,
  • 普通按钮通常用于调用 JavaScript 脚本。

在用法上,为不同的按钮设置不同的 type 属性值即可;如果要禁用按钮,则使用 disabled 属性设置其取值为 disabled 即可。

语法:

<input type="submit" value="提交按钮的显示值" name="名称"/>
<input type="reset" value="重置按钮的显示值" name="名称"/>
<input type="button" value="普通按钮的显示值" name="名称"/>

示例:

<body>
<form name="myform" action=" method=""post">
姓名 :<input type="text" name="username" size="20" />
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="购买"/>
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css_15

图片按钮:有时候为了达到比较好的视觉效果,可以使用图片代替按钮来提交或者重置表单数据。

语法:

<input type="image" src ="logo.gif" alt = "提交" name="imgsubmit" />


input标签的type="image"类似于type="submit",不同的是,type="image"以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。


示例:

<body>
<form>
输入商品编号:
<input type="text" name="yourname“/><br><br>
<input type="image" src="buy.gif" alt=" 提交 " name="imagesubmit“ />
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css_16

3.3 单选按钮、复选框和下拉框

3.3.1 单选按钮

用于一组相互排斥的选项,组中的每个选项应具有相同的名称(name),以确保用户只能选择一个选项,单选按钮对应的 type 属性为 radio。

语法:

<input type ="radio"  name="名称"  value ="" checked=" checked "/>


用 checked 属性表示缺省已选的选项:<input type=“radio” name=“fruit” value = “Orange” checked> 桔子。桔子选项将默认为选中状态。


示例:

<body>
请选择你喜欢的水果:<br>
<form>
<input type="radio" name="fruit" value="Apple“ /> 苹果 <br>
<input type="radio" name="fruit" value="Orange“ /> 桔子 <br>
<input type="radio" name="fruit" value="Mango“ /> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_html5_17

3.3.2 复选框

复选框用于选择多个选项,将 input 的 type 属性设置为 checkbox 就可以创建一个复选框。

语法:

<input type ="checkbox"  name="名称"  checked=" checked "/>


用 checked 属性表示缺省已选的选项,写法是:

<input type="checkbox" name="fruit" value ="orange" checked>桔子。

桔子选项将默认为选中状态。


示例:

<body>
请选择你喜欢的水果:<br>
<form>
<input type="checkbox" name="fruit" value="apple“ /> 苹果 <br>
<input type="checkbox" name="fruit" value="orange"> 桔子 <br>
<input type="checkbox" name="fruit" value="mango"> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css3_18

3.3.3 下拉框

下拉框主要可以使用户快速、方便、正确地选择一些选项,而且还能节省页面空间。它是通过 selectoption标签来实现的,其中,在有多种选项可供用户滚动查看时,size 属性确定列表中可同时看到的行数;selected 属性表示该选项在默认情况下是被选中的。

语法:

<select name="指定列表的名称“ size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
……
</select>


如果将下拉框变成多选,则添加 muiltiple 属性即可。


示例:

<body>
<form name="myform" action="" method="post">
生日 :
<input type="text" name="year" maxlength="4" /> 年
<select name="birth">
<option value="-1"> 选择月份 </option>
<option value="1"> 一月 </option>
<option value="2"> 二月 </option>
......
</select>
<input type="text" name="year" maxlength="2" /> 日 <br/> 省份 :
<select name="province">
<option value="0"> 选择省份 </option>
<option value="1" selected="selected"> 湖北 </option>
......
</select>
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_表单_19

3.4 表单验证

表单在提交之前应该执行输入验证,以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。

HTML网页设计基础笔记 • 【第3章 表单】_html5_20


在 HTML5 中,通过对标签使用验证属性,可以实现在表单提交时执行自动验证的功能,并提示用户输入了错误的信息。


3.4.1 必填验证

required 属性可应用于大多数 input 标签上。在提交时,如果元素中的内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户该元素中必须输入内容。

语法:

<input type=“text” name=“usr_name” required=“required” />

示例:

<body>
<form>
输入查询内容:<input type="text" required>
<input type="submit" value=" 提交 ">
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_html_21

3.4.2 类型匹配验证

在 HTML5 中,增加了 input 标签的 type 属性值,可以使用这些 type 属性值实现基本的类型匹配功能。


type 属性



说明



e-mail  



在提交表单时,会自动验证值是否符合 e-mail 格式要求



url   



在提交表单时,会自动验证值是否符合 url 格式要求



number      



在提交表单时,会自动验证值是否为数字,并可以配合 min、max 以及 step 属性进行数值的限定



range        



在提交表单时,会自动验证值是否在指定的范围内的数字,使用配合 min、max 以及 step 属性进行数值的限定,显示为滑动条



date



用于选取年、月、日


示例:

<body>
<form>
Email:<input type="email"><br><br> Date:
<input type="date"><br><br>
<input type="submit">
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css_22

HTML网页设计基础笔记 • 【第3章 表单】_css3_23

3.4.3 控制字符数量

在控制字符数量方面,我们可以使用 maxlength 属性设置输入字符的最大数量,以防止用户输入大量无效内容。

示例:

<body>
<form>
用户:<input type="text" maxlength="5“ />
<input type="submit">
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_html5_24

3.4.4 验证输入范围

min、max 属性是数值类型或日期类型的 input 标签的专用属性,它们限制了在 input 标签中输入的数值与日期的范围。

示例:

<form>
Number:<input type="number" name="count" min="0" max="100" stop=”10”/>
<br/>
<input type="submit"/>
</form>


step属性控制input标签中的值增加或减少时的步长。本例中,输入的值不仅在0与100之间,还必须是10的倍数,因为step为10。


HTML网页设计基础笔记 • 【第3章 表单】_html_25

3.4.5 自定义错误消息

HTML5 表单验证给前端开发带来许多便利,但是默认的提示不友好。我们可以通过 setCustomValidity 方法来自定义提示信息,更准确的提示给用户。

当用户输入信息时,使用 setCustomValidity(“”) 将错误提示设置为空字符串,当用户输入不合法时,使用setCustomValidity(“自定义提示信息”) 来替换提示信息即可。

示例:

<body>
<form>
年龄:
<input type="number" max="60" min="0"
oninvalid="setCustomValidity(' 年龄必须在 0 至 60 之间! ')"
oninput="setCustomValidity('')"
required>
<input type="submit" />
</form>
</body>

HTML网页设计基础笔记 • 【第3章 表单】_css_26

总结:


  • 表单是 HTML5 的一个重要部分,主要用于采集和提交用户输入的信息。
  • 表单数据提交的有两种方式:get 方式和 post 方式。
  • 表单中大部分表单元素均使用 input 标签,只是它们的属性设置不同,其用法统一
  • 文本输入控件包括文本框、密码框以及多行文本域。
  • 选择型控件包括复选框、单选钮、下拉框和数据列表。
  • 按钮型控件包括提交按钮、图片按钮。
  • 在 HTML5 中,通过对标签使用验证属性,可以实现在表单提交时执行自动验证的功能,并提示用户输入了错误的信息。