Fun html5 (1) Check the new cool input types and attributes of html5

Today, I officially started to learn html5. Compared with the previous versions of html, html5 has many new features and attributes, making our interface more elegant and easy to use, this article introduces the input types and attributes added to html.

These codes are implemented in the cheetah browser.

The input types added in html5 include email, url, number, range, date pickers, datalist, telephone, search, and color.

Email: When submitted, the system automatically verifies whether the input content meets the format.

 

Email:

 

Url: When submitted, the system automatically verifies whether the input content is a url.

 

url: 

 

Number: Used to enter a number. min indicates the minimum value, max indicates the maximum value, and step indicates the number change by clicking the arrow. value indicates the default value. min, max, step, and value are not allowed to be written.

 

Age:

 

Range: Used for the input field that should contain numeric values within a certain range. It is displayed as a slide bar.

 

Proportion:

Date pickers: date, month, week, time, datetime, datetime-local,

Date -- Select Year month day, month --- Select Year month, week --- Select Year week, time -- select hour and minute, datetime -- Select Year month day time, datetime-local -- select local time

Here we give a datetime-local

 

Time:

 

Datalist: it is equivalent to a drop-down list and can be automatically supplemented.

 

URL:      
              

 

 

Color: color selector

 

Color:

 

There are also two types: telephone and search. Since I cannot see the effect during use, I will not write it here. Please try it by yourself.