All about <INPUT /> Elements
Vaishnavi Jaju
Introduction:
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Email : <input type="text" placeholder="Enter your email here.." />
</body>
</html>
Let's all the types of input types:
1. Button:
A push button with no default behavior displays the value of the value attribute, empty by default.
2.checkbox :
The checkbox input element is similar to the radio input, but it allows the user to select multiple options.
3. color:
Elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.
date:
This type of input is used to take data as input from the user. You can set a default value for the input with a date inside the value attribute.
email:
A field for editing an email address. Looks like a text input.
6. file:
Elements with type="file" let the user choose one or more files from their device storage.
7. image:
Elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
8. password:
Elements of type password provide a way for the user to securely enter a password.
9. Range :
elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider
10. Search:
elements of type search are text fields designed for the user to enter search queries into.
11. Submit :
This element is used to submit the form.
12. Tel :
Elements of type tel are used to let the user enter and edit a telephone number.
13. Time :
elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).
14. URL :
Elements of type url are used to let the user enter and edit a URL.
15. Reset :
Elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.
16. Number :
elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
These are all mostly used imp input types.
Hope you liked this article!!
Thank you for reading!!
Happy Learning!!
Resources:
- w3schools
Subscribe to my newsletter
Read articles from Vaishnavi Jaju directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by