HTML5中的表单

相对于 HTML4 来说，HTML5中的元素与特性提供更大程度上的语义标记，同时还删除了大量在 HTML4 中因为脚本与样式缘故而存在的冗余元素。通过让表单在不同网站上表现的更加一致，及时响应用户输入的数据，HTML5的表单特性为用户提供了更好的使用体验。这些体验同样适用于那些禁用了浏览器脚本的用户。

这个话题会描述那些被 Gecko/Firefox4 或更高版本所支持的一些新特性或者改变的部分。

元素

的 type 特性拥有更多的值.

search: 这个元素呈现为一个搜索框。换行符会从输入值中去掉，此外没有其他的语法增强了。

tel: 这个元素可现为一个编辑电话号码的输入控件。换行符会从输入值中去掉，此外没有其他的语法增强了，因为电话号码国际化差异非常明显。你可以使用如 pattern 与 maxlength 等属性来限制输入到控件中的值。

url: 这个元素呈现为一个编辑URL 的输入控件。换行符与首尾的空格将会被自动去除。

email: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在扩展的巴科斯范式(ABNF)中的规范：1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 其中atext 在规范RFC 5322 section 3.2.3 中被定义,而ldh-str在规范RFC 1034 section 3.5 中被定义。.

注意: 若设置multiple属性， 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持. 元素也拥有一些新的特性。

list：

pattern： 一个正则表达式，用于检查控件的值，能够作用于 type 值是 text， tel， search， url， 和 email 的 input 元素。

form： 一个字符串，用于表明该 input 属于哪个

元素。一个 input 只能存在于一个表单中。

formmethod：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 元素上的 method 特性。只有当 type 值为 image 或 submit，并且 form 特性被设置的情况下， formmethod 才能生效。

x-moz-errormessage ： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。

元素

元素有了一个新特性：

novalidate：设置了该特性不会在表单提交之前对其进行验证。

你可以使用 元素上的 list 特性来将一个特定的 input 与特定的

元素

元素表示计算的结果。

你可以使用 for 特性来在

元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 for 特性的值是以空格做分隔的其他元素的 ID 列表。

Gecko 2.0 (其他浏览器并非如此) 支持为

元素自定义有效性约束(validity constraints)与错误信息，可以对其使用如下 CSS 伪类：:invalid， :valid， :-moz-ui-invalid，与 :-moz-ui-valid。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，「百分比总数不能超过100」)。

placeholder 特性

placeholder 特性作用于 与 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p> <p>autofocus 特性</p> <p>autofocus 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性，它是一个 Boolean 值。这个特性适用于 <input>， <button>， <select>，与 <textarea> 元素。例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，则 autofocus 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</p> <p>label.control DOM 属性</p> <p>HTMLLabelElement DOM 接口除了为 <label> 元素提供了对应的特性外，还提供了一个额外的属性。 control 属性返回被打上标签的控件，就是 label 适用的控件，由 for 特性(如果定义的话) 或是第一个后代元素控件来确定。</p> <p>约束验证</p> <p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</p> <p>如果 <input> 元素设置了 title 特性，当验证失败时，特性值会显示在提示信息中。如果 title 设置为空字符串，则不会显示提示信息。如果没有设置 title 特性，会使用标准验证信息(例如通过 x-moz-errormessage 特性指定，或调用 setCustomValidity() 方法) 代为显示。</p> <p>注意： 约束验证不支持表单中的 <button> 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 :-moz-submit-invalid 伪类。约束验证的 HTML 语法</p> <p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p> <p><input>, <select>， 和 <textarea> 元素上的 required 特性，指定必须提供该元素的值。(在 <input> 元素上， required 只能与特定的 type 特性值结合起来生效。)</p> <p><input> 元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。</p> <p><input> 元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。</p> <p><input> 元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</p> <p><input> 与 <textarea> 元素的 maxlength 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</p> <p>type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</p> <p>此外，若要阻止对表单进行约束验证，你可以在 <form> 上设置 novalidate 特性，或在 <button> 与 <input> 元素(当 type 是 submit 或 image)上设置 formnovalidate 特性。这些特性指定了当表单提交时不做验证。</p> <p>约束验证 API</p> <p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p> <p>HTMLFormElement 对象上的 checkValidity() 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</p> <p>在 表单相关元素上：</p> <p>willValidate 属性，如果元素的约束没有被符合则值为 false。</p> <p>validity 属性，是一个 ValidityState 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</p> <p>validationMessage 属性，用于描述与元素相关约束的失败信息。</p> <p>checkValidity() 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</p> <p>setCustomValidity() 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</p> <p>HTML5 Documentation</p> <p>HTML </p> <p>Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags</p> <p>JavaScript </p> <p>Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus</p> <p>CSS </p> <p>NewSelectors Typography Visual Effects</p> <p>更多HTML5中的表单相关文章请关注PHP中文网！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="HTML5 Web Workers" href="https://m.php.cn/ms/faq/350834.html">HTML5 Web Workers</a></span><span>Artikel seterusnya：<a class="dBlack" title="HTML5&Flash之粗知浅见" href="https://m.php.cn/ms/faq/350849.html">HTML5&Flash之粗知浅见</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>