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.

Email

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.