H5新增表单元素
2017-04-25 20:01
309 查看
H5新增表单元素
我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等,html5中新增加了一些表单元素,下面列出这些元素及其作用email 类型用于验证email的格式,当提交表单时会自动验证email域的值
url 类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值
number 类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持
range 类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search 类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标
tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持
color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中
案例如下,大家可以将代码拷贝或者自己编写之后,在浏览器中查看效果
<form action="upload.php" method="post" accept-charset="utf-8" id="form1"> <br> 主页: <input type="url" name="url" value="" placeholder="个人主页" required> <br> 邮箱: <input type="email" name="email" value="" placeholder="邮箱" required> <br> 生日: <input type="date" name="date" value="" required> <br> 时间: <input type="time" name="time" value="" required> <br> 星期: <input type="week" name="week" value="" required> <br> 年龄: <input type="number" name="age" value=""> <br> 薪水: <input type="range" name="range" value=""> <br> 电话: <input type="tel" name="tell" value="" placeholder="都不支持"> <br> 颜色: <input type="color" name="mycolor"> <br> <input type="search" name="key" value="" results="s"><br> <input type="submit" name="sub" value="提交" form="form1"> </form>
相关文章推荐
- H5新增表单元素
- 繁星H5之旅-HTML5表单新增元素与属性
- h5表单新增元素与属性form、formaction、formmethod、formenctype、formtarget、autofocus、required、labels
- H5中新增的表单元素
- h5表单新增元素与属性control、placeholder、list、AutoComplete、pattern、SelectionDirection、indeterminate、
- 繁星H5之旅-HTML5表单新增元素与属性
- 0326 H5新增表单元素
- HTML5学习笔记(四):H5中表单新增元素及改良
- html5表单及新增的改良元素详解
- H5新增的嵌入多媒体元素与交互性元素
- HTML5表单新增元素和属性(1)
- HTML5——新增表单元素与属性(2)
- 疯狂H5讲义笔记 - 表单相关元素和属性
- Web前端学习笔记(3)-html5新增表单元素
- h5废除与新增元素
- H5 新增的input元素的类型
- 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
- HTML5 学习笔记4-表单新增的元素和属性
- 新增表单元素
- HTML5——新增表单元素与属性(3)