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.
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 |
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 |
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.
The code below demonstrates how to create input fields in an HTML form with different types.
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"
.