HTML5系列：HTML5表单
1. input元素新增类型
url类型
url类型的input元素是一种用来输入url的文本框，提交时如果该文本框中内容不是url格式，则不允许提交。
<input type="url" />
email类型
email类型的input元素是用来输入email的文本框，具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址。
<input type="email" multiple />
date类型
date类型的input元素用来输入日期的文本框。
<input type="date" value="2015-04-19" />
time类型
time类型的input元素是用来输入时间的文本框。
<input type="time" value="00:19" />
month类型
month类型的input元素用来输入月份的文本框。
<input type="month" value="2015-04" />
week类型
week类型的input元素用来输入周号的文本框。
<input type="week" value="2015-W20" />
number类型
number类型input元素是用来输入数字的文本框，在提交时会检查其中的内容是否为数字，具有min、max及step属性。
<input type="number" min="1" max="100" step="5" />
range类型
range类型的input元素是只允许输入一段范围内数值的文本框，具有min、max及step属性。
<input type="range" min="0" max="100" step="1" value="0" />
2. input元素新增属性
autofocus属性
autofocus属性是一个Boolean值，在页面加载完成后，input自动获取焦点。
<input type="text" autofocus />
pattern属性
pattern是元素的验证属性，使用正则表达式验证文本输入框中的内容。
<input type="text" pattern="^[a-zA-Z]\w{5,7}$" />
placeholder属性
input元素的placeholder属性为占位属性，显示在输入框中的提示信息，当输入框中输入内容时，该提示信息自动消失；当输入框内容为空时，提示信息重新显示。
<input type="text" placeholder="请输入" />
required属性
input元素required属性用于校验输入内容是否为空。
<input type="text" required />
list属性
input元素list属性的值为某个datalist元素的id，类似于选择框(<select>)，当用户想要设置的值不在选择列表之内时，允许自行输入。
<input type="text" list="weekdays" />
<datalist id="weekdays">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</datalist>
autocomplete属性
input元素autocomplete属性用于自动完成功能，autocomplete属性可以指定“on”、“off”值。
<input type="text" autocomplete="on" list="weekdays" />
<datalist id="weekdays">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</datalist>
示例中使用datalist元素中数据作为候补输入的数据在文本框中自动显示。
formnovalidate属性
input元素formnovalidate属性用于设置在表单中不进行验证。
<input type="number" formnovalidate />
3. 新增表单元素
3.1 datalist元素
datalist元素用于附中表单中文本框的数据输入。datalist元素本身是隐藏的，与表单文本框的“list”属性绑定，“list”属性值为datalist元素的ID。
<input type="text"list="weekdays" />
<datalist id="weekdays">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</datalist>
3.2 output元素
output元素必须从属于某个form，用于在页面中显示各种不同类型表单元素的内容。output元素的“onFormInput”事件，在表单输入框输入内容时触发该事件。
<form>
<input id="txtNumber1" type="number" /> *
<input id="txtNumber2" type="number" /> =
<output onforminput="value = txtNumber1.value * txtNumber2.value"></output>
</form>
4. 表单验证
4.1 checkValidity显示验证
表单中的各元素可以利用pattern与required属性验证元素内容的有效性，每个元素都可以通过checkValidity()，校验本身是否与验证条件匹配。如果一致，返回true，否则返回false。
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
function Check() {
var email = document.getElementById("txtEmail");
if (email.value == "") {
alert("Email不能为空！");
return false;
} else if (!email.checkValidity()) {
alert("Email格式错误！");
return false;
} else {
alert("Email输入正确！");
return true;
}
}
</script>
</head>
<body>
<form id="form1" onsubmit="return Check();">
<input id="txtEmail" type="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
4.2 取消验证
取消表单验证的两种常用方法：
（1）利用form元素的novalidate属性，关闭整个表单的验证；
（2）利用input元素或submit元素的formnovalidate属性，让表单对单个input元素取消验证。
<form novalidate></form>
<input type="text" formnovalidate />
4.3 setCustomValidity自定义错误信息
在表单与相应规则验证时，由于使用的是系统内置的验证方法，因此在出错提示也是由系统自带的。修改验证出错信息内容调用元素或表单的setCustomValidity()方法。
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
function Check() {
var email = document.getElementById("txtEmail");
if (email.value == "") {
alert("Email不能为空！");
return false;
} else if (!email.checkValidity()) {
email.setCustomValidity("Email格式错误！");
return false;
} else {
alert("Email输入正确！");
return true;
}
}
</script>
</head>
<body>
<form id="form1" onsubmit="return Check();">
<input id="txtEmail" type="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
HTML5系列：HTML5表单的更多相关文章
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- HTML5的form表单属性
form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
- HTML5 学习笔记 表单属性
HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- 【SqlServer系列】表单查询
1 概述 如下几个问题,如果你能解决,请继续往下看,若不能解决,请先复习SQL基础知识,再来阅读本篇文章.本篇文章深度中等左右. Q1:表StudentScores如下,用一条SQL语句查询出每门 ...
随机推荐
- 使用CocoaPods过程中 Unable to find a specification for
文章转自:http://blog.csdn.net/zhangao0086/article/details/39703083 当把CocoaPods生成的workspace移动到上层目录时,需要改下P ...
- 第二天ci项目规划 前后台分离
第二天ci项目规划 前后台分离 1/31/2016 2:40:26 PM 前后台 表面上看前后台不同网站 但是数据是他们之间的联系要完成结构完整项目 设计好前后台 基于mvc框架 前后台那些地方不同 ...
- 0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架
前言 原来一直使用他人的开源项目框架,异常的定位会很麻烦,甚至不知道这个异常来自我的代码还是这个框架本身.他人的框架有一定的制约性,也有可能是我对那些框架并没深入了解,因为这些开源框架在网上也很难找到 ...
- linux菜鸟日记(5)
iptables详细语法及配置: SNAT:源地址转换DNAT:目标地址转换PNAT:端口地址转换 ----------------------------------iptables规则链 路由以后 ...
- jQuery的加法运算.
jQuery的加法运算. 加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=1 ...
- 初识linux
1.版本 稳定版本:偶数版如2.6.X 发展中的版本:奇数版如2.5.X linux distribution包含:linux kernel + free software + documentati ...
- (转)Vsdocman7.2 注册版
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...
- asp.net 验证码(一)Session
1.模板页 //创建网页模板 输入验证码文本框 并且将文本框中的内容发送的后端验证中去 <p>请输入验证码:<input type="text" name=&qu ...
- 关于Delphi错误：Cannot make a visible window modal
Delphi的fsMDIChild类型的窗体是不能使用ShowModal的,否则会弹出"Cannot make a visible window modal"异常, 但是把fsMD ...
- outline (group) 在Excel worksheet 中
Group按钮的作用就是使Excel能展示一个轮廓,将明晰列折上,只显示公式的结果列. 在代码中实现的方法: 用worksheet的get_range选中明晰columns的某行单元格,然后调用这个r ...