Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Form Input and Label Elements | Tables and Forms
HTML Essentials
course content

Course Content

HTML Essentials

HTML Essentials

1. Understanding the Web and HTML
2. HTML Fundamentals
3. Images and Media
4. Tables and Forms
5. Advanced HTML

Form Input and Label Elements

As we have seen before, the most powerful element of a form is input. This element expects data from the user. Let’s focus on it.

Types of Input

Text Input

Designed for short textual data input, such as usernames, email addresses, or brief messages.

Password Input

Used for password input, where characters are masked for security purposes. Ensures privacy by hiding the entered characters.

Email Input

Used for collecting email addresses from users. Performs client-side validation to ensure the entered value is valid in email format.

Telephone Input

Used for collecting telephone numbers from users. Allows users to input phone numbers in various formats, including international numbers.

Number Input

Used for collecting numerical data from users. Provides a numeric keypad on mobile devices for easy input.

Checkbox

Allows users to select one or more options from a list of choices. Suitable for scenarios where multiple selections are allowed, such as selecting multiple items from a list or agreeing to terms and conditions.

Radio Button

Allows users to select one option from a list of mutually exclusive choices. Suitable for scenarios where only one option should be selected, such as gender selection or choosing a payment method.

File Input

Allows users to upload files from their device, choose from their local filesystem, and submit them with form data. This feature is particularly useful when attaching documents or images.

Date Input, Time Input, and DateTime Input

Allows users to input dates, times, or both. Provides user-friendly interfaces for selecting dates and times. Useful for capturing dates of birth, appointment times, or event schedules.

Example: Input something into the fields, and they will suggest various options. Don't worry; no data will be collected.

html

index

css

index

js

index

copy

You may have noticed that filling out the form is not very convenient when you do not understand what is being asked for in each field. That's why the labels come to our aid.

Labels

Labels (<label>) are essential for linking text labels with form input elements, enhancing accessibility and user-friendliness. It's crucial that the for attribute of the <label> tag matches the id attribute of the associated input element.
Example:

In the example above:

  • When you click the Username: label, it will automatically focus on the corresponding input field;
  • The label and input are linked together using the for and id attributes, respectively;
  • Both for and id attributes have the same value (username).

Let's make filling in the form easier by adding labels to the inputs from the previous example.
Example:

html

index

css

index

js

index

copy

Video Tutorial

1. What attribute of the `<label>` tag is used to associate it with a specific `<input>` element in a form?
2. What attribute is missing for the input element that needs to be associated with the label element?

What attribute of the <label> tag is used to associate it with a specific <input> element in a form?

Select the correct answer

What attribute is missing for the input element that needs to be associated with the label element?

Select the correct answer

Everything was clear?

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