What are HTML input types?

Overview

Form input types are attributes of the input element that defines the content of information fields in HTML forms.

The input is an element of an HTML form, whereas the type is an attribute of the input element.

Input types and their functions in HTML

Type

Function

text

Specifies a one-line text input field

password

Specifies a one-line password input field

submit

Establishes a submit button that submits the form to the server

reset

Establishes a reset button to reset all values in a form

radio

Constructs a radio button that provides a list of options to choose from

checkbox

Constructs checkboxes to select multiple options at a time

button

Constructs a button that handles an event

file

Constructs an option to select a file from device storage

image

Constructs a graphical submit button

color

Specifies an input field with a specific color

date

Defines an input field to choose a date

datetime-local

Specifies an input field to type a date without a time zone

email

Specifies an input field to enter an email address

month

Specifies a control with month and year, without a time zone

number

Specifies an input field to enter a number

url

Specifies a field to enter a URL

search

Specifies a single line text field to enter a search string

tel

Specifies an input field to enter a telephone number

How to declare an input type in an HTML form

HTML forms can contain several fields of different input types. These depend on the type of information we wish to obtain from users with the form.

Example

The code below demonstrates how to create input fields in an HTML form with different types.

  • HTML
The code above demonstrates how to create a "SignUp" form.

Explanation

  • Lines 10 to 14: We add labels and text fields using the input tag attribute type="text" for the first and last name.

  • Lines 16 to 17: We add a label and text field using the input tag attribute type="text" for the email address.

  • Lines 19 to 23: We add labels and text fields using the input tag attribute type="password" for the password and repeat password.

  • Lines 25 to 27: We add a label and text field using the input tag attribute type="checkbox" for checkbox, and the checked="checked" attribute for a checked checkbox.

  • Lines 29: We add a paragraph using the <p> tag.

  • Lines 31 to 34: We add two buttons using the input tag attributes type="button" and type="submit".

Free Resources