HTML5中新增的表单控件
在HTML5,新增加了一些表单控件,这些表单控件提供了非常有用的一些功能。
更丰富的input种类
下表是新增加的type属性值和其所对应的控件:
type属性值 | 控件 |
---|---|
color | 颜色选择控件 |
电子邮件输入控件 | |
date、time | 日期、时间选择控件 |
number | 数字输入控件 |
file | 文件选择控件 |
search | 搜索框 |
range | 拖拽条 |
url | 网址输入控件 |
示例代码如下:
<body>
<form action="" method="post">
<!-- 颜色选择控件 -->
<p>
请选择你喜欢的颜色:
<input type="color">
</p>
<!-- 时间、日期选择控件 -->
<p>
请输入时间、日期:
<input type="date">
<input type="time">
</p>
<!-- 电子邮件输入控件 -->
<p>
请输入收件人的邮箱:
<input type="email">
</p>
<!-- 数字输入控件 -->
<p>
请输入你的幸运数字:
<input type="number">
</p>
<!-- 文件选择控件 -->
<p>
请选择文件:
<input type="file">
</p>
<!-- 搜索框、拖拽条 -->
<p>
搜索框、拖拽条:
<input type="search">
<input type="range">
</p>
<!-- 网址输入控件 -->
<p>
请输入网址:
<input type="url">
</p>
<p>
<input type="submit" value="提交表单">
</p>
</form>
</body>
在HTML5中新增的表单控件中、电子邮件输入控件和网址输入控件都需要输入规范,邮箱必须加@符号,网址须以http开头,否则会提示你。代码效果如下:
<datalist>控件
<datalist>控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应。这个我相信在平常都遇到过,示例代码如下:
<p>
省份:
<input type="text" list="province-list">
<datalist id="province-list">
<option value="北京市">
<option value="天津市">
<option value="上海市">
<option value="重庆市">
<option value="山西省">
<option value="山东省">
<option value="广东省">
<option value="广西省">
<option value="湖南省">
<option value="湖北省">
<option value="河北省">
<option value="河南省">
<option value="台湾省">
</datalist>
</p>
代码效果如下:
可以看到,我输入“北”字,下拉框会智能匹配带“北”字的省份。