HTML5 Learning Notes--input

In HTML5, the types of input elements are greatly increased and improved, and these elements can be simply used to implement many of the features that need to be used by JavaScript before HTML5.
So far, the most supported and comprehensive of these types of input is the Opera browser (which can also be used to compare Firefox, Safari, Chrome, Opera) with multiple browsers. For browsers that do not support new input elements, the unified INPUT element is treated as a text type. In addition, the HTML5 does not specify the appearance of these elements in each browser, so the same input element may have a different appearance in different browsers.

1. URL type

The input element of the URL type is a text box that is specifically used to enter a URL address. Commits are not allowed if the content in the text box is not in the URL format text.

<input type= "url" name= "url" value= "http://www.btcss.com"/>  

2. Type of email

The input element of an email type is a text box that is designed to enter emails. Submission is not allowed if the content in the text box is not in the email address format, but it does not check that the email address exists, and the text box can be empty when submitted, unless the required attribute is added.

The Email type text box has a multiple property-it allows you to enter a comma-separated email address in the text box. It is of course not mandatory to require users to enter this email address list. In practice, you can programmatically eject a mailing list from a user's contact address list, with a check box next to each contact's e-mail address, for the user to select input.

<input type= "Email" name= "email1" value= "ibtcss@gmail.com"/>  

3, Date type

The date type INPUT element is a favorite element of the developer. We also often see a variety of dates, such as birthdays, date of purchase, date of booking, etc., that are required for us to enter. The date type INPUT element is convenient for user input in the form of a calendar. When the text box gets the focus, the calendar is displayed and can be entered on the calendar's total selection date.

At present, FIREFOX5 does not support, Opera, Chrome, Safari support, different forms of expression.

<input type= "Date" name= "Date1" value= "2011-08-14"/>  

4. Time Type

The input element of the time type is a text box that is specifically used to enter a timeline, and the validity of the input time is checked when it is submitted. Its appearance depends on the browser, which may be a simple text box, that only checks whether a valid time is entered in the submission, can be in the form of a clock, and may also carry a time zone.

<input type= "Time" name= "time1" value= "12:00"/>  

5, Detetime type

The input element of a datetime type is a text box that is specifically used to enter a UTC date and time, and the date and time of the entry are checked for validity when submitted.

<input type= "datetime" name= "datetime1"/>  

6, Detetime-local type

The input element of the detetime-local type is a text box that is specifically used to enter a local date and time, and the date and time of the entry are checked for validity when submitted.

<input type= "datetime-local" name= "Datetime-local1"/>  

7, Month type

The input element of the month type is a text box that is specifically used to lose the month, and the entered month is checked for validity when submitted.

<input type= "Month" name= "Month1" value= "2011-08"/>  

8, Week type

The input element of the week type is a text box that is specifically used to lose the week number, and the entered week number is checked for validity when submitted. It may be a simple input text box that allows the user to enter a number, or it may be more complex and more accurate. It is similar in format to "2011-w08", representing the 7th week of 2011.
Opera browser provides a secondary input of the calendar, you can select a date in the calendar, after selection, the text box automatically displays the week number.

<input type= "Week" name= "Week1" value= "2011-w08"/>  

9, Number type

The input element of type number is a text box that is specifically used to lose numbers, and whether the input is a number when submitted. They have the Min, max, and step properties.
In Opera browser, it has a numeric control button that controls its value so that it does not exceed the maximum value, and when clicked on the numeric control button, the value is added or subtracted by the step property, which can also be entered directly into the number.

<input type= "number" name= "number1" value= "Si" min= "3" max= "the" step= "ten"/>  

10, Range type

The input element of the range type is a text box that allows only a range of values to be entered, which has the Min attribute and the Max property, can set the minimum and maximum values (the default is 0 and 100), and it also has the Steo property, which allows you to make each drag dimension, in Opera browser, Make the value by the way of the slider bar.

<input type= "number" name= "number1" value= "Si" min= "3" max= "the" step= "ten"/>  

11, output elements of the Append

In HTML5, a new element output is appended. Output elements define different types of outputs, such as the result of a calculation or the output of a script. The output element must be subordinate to a form, that is, it must be written inside the form, or add a form property to it. The current position of the element vegetation Opear browser support.

<form action= "" id= "Testform" > 
Please select a value
<input type= "range" name= "Range1" min= "0" max= "M" step= "5"/ >
<output onforminput= "Value=range1.value" >50</output>
</form>  

12. Search Type

The input element of the search type is a text box that is specifically used to enter a text box for the search keyword. The search type and text type are only in appearance but not. In Safari Explorer, it looks like the operating system's default rounded rectangular text box, but it can be rewritten with a CSS CCTV table. In other browsers, TA has the same appearance as a text box of type text, but can be overwritten with a CSS style sheet. (-webkit-appearance:textfield)

<input type= "Search" name= "Search1"/>  

13, Tel type

The input element of the Tel type is designed as a private text box that is used to enter phone numbers. It does not have a special checksum rule and does not force a number (because many phone numbers usually come with other text), such as 86-010-86670831. But developers can use the pattern attribute to validate the input phone number format.

<input type= "Tel" name= "Tel1" pattern= "15901010831"/>  

14, Color type

The input element of the color type is used to select a color, which provides a color picker. It is currently supported only in Opear browsers and BlackBerry browsers.

<input type= "Tel" name= "Tel1" pattern= "15901010831"/>  

Comprehensive use

After adding so many elements to the HTML5, what does it look like when you HTML5 the most basic form? This is an example of a simple user registration page that is commonly used on a Web page. In this example, the new input elements in HTML5 are used synthetically, and the necessary validation attributes are added to these elements.

<!
DOCTYPE html>  
You can compare this code in different browsers. I personally think it's best to view it in Opera browser.