HTML <input> Type Attribute Values

HTML <input type=”button”>

Example

A push button that activates a JavaScript when it is clicked:

<input type=”button” value=”Click me” onclick=”msg()”>

Try it Yourself

HTML <input type=”checkbox”>

Example

Let the user select one or more options of a limited number of choices:

<input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car<br>
<input type=”checkbox” name=”vehicle3″ value=”Boat” checked> I have a boat<br>

Try it Yourself »

HTML <input type=”color”>

Example

Show a color picker (with a predefined red value):

Select your favorite color: <input type=”color” name=”favcolor” value=”#ff0000″>

Try it Yourself »

HTML <input type=”date”>

Example

Show a date control:

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

Try it Yourself »

HTML <input type=”datetime-local”>

Example

Show a date and time control (no timezone) :

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

Try it Yourself »

HTML <input type=”email”>

Example

Define a field for an e-mail address (validates automatically when submitted):

E-mail: <input type=”email” name=”emailaddress”>

Try it Yourself »

HTML <input type=”file”>

Example

Define a file-select field:

Select a file: <input type=”file” name=”myFile”>

Try it Yourself »

HTML <input type=”hidden”>

Example

Define a hidden field:

 <input type=”hidden” id=”custId” name=”custId” value=”3487″>

Try it Yourself »

HTML <input type=”image”>

Example

Define an image as a submit button:

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

Try it Yourself »

HTML <input type=”month”>

Example

Define a month and year control (no time zone):

Birthday (month and year): <input type=”month” name=”bdaymonth”>

Try it Yourself »

HTML <input type=”number”>

Example

Define a field for entering a number (You can also set restrictions on what numbers are accepted):

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

Try it Yourself »

HTML <input type=”password”>

Example

Define a password field (characters are masked):

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

Try it Yourself »

HTML <input type=”radio”>

Example

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

<input type=”radio” name=”gender” value=”male”> Male<br>
<input type=”radio” name=”gender” value=”female”> Female<br>
<input type=”radio” name=”gender” value=”other”> Other

Try it Yourself »

HTML <input type=”range”>

Example

Define a range control (like a slider control):

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

Try it Yourself »

HTML <input type=”reset”>

Example

Define a reset button:

<input type=”reset”>

Try it Yourself »

HTML <input type=”search”>

Example

Define a search field (like a site search, or Google search):

Search Google: <input type=”search” q=”googlesearch”>

Try it Yourself »

HTML <input type=”submit”>

Example

Define a submit button:

<input type=”submit”>

Try it Yourself »

HTML <input type=”tel”>

Example

Define a field for entering a telephone number:

Telephone: <input type=”tel” name=”usrtel”>

Try it Yourself »

HTML <input type=”text”>

Example

Define a single-line text field that a user can enter text into:

First name: <input type=”text” name=”fname”>

Try it Yourself »

HTML <input type=”time”>

Example

Define a control for entering a time (no time zone):

Select a time: <input type=”time” name=”usr_time”>

Try it Yourself »

HTML <input type=”url”>

Example

Define a field for entering a URL:

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

Try it Yourself »

HTML <input type=”week”>

Example

Define a week and year control (no time zone):

Select a week: <input type=”week” name=”week_year”>

Try it Yourself »

Post Author: Zahid Farid