HTML Input Types Tutorial

An HTML form is used to collect user input. HTML provides different input types to handle different types of data. In this tutorial, we will learn how HTML input types work with fictional examples.

Text Input

The <input type="text"> is used when you want the user to enter a single line of text.

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

Password Input

The <input type="password"> is used when you want the user to enter a password. The text entered in a password input is masked for security reasons.

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

Email Input

The <input type="email"> is used when you want the user to enter an email address. The input must be in the form of an email address.

<input type="email" name="email">

Checkbox Input

The <input type="checkbox"> is used when you want the user to select one or more options from a list.

<input type="checkbox" name="option1" value="Option 1"> Option 1
<input type="checkbox" name="option2" value="Option 2"> Option 2

Radio Input

The <input type="radio"> is used when you want the user to select only one option from a list.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Submit Button

The <input type="submit"> is used to submit the form data to the server.

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

Number Input

The <input type="number"> is used when you want the user to enter a numerical value.

<input type="number" name="quantity" min="1" max="100">

File Input

The <input type="file"> is used when you want the user to upload a file.

<input type="file" name="file">

Color Input

The <input type="color"> is used when you want the user to select a color.

<input type="color" name="color">

Range Input

The <input type="range"> is used when you want the user to select a value from a range.

<input type="range" name="range" min="0" max="100">