02. Labels and Inputs
Introduction
Section titled “Introduction”Labels and inputs work together to create accessible, usable form controls. The <label> element associates text with form controls, improving accessibility and user experience. The <input> element provides various input types for collecting different kinds of data. Understanding how to properly connect labels and inputs is essential for creating accessible forms.
Label Element
Section titled “Label Element”Basic Usage
Section titled “Basic Usage”<label for="username">Username:</label><input type="text" id="username" name="username">Implicit Labeling
Section titled “Implicit Labeling”<label> Username: <input type="text" name="username"></label>Input Types
Section titled “Input Types”<label for="name">Name:</label><input type="text" id="name" name="name"><label for="email">Email:</label><input type="email" id="email" name="email">Password
Section titled “Password”<label for="password">Password:</label><input type="password" id="password" name="password">Checkbox
Section titled “Checkbox”<label> <input type="checkbox" name="agree"> I agree to the terms</label><label> <input type="radio" name="gender" value="male"> Male</label><label> <input type="radio" name="gender" value="female"> Female</label>Best Practices
Section titled “Best Practices”Always Use Labels
Section titled “Always Use Labels”<!-- Good: Labeled input --><label for="email">Email:</label><input type="email" id="email" name="email">
<!-- Avoid: Unlabeled input --><input type="email" name="email" placeholder="Email">Proper Association
Section titled “Proper Association”Use for attribute:
<label for="username">Username:</label><input type="text" id="username" name="username">