Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Input Types | Forms
Ultimate HTML
course content

Course Content

Ultimate HTML

Ultimate HTML

1. Web Development
2. Tags and Attributes
3. Document Structure
4. Media and Tables
5. Forms

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

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:

html

index

css

index

js

index

copy

Note

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

Everything was clear?

Section 5. Chapter 5
We're sorry to hear that something went wrong. What happened?
some-alt