Input types

There are different input elements in HTML forms that are used to accept users' information. An input element has various attributes, for example, text, password, checkbox, etc. In this topic, we will dive deep into the HTML input types.

Email

The input type email is used to accept email information from the user. When this attribute is set to the input type in an HTML form, users must only enter their email address: no other information is accepted in the email field. Let's see how you can take advantage of this input type in HTML forms by using email as one of its values.

<form action="">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" />
  <input type="submit" />
</form>

The result will look like this:

As you can see, if a user enters any other data other than an email in the email field, an error is displayed showing that the input provided is not an email.

Password

Now that our user revealed their email, let's gain their trust and protect their data. <input type="password"> provides the option to securely enter the password:

<form action="">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" /> 
</form>

And this is what we get:

The characters entered in the password field are masked: they are displayed as black dots. This is very useful: no peeping Tom will spy on the password entered by the user, and the data will be safe and sound.

Telephone number

The input type tel is used to accept a phone number from a user in HTML forms. Similar to the email type, if the user enters any other information other than a telephone number, the input field will display an error. Let's look at the example of an HTML form in which the type of the input element is set to tel.

<form action="">
  <label for="telephone">Contact no.</label>
  <input
    type="tel"
    id="telephone"
    name="telephone"
    pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}"/>
  <input type="submit" />
</form>

The result will look like this:

As you can see in the code snippet above, you can provide the pattern in which you want to accept the contact number from a user with the pattern attribute of the input element. The pattern attribute specifies that a user must enter the phone number in a specific format. Here, the numbers inside the square bracket [] specify the range of numbers a user can enter, whereas the number inside the curly braces {} specifies the total number of characters before a space, for example, [0-9]{4} means a user can enter 4 numbers in the range of 0-9.

File

Very often a website or a web application needs the user to input a file from their end. This can also be done with the help of HTML. When the input attribute type is set to file while creating a form, a file-select field is created on the web page. Using this field, a user can browse their own computer and upload a file to the website. Let's see how you can set this input type for your form in the example below:

<form action="">
  <label for="file">Choose a file:</label>
  <input type="file" id="file" name="file" />
</form>

Here is the output:

Date

You can also include a date input type in HTML forms. The value of the type attribute of the input element must be set to date to accept the date from the user. Let's see how you can create an input field that only accepts dates in HTML forms.

<form action="">
  <label for="date">Preferred Date:</label>
  <input type="date" id="date" name="date" />
</form>

The output would look like this:

Note that the date picker displayed may look different depending on the browser and its version. The date picker shown above is taken from Google Chrome(101+).

Radio

Radio buttons are used to group options related to the same theme. By default, these buttons are small circles that are filled when selected. You can select only one option at a time. With <input type="radio" />, you can create a radio button:

<form action="">
  <label for="english">English</label>
  <input type="radio" id="english" name="language" value="english" /> 
  <label for="spanish">Spanish</label>
  <input type="radio" id="spanish" name="language" value="spanish">
</form>

The result looks like this:

Checkbox

Sometimes one option is not enough. In this case, you can create checkbox forms using <input type="checkbox" />:

<form action="">
  <label for="computer">I have a computer</label>
  <input type="checkbox" id="computer" name="technique" value="computer" />
  <label for="phone">I have a phone</label>
  <input type="checkbox" id="phone" name="technique" value="phone">
</form>

This is the result:

Checkboxes allow the user to select any number of options from the list. If you'd like some of your options to be checked initially, you can use the checked attribute. It's a boolean and, if present, it equals true. You can use this attribute with both checkboxes and radio buttons. Here's the syntax:

<input type="checkbox" checked />

Conclusion

In this topic, you learned about various types of input fields in HTML forms. When the type attribute of the input element is set to email, the user can enter only the email in the input field; the password type mask the characters, so they are unseen. When the type is set to tel, the user will only be able to enter their contact number in the HTML form. The input type file allows a user to upload a document or file of any type from their own computer, whereas the date value of the type attribute is used to accept dates from the user. Radio buttons come in handy when a user needs to select one option from a group. Checkboxes, on the contrary, allow for multiple selections.