HTML入门:08HTML5表单进阶
HTML5拥有多个新的表单input输入类型,它们提供了更好的输入控制和验证,下面详细介绍这些新的输入类型的用法。
input类型 | 描述 |
---|---|
date | 从一个日期选择器选择一个日期 |
month | 选择一个月份 |
week | 选择周和年 |
time | 选择一个时间 |
datetime | 选择一个日期(UTC时间) |
datetime-local | 选择一个日期和时间(无时区) |
包含e-mail地址的输入域 | |
url | URL地址的输入域 |
number | 数值的输入域 |
range | 一定范围内数字值的输入域 |
search | 用于搜索域 |
color | 主要用于选取颜色 |
1 时间类型
首先,我们来看前六个,他们都是关于日期、时间选取的输入类型。其中:
- date用于选取日、月和年;
- month用于选取月和年;
- week用来选取周和年;
- time用来选取时间,也就是小时和分钟;
- datetime和datetime-local都是用来选取时间、日、月和年,不同的是,前者的时间是utc国际标准时间,而后者的时间则是本地时间。
示例:首先,我们通过form标签新建一个表单,然后新建一个input并设置为date类型,效果如下。
<form>
选取时间:<input type="date" name="datetime1"> <br>
</form>
接下来再新建五个input类型,分别设置为month、week、time、datetime、datetime-local类型,效果如下。
<form>
选取时间:<input type="date" name="datetime1"> <br>
选取月份:<input type="month" name="datetime2"> <br>
选取周数:<input type="week" name="datetime3"> <br>
选取时间:<input type="time" name="datetime4"> <br>
统一时间:<input type="datetime" name="datetime5"> <br>
本地时间:<input type="datetime-local" name="datetime6">
</form>
2 email类型和url类型
email类型用于应该包含e-mail地址的输入域,在用户输入数据后会自动验证email域的值。
url类型用于应该包含URL地址的输入域,在用户输入数据后,会自动验证url域的值。
示例:把输入框的属性改为email和url,效果如下。
<form>
Email:<input type="email" name="email"/> <br>
网址:<input type="url" name="url">
</form>
3 number、range类型
number、range类型用于应该包含一定范围内数字值的输入域。
- number类型显示为输入框;
- range类型显示为滑动条。
我们可以通过设定参数对所接受的数字进行限定,如下表所示。
属性 | 值 | 描述 |
---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔 |
value | number | 规定默认值 |
示例:把输入框的属性改为number和range类型,页面会增加一个输入选择框和一个滑动条。
<form>
数字文本:<input type="number" name="number" max="7"
min="0" step="1" value="2"> <br>
数字滑动:<input type="range" name="range">
</form>
number输入框可以手动输入数字,也可以通过后面的箭头选择数字,当出现错误输入时,输入框会变成红色提示。
range滑动条则可以通过左、右方向键按照事先设定好的步长进行数值的选择。
4 search类型
search类型用于搜索域,比如站点搜索或调用百度搜索的参数输入框等。
search域显示为常规的文本域,在用户体验上和text区别不大,但是它给机器识别提供了方便,也使得程序的可读性增强,由于在前端页面展示上的效果不明显,search类型就不演示了。
5 color类型
color类型用于提供用户选取颜色的输入域,显示为当前选取的颜色。
示例:把输入框的属性改为color类型后,页面中会出现一个色块,通过鼠标点击色块会弹出颜色选择面板,用户指定好新的颜色后色块会变成相应颜色。
<form>
<input type="color" name="color">
</form>
HTML5新增了三个表单元素,分别为datalist、keygen和output。
表单元素 | 描述 |
---|---|
datalist | 元素规定输入域的选项列表。使用<input>元素的list属性与<datalist>元素的id绑定 |
keygen | 提供一种验证用户的可靠方法。签规定用于表单的密钥对生成器字段。 |
output | 用于不同类型的输出。比如计算或脚 |
HTML5还新增了一些表单属性,如下表所示。
属性名称 | 说明 |
---|---|
placeholder | 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,,在用户输入后消失。 |
required | 是一个boolean属性。如要求填写的输入域不能为空 |
pattern | 描述了一个正则表达式用于验证<input>元素的值。 |
min、max | 设置元素最小值与最大值 |
step | 为输入域规定合法的数字间隔。 |
height、width | 用于image类型的<input>标签的图像高度和宽度。1 |
autofocus | 是一个boolean属性。规定在页面加载时,域自动地获得焦点。 |
multiple | 是一个boolean属性。规定<input>元素中可选择多个 |
6 实例
如下是一个表单的综合实例。可以看出,本文中提到的一些表单、类型、属性等信息都出现在这里,其中:
-
通过placeholder属性实现地址、邮箱等字段在输入之前提示信息的出现;
地址:<input type="text" name="address" placeholder="请填写详细地址"/> <br> 电话:<input type="phone" name="phone"/> <br> 邮箱:<input type="email" name="email" placeholder="请按邮箱格式填写"/> <br> 主页:<input type="url" name="url" placeholder="请按URL格式填写"/> <br> 生日:<input type="date" name="sr"/> <br> 身高:<input type="number" name="sg" min="90" max="200" step="1" placeholder="请输入90-200的数字"/> <br/>
-
通过autofocus属性实现在页面刚打开时光标默认出现在用户字段输入框。
用户名:<input type="text" list="nameinfo" name="username" autofocus/> <br/>
再有,登录信息中的用户名和密码字段分成两部分显示,其目的是想说明:在HTML5之前的版本中,所有的表单元素必须放在form标签内,而HTML5允许form标签之外存在其他的表单元素,如这里的密码字段。
<fieldset>
<legend>登陆信息</legend>
密码:<input type="password" list="nameinfo" name="pwd"/>
</fieldset>
完整代码如下:
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>页面标题</title>
</head>
<body>
<h3>HTML5-表单综合实例</h3>
<form action="#" method="get" style="width:300px;">
<!--行内CSS样式-->
<fieldset style="border:2px solid red;">
<legend>登陆信息</legend>
用户名:<input type="text" list="nameinfo"
name="username" autofocus/> <br/>
<datalist id="nameinfo">
<option value="zhangsan"/>
<option value="lisi"/>
<option value="wangermazi"/>
<option value="wangmazi"/>
<option value="goudan"/>
</datalist>
</fieldset>
<fieldset>
<legend>详细信息</legend>
地址:<input type="text" name="address"
placeholder="请填写详细地址"/> <br>
电话:<input type="phone" name="phone"/> <br>
邮箱:<input type="email" name="email"
placeholder="请按邮箱格式填写"/> <br>
主页:<input type="url" name="url"
placeholder="请按URL格式填写"/> <br>
生日:<input type="date" name="sr"/> <br/>
身高:<input type="number" name="sg" min="90" max="200" step="1"
placeholder="请输入90-200的数字"/> <br/>
体重:<input type="range" name="tz" min="10" max="300" step="1"/> <br/>
颜色:<input type="color" name="color"/> <br/>
</fleldset>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
<fieldset>
<legend>登陆信息</legend>
密码:<input type="password" list="nameinfo" name="pwd"/>
</fieldset>
</body>
</html>