HTML Input Types

HTML input types define the type of data that can be entered or selected by users in an <input> element. Each input type corresponds to a specific form control, such as text boxes, checkboxes, radio buttons, and more. The type attribute of the <input> element is used to specify the input type. Here are some common HTML input types:

Text Input (text):

Creates a single-line text input field.

Example

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

You can click on above box to edit the code and run again.

Output

Password Input (password):

Creates a password input field where the entered characters are typically masked.

Example

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

Output

You can click on above box to edit the code and run again.

Output

Checkbox (checkbox):

Creates a checkbox for boolean (true/false) input. Multiple checkboxes can be used, and users can select multiple options.

Example

<input type="checkbox" name="suscriber" value="yes" />Checkbox

You can click on above box to edit the code and run again.

Output

Checkbox

Radio Button (radio):

Creates a radio button for selecting one option from a group of options. Users can select only one option from the group

Example


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

You can click on above box to edit the code and run again.

Output

Male Female

Submit Button (submit):

Creates a submit button that, when clicked, submits the form to the specified action.

Example


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

You can click on above box to edit the code and run again.

Output

Reset Button (reset):

Creates a reset button that, when clicked, resets the form to its default values.

Example


<input type="reset" value="reset" />

You can click on above box to edit the code and run again.

Output

Button (button):

Creates a generic button that can be used with JavaScript for custom behavior.

Example


<input type="button" value="click me" />

You can click on above box to edit the code and run again.

Output

File Input (file):

Creates a file input field that allows users to upload files.

Example

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

You can click on above box to edit the code and run again.

Output

Hidden Input (hidden):

Creates a hidden input field that is not displayed on the web page but can be used to store values sent to the server.

Example

<input type="hidden" name="secretValue" value="123" />

You can click on above box to edit the code and run again.

Output

Number Input (number):

Creates an input field for numeric input. The browser may provide up/down arrows to increment or decrement the value.

Example

<input type="number" name="quantity"/>

Output

Email Input (email):

Creates an input field specifically designed for entering email addresses. It may include browser validation for email format.

Example

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

Output

URL Input (url):

Creates an input field specifically designed for entering email addresses. It may include browser validation for email format.

Example

<input type="url" name="websiteURL" />

Output

These are just a few examples of HTML input types. Each type serves a specific purpose and provides a different user interface for data entry. The appropriate input type is chosen based on the kind of data that needs to be collected from the user.