HTML input type

HTML input Type input type

This chapter describes the input types of the <input> element.

input type: Text

<input type= "Text" > defines a single line input field for text input:

Instance

INPUT type: password

<input type= "password"> Define password field: The password cannot be seen unless type= "password" is used.

Instance

INPUT type: Submit

<input type= "Submit" > Define the button that submits the form data to the form handler.

A form handler (Form-handler) is typically a server page that contains a script that processes input data.

If you omit the Value property of the Submit button, the button will get the default text

Specify the form handler (Form-handler) in the form's Action property:

Instance

Input Type:radio

<input type= "Radio" > Define a radio button.

Radio buttons let a user select only one of a limited number of choices:

Instance

Input Type:checkbox

<input type= "checkbox" > Define check box.

Checkboxes let a user selects ZERO or more options of a limited number of choices.

Instance

Input Type:button

<input type= "button> definition button.

Instance

HTML5 input type

HTML5 adds a number of new input types:

• Color
• Date
• Datetime
• Datetime-local
• Email
• Month
• Number
• Range
• Search
• Tel
• Time
• Url
• Week

Note: An input type that is not supported by an older web browser will be treated as the input type text.

INPUT type: number

<input type= "Number" > is used for input fields that should contain numeric values.

You can limit the number.

Restrictions can be applied to input fields, depending on browser support.

Instance

Input limits

Some of the commonly used input restrictions are listed here (some of which are new in HTML5):

Properties	Description
Disabled	Specifies that the input field should be disabled.
Max	Specifies the maximum value for the input field.
MaxLength	Specifies the maximum number of characters for the input field.
Min	Specifies the minimum value for the input field.
Pattern	Specifies the regular expression through which the input value is checked.
ReadOnly	Specifies that the input field is read-only (cannot be modified).
Required	Specifies that the input field is required (required).
Size	Specifies the width of the input field (in characters counted).
Step	Specifies the legal number interval for the input field.
Value	Specifies the default value for the input field.

INPUT type: color

<input type= "COLOR" > for input fields that should contain colors.

Depending on the browser support, the color picker appears in the input field.

Instance

INPUT type: Range

<input type= "Range" > is used for input fields that should contain values within a certain range.

Depending on browser support, the input field can be displayed as a slider control. You can use the following attributes to specify limits: Min, max, step, value.

Instance

INPUT type: Month

<input type= "Month" > allows the user to select the month and year.

The date selector appears in the input field, depending on the browser support.

Instance

INPUT type: Week

<input type= "Week" > allows users to select weeks and years.

The date selector appears in the input field, depending on the browser support.

Instance

INPUT type: Time

<input type= "Time" > allows the user to select the Times (no time zone).

Depending on the browser support, the time picker appears in the input field.

Instance

INPUT type: datetime

<input type= "datetime" > allows the user to select a date and time (sometimes a zone).

The date selector appears in the input field, depending on the browser support.

Instance

<form>  Birthday (Date and time):  <input type= "datetime" Name= "Bdaytime" ></form>

INPUT type: datetime-local

<input type= "Datetime-local" > allows the user to select a date and time (no time zone).

The date selector appears in the input field, depending on the browser support.

Instance

INPUT type: Email

<input type= "Email" > for input fields that should contain e-mail addresses.

Based on browser support, the e-mail address can be automatically verified when it is submitted.

Some smartphones recognize the type of email and add ". com" to the keyboard to match e-mail input.

Instance

INPUT type: Search

<input type= "Search" > For search Fields (the search field behaves like a regular text field).

Instance

INPUT type: Tel

<input type= "Tel" > for input fields that should contain phone numbers.

Currently, only the Tel type is supported for Safari 8.

Instance

input type: URL

<input type= "url" > is used for input fields that should contain URL addresses.

Based on browser support, the URL field can be automatically validated at commit time.

Some smartphones recognize the type of URL and add ". com" to the keyboard to match the URL input.

Instance

HTML input type