Different Types of HTML Form Input Fields

Definition:

HTML form input fields are used to take different types of information from users in a webpage form.

There are different types of HTML form input fields as follows:

1. Text-Based Input Fields

Text-based input fields are those fields in which you enter the information in text-based form, such as name, email, password, number, etc.

• Text Input Field
• Password Input Field
• Email Input Field
• Number Input Field
2. Selection Input Fields

Selection input fields are those fields in which you choose one or more options from given choices, such as radio buttons and checkboxes.

• Radio Button
• Checkbox Input Field
3. File Input Field

File input fields are those fields that help you upload files from your device.

You can upload images, documents, and videos in a form.

• File Input Field
4. Form Action Buttons

Form Action Buttons are those buttons used to perform actions on a form, such as submitting data or resetting all form fields.

• Submit Button
• Reset Button

Text Input Field

It helps to write normal text and enter the name, city, etc., in a text input field.

Syntax:

<input type="text">

Example:

<input type="text" placeholder="Enter your name">

Output:

Password Input Field

It helps to enter a password where the text is not visible in a password input field.

Syntax:

<input type="password">

Example:

<input type="password" placeholder="Enter password">

Output:

Email Input Field

It helps to enter an email address in an email input field.

Syntax:

<input type="email">

Example:

<input type="email" placeholder="Enter your email">

Output:

Number Input Field

It helps to enter numbers only in a number input field.

Syntax:

<input type="number">

Example:

<input type="number" placeholder="Enter number">

Output:

Radio Button

It helps to select one option from multiple choices in a radio input field.

Syntax:

<input type="radio">

Example:

<input type="radio"> Male

Output:

Checkbox Input Field

It helps to select multiple options in a checkbox input field.

Syntax:

<input type="checkbox">

Example:

<input type="checkbox"> Cricket

Output:

File Input Field

It helps to upload files in a file input field.

Syntax:

<input type="file">

Example:

<input type="file">

Output:

Submit Button

It helps to send all form data using a submit button.

Syntax:

<input type="submit">

Example:

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

Output:

Reset Button

It helps to clear all form fields using a reset button.

Syntax:

<input type="reset">

Example:

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

Output: