表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签。表单域(包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等)。 表单按钮：包括提交按钮、复位按钮和一般按钮；
HTML 5一个令人兴奋的发展领域是新的Web表单。
在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式，而不使用任何JavaScript。
您还将看到浏览器现在可以提供一个日期选择日历,并设置自动对焦到一个字段。建议使用谷歌浏览器，它是目前唯一与全力支持HTML5的浏览器。如果使用搜狗或360请使用高速模式。
HTML 5 表单 演示
请使用支持html5的浏览器测试，哪些浏览器支持HTML5?
HTML5表单代码解析：
设置姓名字段必填项：
<label for="form-1">姓名 (required) </label> <input id="form-1" name= "haha" type="text" autofocus required>
看到代码了吗？只需要在input 标签里设置required 即可，而属性autofocus 是让输入框自动获取焦点！
哇塞，HTML5的表单功能真是酷毙了！！
年龄我们设定是18到25周岁之间，只需要设置文本框的type=”number” min=”18″ max=”25″属性即可，彻底让JavaScript说拜拜了。
<label for="form-4">年龄</label> <input id="form-4" name="age" type="number" min="18" max="25">
而设置文本框必须输入EMAIL更是简单到家：
<input id="form-5" name="email" type="email" required>
同理个人站点需要你输入的是一个网址：只需要设置type=”url”代码如下：
<label for="form-6">个人站点</label> <input id="form-6" name="url" type="url">
那么如何让出生日期文本框显示一个可供选择的日历呢？
使用HTML5可以非常方便的让浏览器提供一个日期选择日历，代码：
<label for="form-7">Date of Birth</label> <input id="form-7" name="dob" type="date">
即设置文本框的type=”date”即可哦，怎么样，心动了吧，马上行动哦！
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1421.html
微信扫一扫 
支付宝扫一扫