Course Content
Ultimate HTML
Ultimate HTML
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 specifyminLength
andmaxLength
attributes to set password length requirements.
Example:
index
index
index
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:
index
index
index
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:
index
index
index
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:
index
index
index
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:
index
index
index
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:
index
index
index
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:
index
index
index
Note
For consistent styling across different devices, ready-made solutions are often used for popup calendars and time inputs.
Everything was clear?