This write-up presents a complete overview of the following input types:
This write-up will present a complete guide for all the above-mentioned input types, so, let’s get started!
The text type determines a single-line text field.
The below given snippet creates a text type input field within a form tag:
The above code snippet will generate the output something like this:
The output verifies that the input field takes text type data.
The submit type button sends the form’s data to the URL specified within the <form action> tag.
The below snippet shows how submit type works:
The above code specifies a URL of an HTML file in the form tag, moreover it creates a button and a text field. Clicking on the submit button will send the data entered within the text field to the forms.html page.
Before clicking on the button we are on the formAttributes.html page, so, the output of the above code snippet will be like this:
Clicking on the button will display the user-entered data on the forms.html page:
This is how the submit button works in HTML.
It is used to take the email address of the user and if someone enters the irrelevant data, the email type wouldn’t submit that data:
Following will be the output of this code:
The password type is used to determine a password field:
The above piece of code produce the following output:
It is used to create a clickable button:
The above line of code initially shows the following output:
It is used to create a radio button which allows a user to pick one option out of multiple options:
The above code will provide the following output:
The checkbox type is used to create a checkbox that allows a user to select a single or multiple options:
The above-given snippet shows the following output:
The output authenticates the working of the checkbox.
To attach a file on a website the file input type can be used:
Initially it displays “no file chosen”:
When a user selects a file then the file name will be displayed adjacent to the “choose File” option:
This input type is used to create a color picker. The by default value is black however, a user can pick a color using RGB color values:
The above piece of code provides the following output:
Clicking on the color will show will allow a user to pick a color of his choice:
It is used to create a date type field that allows a user to pick a date:
Following will be the output for the above code snippet:
A user can pick a date as follows:
It is used to create a time type field that allows a user to pick a time. The time input type can be implemented in the same way as the date type:
Initially, the above lines of code will provide the following output:
A user can pick a time of his choice:
It can be used to specify date and time simultaneously:
The output of the above code snippet will look like this:
A user can pick both date and time simultaneously as shown below:
It is used to select a week, the below snippet will provide a better understanding:
The below-given snippet shows the output of above lines of code:
It is used to select a month, the below code snippet describes the working of month input type:
The output of above-given snippet will look like this:
It is used to take a telephone number from the user. We can specify a specific pattern that must be followed. The below snippet shows the working of tel input type:
If someone enters an irrelevant pattern then an warning message will be displayed to enter the requested format:
Output verifies that the “tel” input type is working properly.
The <input> tag provides input controls to accept the data from the user in various ways. In HTML different input types can be used to take the input from the user, for example, text, email, password, button, submit, and many more. All these input types come up with different functionalities. This article provides a comprehensive overview of some most frequently used input types and considered multiple examples for better understanding.