11.40. HTML5’s new Input type

发布时间 : 2025-10-25 13:33:11 UTC      

Page Views: 10 views

HTML5 has several new form input types. These new features provide better input control and validation.

This chapter provides an overview of these new input types:

  • Color

  • Date

  • Datetime

  • Datetime-local

  • Email

  • Month

  • Number

  • Range

  • search

  • Tel

  • Time

  • Url

  • Week

Note: not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.

11.40.1. Input type: color

color type is used in input fields are mainly used to select colors, as shown below:

Opera1 Safari2 Chrome1 Firefox2 Internet Explorer2

Example

Select a color from the Color Picker:

Choose the color you like: <input type="color" name="favcolor"> 

11.40.2. Input type: date

date type allows you to select a date from a date selector.

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer2

Example

Define a time controller:

Birthday: <input type="date" name="bday"> 

11.40.3. Input type: datetime

datetime type allows you to select a date (UTC time).

Opera1 Safari1 Chrome2 Firefox2 Internet Explorer2

Example

Define a date and time controller (local time):

Birthday (date and time): <input type="datetime" name="bdaytime"> 

11.40.4. Input type: datetime-local

datetime-local type allows you to select a date and time (no time zone).

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer2

Example

Define a date and time (no time zone):

Birthday (date and time): <input type="datetime-local" name="bdaytime"> 

11.40.5. Input type: email

email type is used to contain the e-mail the input field of the address.

Opera1 Safari2 Chrome1 Firefox1 Internet Explorer1

Example

Automatically validates when the form is submitted email whether the value of the field is valid:

E-mail: <input type="email" name="email"> 

Tip: Safari browsers in iPhone support email type and match it by changing the touchscreen keyboard (add @ and .com options).

11.40.6. Input type: month

month Ttype allows you to select a month.

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer2

Example

Define month and year (no time zone):

Birthday (date and time): <input type="month" name="bdaymonth"> 

11.40.7. Input type: number

number type is used for input fields that should contain numeric values.

You can also set limits on the numbers you accept:

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer1

Example

Define a numeric input field (qualified):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> 

Use the following properties to specify the qualification of the number type:

Attribute

Description

Disabled

Specifies that the input field is disabled

Max

Specify the maximum allowable value

Maxlength

Specifies the maximum character length of the input field

Min

Specify the minimum allowable value

Pattern

Specify the mode used to validate the input field

Readonly

Specifies that the value of the input field cannot be modified

Required

Specify that the value of the input field is required

Size

Specifies the number of characters visible in the input field

Step

Specify the legal numeric interval of the input field

Value

Specify the default value for the input field

11.40.8. Input type: range

range type is used for input fields that should contain a range of numeric values.

range the type is displayed as a slider.

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer1

Example

Define a value that does not need to be very precise (similar to slider control):

<input type="range" name="points" min="1" max="10"> 

Use the following properties to specify the qualification of the number type:

  • max -specify the maximum allowable value

  • min -specify the minimum allowable value

  • step -specify a legal number interval

  • value -specify default values

11.40.10. Input type: tel

Opera2 Safari2 Chrome2 Firefox2 Internet Explorer2

Example

Define the input phone number field:

Phone number: <input type="tel" name="usrtel"> 

11.40.11. Input type: time

time type allows you to choose a time.

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer2

Example

Define an input time controller (no time zone):

Select Time: <input type="time" name="usr_time"> 

11.40.12. Input type: url

url type is used for input fields that should contain URL addresses.

Automatically validates when the form is submitted url the value of the field.

Opera1 Safari2 Chrome1 Firefox1 Internet Explorer1

Example

Define the input URL field:

Add your homepage: <input type="url" name="homepage"> 

Tip: Safari browsers in iPhone support url type and match it by changing the touchscreen keyboard (add .com options).

11.40.13. Input type: week

week type allows you to choose week and year.

Opera1 Safari1 Chrome1 Firefox2 Internet Explorer2

Example

Define week and year (no time zone):

Select week: <input type="week" name="week_year"> 

11.40.14. HTML5 < input > tag

Label

Description

< input >

Describe the input importer

《地理信息系统原理、技术与方法》  97

最近几年来,地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持,如城市管理、区划、环境整治等等,地理信息成为信息时代重要的组成部分之一; “数字地球”概念的提出,更进一步推动了作为其技术支撑的GIS的发展。 与此同时,一些学者致力于相关的理论研究,如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面,并且这两个方面构成了相互促进的发展过程。