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

Source: Internet
Author: User
Tags local time

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];


    <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

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.
<input type="url" name="user_url" >
    • As above, the content format is checked and only the absolute path is supported at this moment!!!!
<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
范围:<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)
<input type="search" name="user_search" >
    • Compared to text, there is one more closed x; other styles are different; others are basically consistent
<input type="tel" name="user_tel" >
    • Similar to text, supports no matter what character input
<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!!!
<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
<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
<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
<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!
<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)
    <input autofocus="autofocus" type="text">
    • Take the initiative to get the focus
    <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="" />            <option label="Baidu" value="Http://" />            <option label="Microsoft" value="http.// " />        </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
< 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 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!!!
<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)

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.