跟永哥学HTML5(6):H5表单及表单验证

表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签。表单域(包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等)。 表单按钮:包括提交按钮、复位按钮和一般按钮;

HTML 5一个令人兴奋的发展领域是新的Web表单。

在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

跟永哥学HTML5(6):H5表单及表单验证

您还将看到浏览器现在可以提供一个日期选择日历,并设置自动对焦到一个字段。建议使用谷歌浏览器,它是目前唯一与全力支持HTML5的浏览器。如果使用搜狗或360请使用高速模式。





HTML5表单演示|中国<span class="wpcom_keyword_link"><a href="http://www.125jz.com" target="_blank" title="网页设计">网页设计</a></span>

HTML 5 表单 演示

请使用支持html5的浏览器测试,哪些浏览器支持HTML5?



← autofocus here





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(6):H5表单及表单验证

使用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

(3)
江山如画的头像江山如画管理团队
上一篇 2018年2月26日 下午9:19
下一篇 2018年2月28日 上午11:55

99%的人还看了以下文章

发表回复

登录后才能评论