Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a label for an input element using HTML5?
The label element in HTML5 is used to link a text title to an entry element, such as a form control. This label gives context and information about the goal of the input piece, allowing users to comprehend and engage with the form more easily. The “for” property is used to connect the label element to the input element. Web makers can make their websites' forms more approachable and user-friendly by combining the label and characteristics. In this section, we'll look at how to use HTML5 to create a title for an input element.
Approaches
There are three methods for setting a name for an input element in HTML5 −
Using the for an attribute in the label element
Wrapping the input element inside the label element
Nesting the input element inside a fieldset and legend element
Let us look at each approach in detail with examples now.
Approach 1: Using `for` attribute
The first approach to define a label for an input element using HTML5 is by using the `for` attribute in the label element. The “for” property is used in the label element to connect it to the input element's equivalent id attribute. This method enables the user to pick the input element by clicking on the label, making it more available to users with movement or vision limitations.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Approach 2: Wrapping input element
The second approach to defining a label for an input element using HTML5 is by wrapping the input element inside the label element. The input element is positioned inside the label element in this method, and the label text is placed before or after the input element. This method is frequently used for shortened forms where the “for” the property is not required.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>
<label>Username:
<input type="text" name="username">
</label>
<br>
<label>Password:
<input type="password" name="password">
</label>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Approach 3: Using fieldset and legend elements
The third approach to define a label for an input element using HTML5 is by Nesting the input element inside a fieldset and legend element. The fieldset element is used to combine similar form elements together, and the legend element is used to provide a description or caption for the fieldset. We can link the label with the input element by placing the input element within the field set and adding a legend element with the label text.
Example
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>
<fieldset>
<legend>Account Information:</legend>
<label>Username:
<input type="text" name="username">
</label>
<br>
<label>Password:
<input type="password" name="password">
</label>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Conclusion
In HTML5, there are several ways to link a label with an input element, including using the for property, enclosing the input element inside the label element, and nesting the input element inside a fieldset and legend element.
The method you take is determined by the requirements of your HTML document and the design of your form. All three methods are valid and widely used, and the key is to select the strategy that works best for your particular use case and keeps your form accessible and usable for all users.
398 Views
