Forms in HTML5

Compared with HTML4, the elements and features in HTML5 provide a greater degree of semantic markup, and also remove a large number of redundant elements that exist in HTML4 due to scripts and styles. By making forms behave more consistently on different websites and responding to user input data in a timely manner, HTML5 form features provide users with a better experience. These experiences also apply to users who have disabled browser scripting.

This topic describes some new features or changes that are supported by Gecko/Firefox4 or higher.

The type attribute of element

has more values.

search: This element renders a search box. Newlines are removed from the input value, but there are no other syntax enhancements.

tel: This element can be used as an input control for editing phone numbers. Newlines are removed from the input value, and no other syntax enhancements are made because phone number internationalization differences are very obvious. You can use properties such as pattern and maxlength to limit the values ​​entered into the control.

url: This element is rendered as an input control for editing a URL. Newlines and leading and trailing spaces will be automatically removed.

email: This element is rendered as an email address. Line breaks are automatically removed. It is possible to set an invalid email address, but if it meets the constraints of the input box, it must comply with the specifications in Extended Backus Normal Form (ABNF): 1( atext / "." ) "@" ldh-str 1( "." ldh-str ) where atext is defined in RFC 5322 section 3.2.3 and ldh-str is defined in RFC 1034 section 3.5. .

Note: If the multiple attribute is set, multiple emails can be entered in the area separated by commas, but Firefox does not support it. The element also has some new features.

list: The ID of the

pattern: A regular expression used to check the value of a control, which can be applied to input elements whose type values ​​are text, tel, search, url, and email.

form: A string indicating which

element this input belongs to. An input can only exist in one form.

formmethod: A string indicating which HTTP method (GET or POST) will be used when the form is submitted; if defined, the method attribute on the element can be overridden. formmethod can only take effect when the type value is image or submit and the form attribute is set.

x-moz-errormessage: A string that displays an error message when form field validation fails. This value is a Mozilla extension and is not a standard. The

element

element has a new attribute:

novalidate: Setting this attribute will not validate the form before it is submitted. .

The

You can use the list attribute on the element to associate a specific input with a specific

element

element represents the result of the calculation.

You can use the for attribute to associate the

element with other elements in the document that can affect the operation (for example, input or parameters). The value of the for attribute is a space-separated list of IDs of other elements.

Gecko 2.0 (not the case for other browsers) supports customizing validity constraints and error messages for the

element. You can use the following CSS pseudo-classes for it: :invalid, :valid, :-moz-ui-invalid, and :-moz-ui-valid. This can be useful in situations where the calculation result violates a business rule, but is not due to an error in a specific input value (for example, "the total percentage cannot exceed 100").

placeholder attribute

The placeholder attribute acts on the and elements to prompt the user what content can be entered in this field. The text in placeholder cannot contain carriage returns and line feeds. </p> <p>autofocus attribute</p> <p>The autofocus attribute allows you to specify a form control that automatically gets focus when the page loads unless the user overrides it, such as by entering a value into another control. Only one form within a document can have the autofocus attribute, which is a Boolean value. This attribute applies to <input>, <button>, <select>, and <textarea> elements. The exception is that if the type attribute value of an autofocus element is set to hidden, autofocus will not take effect (that is, you cannot let a hidden control automatically gain focus). </p> <p>label.control DOM attribute</p> <p>HTMLLabelElement The DOM interface provides an additional attribute in addition to the corresponding attributes for the <label> element. The control property returns the labeled control, which is the control to which the label applies, as determined by the for attribute (if defined) or the first descendant element control. </p> <p>Constraint Validation</p> <p>HTML5 provides syntax and API for client-side form validation. Of course, these features cannot replace server-side validation, which is still necessary for security and data integrity reasons, but client-side validation can provide a good user experience through instant feedback on input data. </p> <p>If the <input> element is set with the title attribute, when validation fails, the attribute value will be displayed in the prompt message. If title is set to an empty string, no prompt message will be displayed. If the title attribute is not set, standard validation information (such as specified through the x-moz-errormessage attribute, or calling the setCustomValidity() method) will be displayed instead. </p> <p>Note: Constraint validation does not support the <button> element in the form; if you want to change the style of the button based on the validation results of the form, you can use the :-moz-submit-invalid pseudo-class. HTML syntax for constraint validation</p> <p>The following entries in the HTML5 syntax are used to specify constraints for form data. </p> <p>The required attribute on the <input>, <select>, and <textarea> elements specifies that a value for that element must be provided. (On the <input> element, required can only take effect in combination with a specific type attribute value.)</p> <p>The pattern attribute on the<input> element is used to limit the element value to match a specific regular expression. Mode. </p> <p><input> The min and max attributes on the element limit the maximum and minimum values ​​that can be input into the element. The step attribute of the </p> <p><input> element (used in conjunction with the min and max attributes) limits the interval between input values. If a value does not match the rung of allowed values, it fails validation. </p> <p>The maxlength attribute of the <input> and <textarea> elements limits the maximum number of characters (within Unicode code points) that the user can enter. The url and email values ​​of </p> <p>type are used to limit whether the input value is a valid URL or email address respectively. </p> <p> Additionally, to prevent constraint validation on a form, you can set the novalidate attribute on the <form>, or on the <button> and <input> elements (when type is submit or image) Set the formnovalidate attribute. These attributes specify that no validation is performed when the form is submitted. </p> <p>Constraint Validation API</p> <p>The following DOM properties are related to methods and constraint validation and can be used in client scripts: </p> <p>The checkValidity() method on the HTMLFormElement object, when Returns true if the relevant elements of the form have passed their constraint validation, otherwise returns false. </p> <p>On form-related elements: </p> <p>willValidate attribute, the value is false if the constraints of the element are not met. </p> <p>The validity attribute is a ValidityState object that represents the current validation status of the element (that is, whether the constraint is successful or failed). </p> <p>validationMessage attribute, used to describe failure information of constraints related to elements. </p> <p>checkValidity() method, if the element does not satisfy any of its constraints, returns false, otherwise it returns true. </p> <p>setCustomValidity() method, sets custom validation information, which is used to override the predefined information with constraints that are about to be implemented and verified. </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>For more articles related to forms in HTML5, please pay attention to the PHP Chinese website! </p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML5 Web Workers" href="https://m.php.cn/faq/350834.html">HTML5 Web Workers</a></span><span>Next article：<a class="dBlack" title="HTML5 Web Workers" href="https://m.php.cn/faq/350849.html">HTML5 Web Workers</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/348281.html" title="AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds" class="aBlack">AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348372.html" title="HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)" class="aBlack">HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348373.html" title="Detailed explanation of image drawing examples in HTML5 canvas 9" class="aBlack">Detailed explanation of image drawing examples in HTML5 canvas 9</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348374.html" title="Regular expressions and new HTML5 elements" class="aBlack">Regular expressions and new HTML5 elements</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348469.html" title="How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server" class="aBlack">How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server</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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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>