HTML5 Basics Summary _ (2) Define attributes and new features of the form

Define your own properties data-*

Speaking of this attribute, in fact is now not often seen, how to say, because in some framework can see his figure!!!
jquery Mobile, for example, uses this attribute very frequently;

Where does this property come from ...? Of course, trailing the newest H5 together .....
Compatibility on the PC side can only say general (at the moment. Compared to older browsers), the mobile phone support is still more OK;

Although the definition of properties, but there are certain specifications, for example, the prefix must be data-[own definition of properties];

Example

    <div data-id="id"></div>

What's the use of the goods? The majority of the data used to manipulate, for example, a game to get some extra information!! (Data-level,data-score);
There are generally two ways of manipulating data (native JS and JQ):
1. Using GetAttribute, SetAttribute access data[native JS operation]
2. Accessing the dataset using the DataSet API [this can directly ignore data-, similar objects directly to the property, also JS operation]
3. jquery uses attr and data in turn to equate the two

found on the Internet a detailed explanation of the operation of the data, can aim at
Portal: http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html

The evolution of the form!input the added properties!email

<input type="email" name="user_email" >

• If submitting with submit verifies the email, check if the missing @,@ is empty .... It's complete.

Url

<input type="url" name="user_url" >

• As above, the content format is checked and only the absolute path is supported at this moment!!!!

Number

<input type="number" name="pagin" min="1" max="30" />

• There are four properties:
  
  • Min: Minimum value, less than error alert
  • Max: Maximum value, greater than error alert
  • Step: Default 1, can see the requirements set
  • Value: Set default, this is the same as traditional

Range

范围:<input type="range" name="range" min="5" max="25" />

• This is very similar to the one above, even the attribute values are identical. is a different form of presentation, which appears as a scroll bar
• It is worth mentioning that the inconsistency of the wide height determines whether the direction of the scroll bar is horizontal or vertical; h>w. Vertical!!

Date pickers

<input type="[attribute]" name="user_week" />

[attribute] replaced by the following properties can see a variety of effects, that is, compatibility is not good, chrome under normal;
Wait until the big browser support is good, you can replace the JS date selector .... A code to fix a date selection;

• Date-Select day, month, year
• Month-Select months, years
• Week-Select minute
• Time-Select the Times (hours and minutes)
• DateTime-Select time, day, month, year (UTC time)
• Datetime-local-Select time, day, month, year (local time)

Search

<input type="search" name="user_search" >

• Compared to text, there is one more closed x; other styles are different; others are basically consistent

Tel

<input type="tel" name="user_tel" >

• Similar to text, supports no matter what character input

Color

<input type="color" name="color" >

• The compatibility of this property is not very good, but the browser experience that can be supported is very good, is a color picker!!!

Required

<input type="email" name="user_email" required="required">

• Prevents the form from being submitted when the domain is empty, and the return value is Boolean, which is set to be submitted by authentication talent

Placeholder

<input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!">

• This attribute is familiar,, a bit similar placeholder, display a line of light gray font, but can be edited, but also can be obtained by JS when the input is empty, with the value of placeholder replace

Pattern

<input type="text" name="phone"pattern="[1-9]{11}" title="联系人号码" />

• Now very few see, but the regular but not by common,, to slowly popularize it

Novalidate

<form Action="#" method= "post" novalidate="true" >Mailbox:<input type= "Email" name= "user_email" required=" Required " placeholder=" Please enter your email !! " novalidate="true"><input type="Submit" /></form>

• One of the H5 attributes, verifying the form value;
• The function of Novalidate is to cancel the validation, which can be used for forms and input elements;
• Default is not set to verify!

Multiple

<form Action="#" method= "post" novalidate="true" >Mailbox:<input type="Email" name="User_email" required ="Required" placeholder="Please enter your mailbox!" novalidate="true" multiple="multiple"><input type="Submit" /></form>

• Supports upload (file) and mailbox controls (email) Enter multiple values separated by commas (half-width)

Autofocus

    <input autofocus="autofocus" type="text">

• Take the initiative to get the focus

AutoComplete

    <input autofocus="autofocus" type="text" autocomplete="no">

• H5 This property adds a switch function (on/off) to determine whether you have voluntarily completed

New elements of the form DataList

Search engine:<input type="url" list="Url_list" name="link" />        <DataList id="Url_list">            <option label="Bing" value="http://www.bing.com" />            <option label="Baidu" value="Http://www.baidu.com" />            <option label="Microsoft" value="http.// www.microsoft.com " />        </DataList>

• To bind DataList to an input field, use the input field's List property to refer to the ID of the DataList
• The drop-down default value is set in the value of option

Keygen

< Form  action  = "#"  method  = "post" ;  Username: <input  type  = "text"  name  = "Usr_name"   encryption Method: <keygen   Name  =;  < input  type  = "submit" ;  </form ;   

• Very many browsers are not well-supported for this attribute,,,,
• Encryption in two ways, the principle is also through the public key and key way (similar to SSH)

Progress

<progress value="5" max="70"></progress>

• The progress bar makes a great tool!!, to infer that the loading of file is quite good ....
• The max value must be set to display the corresponding progress bar, and the percentage is not supported!!!

Meter

<div>您的额度：<meter value="50001" min="0" max="10000" low="1000" high="9000" optimum="6000">尽情耍!!</meter></div>

• Not much to use, right now; a progress bar effect
• Min/max is the minimum and maximum value;
• Value is the current value
• Low and high are below and above optimal values (optimum)

Summarize

Form came a great leap forward, but, right now, still can not go with the use of, some browsers do not keep up, others use the old version number browser;
So the use of these new features, even if the humanization, but also only slowly, the transition will take time ~ ~ ~

HTML5 Basics Summary _ (2) Define attributes and new features of the form