HTML input type attributes

HTML <input> tag

Browser Support

All major browsers support the type attribute. However, not all major browsers support all the different input types can work in all major browsers.

See below for each input type of browser support.

Definition and Usage

<Input> type attribute specifies the type of element you want to display.

The default type is: text.

Note: This attribute is not required, but we think you should always use it.

Differences between HTML 4.01 and HTML5

The following input types are new in HTML5 type: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel and url.

grammar

Property Value

Examples

Input Type: button

Examples

Definition of clickable buttons, when the user clicks a button to start a period of JavaScript:

<input type="button" value="点我" onclick="msg()">

try it"

Input Type: checkbox

Examples

Box allows the user to select one or more options in a number of choices:

<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>

try it"

Input Type: color

Examples

Choose a color from the color picker:

选择你喜欢的颜色: <input type="color" name="favcolor"><br>

try it"

Input type: date

Examples

Defined date controls:

生日: <input type="date" name="bday">

try it"

Input Type: datetime

Examples

Define the date and time controls (with time zone):

生日 (日期和时间): <input type="datetime" name="bdaytime">

try it"

Input Type: datetime-local

Examples

Define the date and time controls (without time zone):

生日 (日期和时间):<input type="datetime-local" name="bdaytime">

try it"

Input Type: email

Examples

Field Definitions for the e-mail address (when the form is submitted automatically to the value of the email field to verify):

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

try it"

Tip: iPhone Safari browser will recognize the email input type, then change the touch screen keyboard to adapt to it (add @ and .com options).

Input type: file

Examples

To define file selection field and a "Browse ..." button, for file upload:

选择一个文件: <input type="file" name="img">

try it"

Input Type: hidden

Examples

Definition of hidden fields, hidden fields are not visible to the user. Hidden fields often store a default value, or change their values ​​by the JavaScript:

<input type="hidden" name="country" value="Norway">

try it"

Input Type: image

Examples

Custom image as the submit button:

<input type="image" src="img_submit.gif" alt="Submit">

try it"

Input Type: month

Examples

Define the month and year control (without time zone):

生日 ( 月和年 ): <input type="month" name="bdaymonth">

try it"

Input Type: number

Examples

Enter a number to define the fields for (you can set the acceptable limit numbers):

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

try it"

Please use the following attributes to specify restrictions:

• MAX - the maximum allowed by regulations.
• min - the minimum allowed by regulations.
• STEP - requirements for legal digital interval.
• value The - specified default.

Input Type: password

Examples

Define password fields (password fields are masked characters):

<input type="password" name="pwd">

try it"

Input Type: radio

Examples

It allows the user to select an option in a number of choices:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

try it"

Input Type: range

Examples

It defines the exact value is not important input digital control (such as slider controls). You can also set limits acceptable numbers:

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

try it"

Please use the following attributes to specify restrictions:

• MAX - the maximum allowed by regulations.
• min - the minimum allowed by regulations.
• STEP - requirements for legal digital interval.
• value The - specified default.

Input type: reset

Examples

Define the reset button (reset all the form is the default):

<input type="reset">

try it"

Tip: Be careful using the reset button!For users, accidentally clicked on the Reset button is a very annoying thing.

Input Type: search

Examples

Defined search field (for example, site search or Google search, etc.):

Search Google: <input type="search" name="googlesearch">

try it"

Input Type: submit

Examples

Define the submit button:

<input type="submit">

try it"

Input Type: tel

Examples

Defined fields for entering phone numbers:

电话号码: <input type="tel" name="usrtel">

try it"

Input Type: text

Examples

The user can define two to enter a single line of text in a text field:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

try it"

Input Type: time

Examples

Enter the time of the definition of control is used (without time zone):

选择时间: <input type="time" name="usr_time">

try it"

Input Type: url

Examples

Defines input fields of the URL:

添加你的主页: <input type="url" name="homepage">

try it"

Tip: iPhone Safari browser will recognize the url input type, then change the touch screen keyboard to adapt to it (add .com option).

Input type: week

Examples

Definition of week and year control (without time zone):

选择周: <input type="week" name="week_year">

try it"