HTML Input Types

HTML Input Types:

Purpose:
Control what kind of information users can enter into form fields.

Key
element: <input> tag with its type attribute specifying the input type.

Common Input Types:

text:

General
text input (default).

Example:

<input
type=”text” name=”username”>

password:

Masks
entered characters for security.

Example:

 <input type=”password”
name=”password”>

email:

Validates
email format.

Example:

<input
type=”email” name=”email”>

number:

Accepts numerical input.

Example:

<input
type=”number” name=”age”>

checkbox:

Multiple
choices (can select one or more).

Example:

 <input type=”checkbox”
name=”interests” value=”music”>

radio:

Single
choice (can select only one).

Example:

<input
type=”radio” name=”gender” value=”male”>

submit:

Creates a
button to submit the form.

Example:

<input
type=”submit” value=”Submit”>

Other Useful Input Types:

date:

Select a
date.

Example:

 <input type=”date”
name=”birthday”>

time:

Select a
time.

Example:

<input
type=”time” name=”meetingTime”>

url:

Validates
URL format.

Example:

<input
type=”url” name=”website”>

search:

Text input
for search queries.

Example:

<input
type=”search” name=”searchTerm”>

tel:

Optimized
for telephone numbers.

Example:

<input
type=”tel” name=”phone”>

range:

Numerical
input with a slider.

Example:

<input
type=”range” name=”volume” min=”0″
max=”10″>

 

Example:

 

 

Output:

 

 

Join Our Newsletter