Home > Developer > Web Develop
Please use the new standard browser (Chrome/opera/firefox/safari ...) Browse the sample in this article, otherwise you will see only a blank form! @@facesymbol@@‖∣
The wheel of time rolls over, and the road of the front end never stops. For this front-end of this technology, any technological innovation, we must first understand it to learn it, such as the web world of this beautiful flower---HTML5. Although HTML5 was released, many people (including me) All feel that popularity it is still very remote, but since the release of many enterprise-level Web site to its attempts to apply (such as <!doctype html> applications, such as canvas application), so that HTML5 took a big step, followed by the release of IE9, No doubt let us see the HTML5 is not far away from us. Learning HTML5 more than half a year, although the offline storage and canvas and other innovative technology is still smattering, but I still hope that I now learn to help more front-end people learn this is undoubtedly a new trend of technology. This article will give you a detailed look at the updates to the form features in HTML5. before reading this article, we recommend opening the sample demo page in the latest version of opera. See sample demo , form structure more free xhtml in the form of the need to put in the label elements such as Inpu/button/select/textarea, in the HTML5 can be placed completely anywhere on the page, The new form property then points to the ID value of the form to which the element belongs, and can be associated. For example:
?| 12345 | <formid="iform"> <input type="text"> ...</form><inputvalue="我在id为iform的表单外" form="foo"> |
ii. Multiple input types (most new types are not currently supported for all standard browsers, see Tips in the sample demo) Email input type
?| 1 | <inputname="email" type="email"> |
This type requires a properly formatted email address, otherwise the browser is not allowed to commit and there will be an error message. This type must specify a name value in opera, otherwise no effect. URL input type
?| 1 | <inputtype="url"> |
The text field shown in the above code requires a properly formatted URL and will automatically add http://At the beginning of opera. datetime-dependent input types (these are very Bull X's)
?| 1234 | <inputtype="date"><input type="time"><input type="month"><inputtype="week"> |
This series is a cool type that completely solves the cumbersome JS Calendar control problem. But the current MS only opera/chrome new version support, and the display is not the same effect. Number input type (these are Bull X's)
?| 1 | <inputtype="number"> |
This does not need to explain more, asked to enter a numeric character, if not entered will throw an error. Range input Type
?| 1 | <inputtype="range"> |
This type displays a draggable slider bar and allows you to constrain the drag range by setting the Max/min/step value. When you drag, it feeds back to value. Search input type
?| 1 | <inputtype="search"> |
This type indicates that the input will be a search keyword, with results=s to display a small search icon. Tel input type
?| 1 | <inputtype="tel"> |
This type requires a phone number, but in fact it does not have a special validation, which is no different from the text type. Color input type
?| 1 | <inputtype="color"> |
This type of form allows the user to select a color value from the color picker and feed it back into value. iii. New Form Properties Placeholder Property
?| 1 | <inputtype="text" placeholder="点击我会以清除"> |
This is a very useful attribute, eliminating the use of JS to achieve click to clear the form initial value. browser support is also good, MS in addition to Firefox, other standard browser can be very good support. Require/pattern Property
?| 123 | <inputname="require" type="text"><input name="require1" required="required" type="text"><inputname="require2" type="text" pattern="^[1-9]\d{5}$"> |
Form validation properties, require type, if the input value is empty, the submission is rejected, and there is a hint. Both of the above are useful. And can be used for textarea and hidden/image/submit types. The pattern type is regular validation, You can complete a variety of complex validations. Both types must specify a name value in opera, otherwise no effect. Autofocus Property
?| 1 | <inputautofocus="true" type="text"> |
The default Focus property, which can focus on a form control when the page loads, is similar to the JS Focus (). List Property
?| 123456 | |
This property needs to be shared with the DataList property, DataList is the memory of the selection box, and the list property can customize the contents of the memory for the selection box. Max/min/step Property
?| 1 | <inputtype="range" min="1" max="100" step="20"> |
Limit the input range of values, as well as the input level of the value, for example, you can set the minimum input maximum value in number, or set the drag ladder in range. AutoComplete Property
?| 1 | <inputtype="text" autocomplete="on"> |
This property provides automatic completion for the form. If the property is open, it is well done automatically. In general, this property must start the browser AutoComplete feature.
HTML5 in the form of an explanation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
