ITChapters | HTML Tutorials for Beginners to Advance

HTML Input Types

<input type="text"> defines a one-line text input field:

The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted.

<input type="password"> defines a password field:

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<input type="submit"> defines a button for submitting form data to a form-handler.

<input type="reset"> defines a reset button that will reset all form values to their default values:

<input type="button"> defines a button:

This is how the HTML code above will be displayed in a browser:

See this example:

<form>
    First name:<br>
     <input type="text" name="firstname">br> Last name:<br>
     <input type="text" name="   lastname">
    E-mail:<br>
     <input type="email" name="email">
    User password:<br>
     <input type="password" name="psw">

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

     <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
     <input type="checkbox" name="vehicle2" value="Car"> I have a car
    <input type="submit" value="Submit">
     <input type="reset">
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">
</form>

Output:

First name:

Last name:

E-mail:

User password:

Male
Female
Other
I have a bike I have a car

HTML5 Input Types

HTML5 added several new input types:

color

Select your favorite color:
<input type="color" name="favcolor">

date

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

datetime-local

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>

You can also add restrictions to dates:

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