HTML Input Tag and its attributes
I bet you didn't know HTML provides this too.
What's an Input Tag?
A tag that takes different kinds of input like text, files, colors, options, checklists etc.
For using different inputs HTML has given us a type attribute that we can use accordingly.
Syntax:
<input type="text"> <!-- Attribute type for input tag -->
I will list the ones that are commonly used:
text
radio
checkbox
password
email
submit
reset
file
Let's explore them one by one
Text
So the type="text" attributes tell that input that the type will be text.
Example:
<input type="text">
Radio
The radio button is given when we are giving the user a single select option.
Example:
Checkbox
The checkbox is like a multi-select option. For selecting multiple options or giving consent in things as I agree to terms and conditions or for updates.
Example:
Password
Password type is like the input type text but you can't see what you are writing. It's because of security concerns as you only know what you are writing.
Syntax:
A quick tip you can also use the pattern attribute for adding a regular expression to add validation on the input types like text, search, url, tel, email and password. You can uncomment the above code and play with the example i took from mdn docs.
Html does provide validation of input using type email as it check whether the email is in the correct format or not. It can take multiple emails (comma separated) with another attribute called multiple.
Example:
Submit
Submit is an input type that gives an interface like a button and on clicking the submit input type the browser will attempt to send the form data to the server.
Reset
It resets all the input form values to their default value.
File
It lets the user to chose one or more files from their device storage and upload them to the server. Once chosen, the files can be uploaded to a server using form submission.
So that are some common input types used in HTML pages.
Thanks for reading.