HTML5新增的表单验证功能

山水闲人 發表於 2019-7-3 13:42:00

<h3 data-id="heading-0">一、HTML5表单的特点：</h3>
 
<ol>
<li>HTML5 表单增加了许多内置的控件和控件属性 </li>
<li>XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素，在 HTML 5 中完全可以放在页面任何位置，并通过新增的 form 属性指向元素所属表单的 ID 值，即可关联起来。</li>

</ol>
 
<h3 data-id="heading-1">二、HTML5新增的控件类型：</h3>
 
<ol>
<li>email输入类型：<code><input type="email" name="email" /></code>
要求输入格式正确的 email 地址，否则浏览器不允许提交，同时会提示错误信息

 </li>
<li>url输入类型：<code><input type="url" /></code> 要求输入格式正确的 URL 地址，Opera 中会自动在开始处添加 http:// </li>
<li>日期时间相关输入类型： <code><input type="date" /> </code><code><input type="time" /></code><code> </code><code><input type="month" /></code><code> </code><code><input type="week" /></code> 目前 MS 只有
Opera/Chrome 新版本支持，且展示效果也不一样 </li>
<li>number输入类型：<code><input type="number" /></code>
要求输入格式正确的数字 

</li>
<li>range类型：<code><input type="range" step="2" min="0" max="10" value="2" /></code>
显示一个可拖动的滑块条，通过设定 max/min/step 值限定拖动范围，拖动时会反馈给value一个值 

</li>
<li>search输入类型：<code><input type="search" /></code>
输入一个搜索关键字，通过 results=s 可显示一个搜索小图标 

</li>
<li>tel输入类型：<code><input type="tel" /></code>
要求输入一个电话号码，但实际上并没有特殊的验证，与 text 类型没什么区别 

</li>
<li>color输入类型：<code><input type="color" /></code>
可让用户通过颜色选择器选择一个颜色值，并反馈到value中

</li>

</ol>
 
<h3 data-id="heading-2">三、HTML5新增的表单属性：</h3>
 
<ol>
<li> placeholder属性：<code><input type="text" placeholder="点击我会清除" /></code>
实现点击清除表单初始值，MS 除了 Firefox，其他标
准浏览器都能很好的支持 

</li>
<li>require/pattern属性： <code><input type="text" name="require" required="" /> </code><code><input type="text" name="require1" required="required" /></code> <code><input type="text" name="require2" pattern="^\d{5}$" /></code>
表单验证属性require 类型时，若输入值为空，则拒绝提交并出现提示，注意在 Opera 中必须指定 name 值，否则无效果。 

</li>
<li>autofocus属性：<code><input type="text" autofocus="true" /></code>
默认聚焦属性，可在页面加载时聚焦到一个表单控件，类似于 JS 的 focus() 

</li>
<li>list属性：
<div class="cnblogs_code">
<pre><input type="text" list="ilist">
<datalist id="ilist">
 <option label="a"></option>
 <option label="b"></option>
 <option label="c"></option>
</datalist>
</input></pre>
</div>
需要与datalist属性共用，datalist是对选择框的记忆，而list属性可以为选择框自定义记忆的内容 

</li>
<li>max/min/step属性：<code><input type="range" max="100" min="1" step="20" /></code>
限制值的输入范围，以及值的输入渐进程度，比如可在 number 设定输入最大值最小值，或在 range 中设定拖动阶梯 

</li>
<li>autocomplete属性：<code><input type="text" autocomplete="on" /></code>
此属性是为表单提供自动完成功能，如果该属性为打开状态可很好地自动完成，一般来说，此属性必须启动浏览器的自动完成功能 

</li>
<li>data属性：<code><select data="http://XX.com/"></select></code>
HTML5 支持 data 属性，为 select 控件外联数据源，可以在 select 下拉别表动态的添加来自数据库的各组选项，比如说国家、省市列表等等。 

</li>
<li>XML Submission编码格式：
常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。这种格式将数据送到服务器端，可以方便的存取。HTML5 提供一种新的数据格式：XML Submission，即 application/x-www-form+xml。简单的举例说，服务器端将直接接收到 XML 形式的表单数据。 
</li>

</ol> 
来源：https://www.cnblogs.com/Leophen/p/11125919.html

頁: [1]

琼殿技术论坛's Archiver

HTML5新增的表单验证功能