The <input> tag specifies an input field where the user can enter data. Input tags are the most important form elements. Input tags can be displayed in many ways depending on their attributes. The different types of HTML input tag are present in this post.
How to add input tags in HTML?
An input tag is a self-closing tag in HTML which means we don’t need to write input tags like <input></input>, we can write input tags like <input> or <input/>. HTML input tag has a type attribute with which we can specify the type of the HTML input tag.
1. Text HTML Input tag
Text input is the most used input tag. It is used to create basic text inputs like name, username etc. To create a text input we need to set the type text.
Example :
<input type="text" />2. Password Input tag
Passwords are secret, so for the passwords, we can’t use text input tags. Instead, we can use password inputs. In password inputs, the user inputs will appear as ‘*’. For password inputs the input type need to be set password.
Example:
<input type="password" />3. Email HTML Input tag
For emails, HTML has a special input. The email input can validate the user input. It checks if the email is a valid email or not. To create an email input we need to set the type email.
Example:
<input type="email" />4. Number Input tag
If you want the user can only type a number in the input then the number input is the best way to do it. If the user types any text in the input field the input will not accept it. To create a number input we need to add number in the input type attribute.
Example:
<input type="number" />5. Search HTML Input tag
Html has an input tag which can be used for search inputs. To create one we need to add search in the type attribute of the input. In the search input, you will get a clear search icon after typing something.
Example:
<input type="search" />6. Telephone Input tag
For telephone or phone number inputs, HTML has a special type of input. It accepts the user input as a telephone number. To create one, we need to set the type to tel.
Example:
<input type="tel" />7. Color HTML Input Tag
The input tag can also be used as a colour input. It takes a colour code as a value. To create one we need to add color in type attribute.
Example:
<input type="color" />8. Radio Input
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.To get this we need to set the type to radio.
Example:
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>9. Checkbox
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. To get this we need to set the type to checkbox.
Example:
<input type="checkbox" id="html" name="html" value="HTML">
<label for="html"> HTML</label><br>
<input type="checkbox" id="css" name="css" value="CSS">
<label for="css"> CSS</label><br>
<input type="checkbox" id="javascript" name="javascript" value="Javascript">
<label for="javascript"> Javascript</label><br></br>10. Button Input
We can create buttons with HTML Buttons with <button></button> tag. But we can also create buttons with input tags. To create one we need to add button in a type attribute and it will act as a button. Also add a value attribute to add button text.
Example:
<input type="button" />11. Submit Button Input
Example:
Input tags can be used as submits buttons for the forms. To create one we need to add type=submit in the input tag. and then it will act as a submit button
Example:
<input type="submit" />Also read: Save Form data in Google Sheets with Next JS
12. Reset Button
To clear the value of a form or input we can create a reset button. To create one we need to add reset in the type attribute.
Example:
<input type="submit" />13. File Input tag
HTML input can also take a file as its input. The file can be in any format. You can specify any specific type that it can accept. To create one we just need to add file in the type attribute.
Example:
<input type="file" />14. Image HTML Input tag
We can also specify to accept only images for an input tag. For that, we need to set image instead of file in the type attribute. We can also add src , alt, height and width attributes.
Example:
<input type="image" />15. URL Input tag
Input URL accepts only URLs. To create one we need to add url in the type attribute.
Example:
<input type="url" />16. Date Input tag
We can use the input tag to get the date value from the user. Users can select the date, month and year from the select box. And this all can be done with one line of code. For this we need to set the type date.
Example:
<input type="date" />17. Time Input tag
Like a date, select input can be used to get the time value from the user. The user can select a time in hour minutes and also can check am/pm. To get this we need to set type to time.
Example:
<input type="time" />18. Date Time Input
If we want to add the features of date select and time select both we can do it with one input date. For this, the type will be datetime-local.
Example:
<input type="datetime-local" />19. Week Input
The week selection can give us the feature of selecting a whole date from the year. it will show the selected week. To get this we need to set the type to week.
Example:
<input type="week" />20. Month Input
Input has also a type to select the whole month of a year. For this, the type will be month.
Example:
<input type="month" />21. Range Input
Range bar can also be achievable with HTML input. Setting the type to range will give us a range bar with which the user can drag and set any value.
Example:
<input type="range" />
