3.1 表单
3.1.1 表单概述
在遨游网络世界时,我们除了浏览网页信息,有时还需要将一些数据输入到网页中,经过网页提交至服务器。例如,我们登录邮箱时,需要输入用户名和密码。注册网站的用户时需要输入用户的信息,用户输入到网页中的信息均通过表单中的各表单元素来接收,然后传递给服务器。
表单在网页开发中很常见,典型的应用场景有以下几种:
网站的登录、注册。
填写订单信息。
填写调查问卷。
输入关键字搜索。
以注册页面为例,注册表单中包含了以下表单元素:
- 文本框:常用于输入姓名、用户名和电子邮件等。
- 密码框:用于输入密码,显示为代替字符,如星号“*”。
- 单选按钮:在多个选项中选择 1 个,如性别。
- 复选框:在多个选项中可以选择 1 个或多个,如爱好。
- 下拉列表:在多个下拉选项中选择 1 个,如省份、月份等。
-
按钮:通常用于执行表单信息的提交或取消等功能。
3.1.1 表单概述(续)
表单是 HTML5 的一个重要部分,主要用于采集和提交用户输入的信息。例如,登录时输入的用户名和密码就是通过表单实现数据提交,如果没有表单,输入的登录信息将无法被网站获取。
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/> 密 码 :
<input type="password" name="password" /><br/>
<input type="submit" value=" 登录 " />
<input type="reset" value=" 取消 " />
</form>
</body>
3.1.3 表单数据的提交方式
表单的 method 属性用来定义处理程序从表单中获得信息的方式,它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择,即 get 和 post。
get 方式提交:使用 get 方式提交数据时,表单数据会附加在 URL 之后,由用户端直接发送至服务器,所以速度比 post 快,但缺点是数据长度不能太长。
post 方式提交
使用 post 时,表单数据是与 URL 分开发送的,客户端的计算机会通知服务器来读取数据,所以通常没有数据长度上的限制,缺点是速度比 get 慢。
两种提交方式在使用上的主要区别:
安全性。
- 使用 get 方式提交时,提交的信息会出现在浏览器的地址栏中,post 方式提交时不会出现在地址栏中。在对安全性有要求的情况下,不建议使用 get 方式,而应该使用 post 方式。
提交数据的长度。
- 使用 get 方式提交的数据有长度限制,使用 post 方式提交的数据没有长度限制,所以当使用表单提交的数据比较大时,如文件上传,建议使用 post 方式。
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>
密码框:密码框主要用于一些保密信息的输入,如密码。因为用户输入时,显示的不是输入的内容,而是“*”。
语法:
<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>
多行文本域:多行文本域用于显示或输入两行或两行以上的文本,它使用的标签是 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>
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>
图片按钮:有时候为了达到比较好的视觉效果,可以使用图片代替按钮来提交或者重置表单数据。
语法:
<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>
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>
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>
3.3.3 下拉框
下拉框主要可以使用户快速、方便、正确地选择一些选项,而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中,在有多种选项可供用户滚动查看时,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>
3.4 表单验证
表单在提交之前应该执行输入验证,以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。
在 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>
3.4.2 类型匹配验证
在 HTML5 中,增加了 input 标签的 type 属性值,可以使用这些 type 属性值实现基本的类型匹配功能。
type 属性 | 说明 |
在提交表单时,会自动验证值是否符合 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>
3.4.3 控制字符数量
在控制字符数量方面,我们可以使用 maxlength 属性设置输入字符的最大数量,以防止用户输入大量无效内容。
示例:
<body>
<form>
用户:<input type="text" maxlength="5“ />
<input type="submit">
</form>
</body>
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。
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>
总结:
- 表单是 HTML5 的一个重要部分,主要用于采集和提交用户输入的信息。
- 表单数据提交的有两种方式:get 方式和 post 方式。
- 表单中大部分表单元素均使用 input 标签,只是它们的属性设置不同,其用法统一
- 文本输入控件包括文本框、密码框以及多行文本域。
- 选择型控件包括复选框、单选钮、下拉框和数据列表。
- 按钮型控件包括提交按钮、图片按钮。
-
在 HTML5 中,通过对标签使用验证属性,可以实现在表单提交时执行自动验证的功能,并提示用户输入了错误的信息。