HTML5 types of modified input elements

Adding improved input elements to the HTML5

、

In the past we make the page input box, will use a lot of JS verification, now have HTML5 write this effect has not so much trouble, below I will give you two kinds of HTML5 input of the new type of application.
1. URL Type:
<form>
<input name= "URLs" type= "url" value= "http://www.jb51.net/"/>
<input type= "Submit" value= "Submission"/>
</form>
After setting this type, it looks like a normal element, but if you put this type in the form, when you click the Submit button, if the input box is not a URL, it cannot be submitted.

2. Email Type:
<form>
<input name= "Email" type= "email" value= "http://www.jb51.net/"/>
<input type= "Submit" value= "Submission"/>
</form>

3. Time Type
If we say that the type in the above URL types is modified to email, then when the form is submitted, it will automatically verify that the contents of this input box are in the email format, and if not, it cannot be submitted.

The date input type in HTML5 gives the browser the opportunity to implement the native calendar, from which the JavaScript version of the calendar component exits the historical stage.

The HTML5 specification only specifies the date new input type, and does not specify the implementation and style of the calendar popup. Therefore, each browser according to its own design implementation of the calendar.
Currently only Google browser fully realize the calendar function. Believe that this situation will soon be over, and all browsers will eventually provide native calendar components.

If you are using Google Chrome, you can see this beautiful date component in the example demo below. You can see the native calendar box of your browser by clicking on the input box with your mouse.

Date of Appointment:

If you are currently using a browser that has not implemented the calendar component, you can take a sneak peek at the picture below.

Without any javascript, it becomes one of the most basic input types <input type= "Date"/>

<labelFor=The meeting"> Date:  </label><input id=" meeting  "type=" Datevalue= "2014-01-13" />   

HTML5 makes web programmers ' work incredibly simple, doesn't it? Not only that, we get not only a "date" type of input, but also a series of related date, time parameters let us customize. We call this the "date" type, but here the type is actually available for "date", "Week", "month", "Time", "datetime", and "datetime-local". Below I will show you the appearance of various types with examples and graphic methods.

To be reminded, the following are in Google Chrome effect, other browsers will appear slightly different, but the function will be the same.

Date (<input type= "date"/>)

This is the most basic date selector and you can only select a date from the calendar.

Please select a date:

Week (<input type= "Week"/>)

At this point, your choice is not a date, but a week. Notice how the week number is displayed.

Please select week:

Month (<input type= "Month"/>)

At this point you choose the month, which is less than the "date" type and the number of days that follow.

Please select month:

Times (<input type= "Time"/>)

This is the simplest kind of display, no calendar, only time.

Please select time:

Date + time (<input type= "datetime"/>)

Displays both the date component and the time component, which is actually a combination of the "date" type and the "timing" type.

Please select a date and time:

Local Date Time (<input type= "datetime-local"/>)

As the name implies, it is displayed in local time.

Please select a date and time:

In addition to the above types, the date input type has some other attributes to be aware of.

Properties	Description
Value	This is the common attribute of the INPUT element in HTML. Is the data in the input box.
Min	Minimum value for date or time
Max	The maximum value of a date or time
Step	Step. Different types have different default steps. date– default is 1 days week– default is 1 weeks month– default is January time– default is 1 minutes datetime– default is 1 minutes Local datetime– default is 1 minutes

4. Range

　　
HTML5 types of modified input elements