HTML provides various types of <input/> elements that can be used to capture different types of data. Some of the commonly used input types are:

email and password

type="email" is used for email input fields that require a valid email address. The browser will automatically validate the email address; if the user's email is invalid, he will be prompted to type the correct address.

type="password" is used for password fields where the entered text is masked to prevent it from being visible to others. The characters are typically replaced with asterisks or bullets. Generally, we also provide minLength and maxLength attributes to say how long a password can be.

number

type="number" is used for taking numerical input. It allows users to enter a number in a specific range (min / max attributes) with a specific step (step attribute) value.

telephone

type="tel" is intended to be used for inputting telephone numbers, but it does not perform any validation on the input. It is up to the developer to validate the input and ensure that it is a valid phone number.

checkbox

type="checkbox" allows the user to select one or more options from a set of predefined choices. It is represented by a square box that can be checked or unchecked by the user. Attribute checked makes a checkbox checked by default.

radio

type="radio" is used to create a set of options where only one option can be selected at a time. Each option is represented by a radio button, and when one is selected, the others are automatically deselected. Each radio button should have a unique value attribute to identify it.

range

type="range" is used to create a slider control that allows users to select a value within a specific range. min, max, step and value attributes can be applied as well. We know there functionality.

Note

We will learn JavaScript in the following courses. It is not the context of this course.

date and time

type="date" allows users to select a date from a calendar popup. type="time" allows users to input a time in a 24-hour format. type="datetime-local" is the combination of time and date inputs. After considering the examples, it will be much clearer.

Note

Because all browsers have their popup calendars and time, which are poorly styled, we use ready solutions to ensure that on all devices, the calendar or time popup will look the same.