Design Converter
Education
Last updated on Feb 17, 2025
•5 mins read
Last updated on Feb 17, 2025
•5 mins read
Are your forms easy to use?
Forms help users interact with websites, from signing up to submitting feedback. But without clear labels, users may struggle to understand what to do.
HTML labels improve form usability by connecting text with input fields. They make navigation easier and support screen readers for better accessibility.
This blog covers best practices for structuring labels, linking them to input fields, and making forms more user-friendly.
Let’s make your forms clear and accessible for everyone!
An HTML label is an inline element used to define a textual description for input elements in a form. It enhances accessibility and improves usability by linking textual descriptions to form controls. The label tag allows users to interact with input fields by clicking the label text, which focuses on the associated input.
A label tag can be associated with an input field using the for attribute, linking it to the id attribute of an input element.
1<form> 2 <label for="username">Username:</label> 3 <input type="text" id="username" name="username"> 4</form>
In this example, clicking on the "Username" label text will focus on the text input field.
For text input fields, the label tag should be properly associated with the input field using the for attribute.
1<form> 2 <label for="email">Email:</label> 3 <input type="email" id="email" name="email"> 4</form>
The id attribute connects the label element to the input field, improving accessibility for keyboard navigation and screen readers.
For radio buttons, each option should have its own label tag.
1<form> 2 <p>Choose your gender:</p> 3 <label for="male">Male</label> 4 <input type="radio" id="male" name="gender" value="male"> 5 6 <label for="female">Female</label> 7 <input type="radio" id="female" name="gender" value="female"> 8</form>
For a screen reader, linking the label text to each input type radio ensures better accessibility.
Each checkbox should have a label element to indicate its purpose.
1<form> 2 <label for="subscribe"> 3 <input type="checkbox" id="subscribe" name="subscribe"> 4 Subscribe to the newsletter 5 </label> 6</form>
Here, the label tag wraps the input field, ensuring better usability.
A label tag can explicitly associate with an input field using the for attribute, which references the id attribute of the input element.
1<form> 2 <label for="password">Password:</label> 3 <input type="password" id="password" name="password"> 4</form>
Alternatively, the input field can be nested inside the label tag for implicit association.
1<form> 2 <label> 3 Password: 4 <input type="password" name="password"> 5 </label> 6</form>
Both explicit and implicit labeling methods improve the user interface by making forms more accessible.
For advanced accessibility, the aria-label attribute can provide additional context when the visible label text is insufficient.
1<form> 2 <input type="text" aria-label="Enter your phone number"> 3</form>
This ensures that screen readers interpret the input field correctly.
Unlabeled input elements cause usability issues, especially for screen readers. Use the for attribute or nest the input field within the label tag.
Each input field should have a unique id attribute to prevent conflicts in form submissions.
Placeholders disappear when users type, reducing accessibility. A proper label text should always accompany an input field.
A clickable label tag makes selecting options in radio buttons and checkboxes easier.
❌ Incorrect Example:
1<form> 2 <label for="email">Email:</label> 3 <input type="email"> 4</form>
The missing id attribute prevents proper association between the label tag and the input field.
✅ Corrected Example:
1<form> 2 <label for="email">Email:</label> 3 <input type="email" id="email"> 4</form>
By default, the label tag is an inline element. It can be changed to block using CSS.
1label { 2 font-weight: bold; 3 font-size: 1.1em; 4 color: #333; 5 margin-bottom: 5px; 6 display: block; 7 } 8 9 input[type="text"], 10 input[type="email"], 11 input[type="password"] { 12 width: 100%; 13 padding: 8px; 14 margin: 8px 0; 15 box-sizing: border-box; 16 border: 2px solid #ccc; 17 border-radius: 4px; 18 } 19 20 form { 21 max-width: 400px; 22 margin: 0 auto; 23 padding: 20px; 24 background-color: #f9f9f9; 25 border-radius: 8px; 26 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 27 } 28 29 .submit-button { 30 background-color: green; 31 color: white; 32 padding: 10px 20px; 33 border: none; 34 border-radius: 5px; 35 cursor: pointer; 36 }
1<form> 2 <label for="username">Username:</label> 3 <input type="text" id="username" name="username"> 4 <label for="email">Email:</label> 5 <input type="email" id="email" name="email"> 6 7 <label for="password">Password:</label> 8 <input type="password" id="password" name="password"> 9 <button type="submit" class="submit-button">Submit</button> 10 </form>
This improves form control organization by placing each label text on a new line.
Well-structured HTML labels make forms easier to use and improve accessibility. They help users navigate fields smoothly, whether using a mouse, keyboard, or screen reader.
When creating a form, always connect labels to the right input fields and style them for clarity. This improves the user experience and ensures the form works well on all devices.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.