Input Types

HTML provides various <input> elements that enable you to capture different types of data from users. Let's explore some commonly used input types:

email and password

• type="email": Used for email input fields that require a valid email address. The browser automatically validates the email address, prompting the user to correct invalid entries;
• type="password": Used for password fields where the entered text is masked for security. We can also specify minLength and maxLength attributes to set password length requirements.

Example:

number

type="number": Used for numerical input. We can define a specific range with the min and max attributes and set a specific step value with the step attribute.

Example:

telephone

type="tel": Intended 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 it's a valid phone number.

Example:

checkbox

type="checkbox": Allows the user to select one or more options from predefined choices. The checked attribute makes a checkbox checked by default.

Example:

radio

type="radio": Creates a set of options where only one option can be selected. A radio button represents each option, and choosing one automatically deselects the others. Each radio button should have a unique value attribute to identify it.

Example:

range

type="range": Creates a slider control that allows users to select a value within a specific range. We can apply min, max, step, and value attributes to define its behavior.

Example:

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": Combines time and date inputs.

Example:

Note

For consistent styling across different devices, ready-made solutions are often used for popup calendars and time inputs.