A, HTML5 form features:
- HTML5 Forms adds a number of built-in controls, and control properties
- XHTML tag element needs to be placed in input / button / select / textarea such as in the form, in the HTML 5 can be placed anywhere on the page, and the ID value of the element belongs point form by a new form attribute can associate.
Two, HTML5 new types of controls:
- email Input Type:
<input type="email" name="email" />Asked to enter a correct email address format, or the browser does not allow submission, and it will display an error message
- url input type: requires the correct URL address input format, it will automatically add the http at the beginning of the Opera: //
<input type="url" /> - Date and time associated input type:
current MS only Opera / Chrome new version supports, and display of results are not the same<input type="date" /><input type="time" /><input type="month" /><input type="week" /> - Input number Type:
<input type="number" />Asked to enter the correct number format
- range Type:
<input type="range" step="2" min="0" max="10" value="2" />Displaying a slider bar draggable, by setting the max / min / step drag values defined range, the feedback value to a value drag
- search input type:
<input type="search" />Enter a keyword search, by results = s search can display a small icon
- tel input type:
<input type="tel" />He asked to enter a phone number, but in fact no special verification, and type text makes no difference
- color input type:
<input type="color" />It allows the user to select a color value by a color selector, and the value of the feedback
Three, HTML5 new form properties:
- The placeholder attribute :
<input type="text" placeholder="点击我会清除" />Click Clear Forms achieve initial value, MS in addition to Firefox, other standard browser can be a good support
- require / pattern properties :
<input type="text" name="require" required="" /><input type="text" name="require1" required="required" /><input type="text" name="require2" pattern="^[1-9]\d{5}$" />When the property require the type of form validation, if the input value is empty, then refused to submit and when prompted, attention must specify the name value in Opera, otherwise no effect.
- The autofocus attribute :
<input type="text" autofocus="true" />The default focusing properties can be focused to a form control when the page loads, similar to JS's focus ()
- list attributes :
<input type="text" list="ilist"> <datalist id="ilist"> <option label="a"></option> <option label="b"></option> <option label="c"></option> </datalist> </input>
Datalist common attribute needs, datalist is the memory of the selection box, and the list property may select specific memory block content
- max / min / step Properties :
<input type="range" max="100" min="1" step="20" />Input range of the limit value, and an input level of progressive values, such as maximum input may be set at a minimum value Number, or in the range set in step drag
- autocomplete attribute :
<input type="text" autocomplete="on" />This property provides auto-complete functionality for the form, if the property is turned on may well be done automatically, in general, this property must start the browser auto-complete function
- data attributes :
<select data="http://XX.com/"></select>HTML5 data attribute support, outreach to select a data source control, you can not select the drop-down list dynamically add each set of options from a database, such as national, provincial and municipal lists, etc.
- XML Submission encoding format :
Web Form is common encoding format is application / x-www-form-urlencoded. This format data to the server can be easily accessed. HTML5 provides a new data format: XML Submission, i.e., application / x-www-form + xml. A simple example, the server receives data directly form the XML format.
Fourth, the simple application example:
HTML5 prevent bubbles form and display a message
Achieve results:
Complete code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>表单验证默认样式修改</title> </head> <style> .oneline{line-height: 1.5;margin:10px auto;} .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;} .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;} .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;} .error-message{color:red; font-size:12px;text-indent:108px;} </style> <body> <form id="forms"> <div class="oneline"> <label for="name">用户名:</label> <input id="name" name="name" class="sinput" required> </div> <div class="oneline"> <label for="email">Email:</label> <input id="email" name="email" class="sinput" type="email" required> </div> <div class="oneline"> <input type="submit" value="提交" id="thesubmit"> </div> </form> <script> function replaceValidationUI(form) { form.addEventListener("invalid", function(event) { event.preventDefault(); }, true); form.addEventListener("submit", function(event) { if (!this.checkValidity()) { event.preventDefault(); } }, true); var submitButton = document.getElementById("thesubmit"); submitButton.addEventListener("click", function(event) { var inValidityField = form.querySelectorAll(":invalid"), errorMessage = form.querySelectorAll(".error-message"), parent; for (var i = 0; i < errorMessage.length; i++) { errorMessage[i].parentNode.removeChild(errorMessage[i]); } for (var i = 0; i < inValidityField.length; i++) { parent = inValidityField[i].parentNode; parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>") } if (inValidityField.length > 0) { inValidityField[0].focus(); } }) } var form = document.getElementById("forms"); replaceValidationUI(form); </script> </body> </html>