form-fields.md

Form fields

Fields within text

<label>The airport is  <input type="text" name="miles" size="3" value="8">  miles away.</label>

Field with help text

<label for="username">Username</label>
<input type="text" name="username" id="username" aria-invalid="false" aria-describedBy="help">
<span id="help">Enter your user name</span>

Field with error message

<label for="username">Username</label>
<input type="text" name="username" id="username" aria-invalid="true" aria-describedBy="error">
<strong id="error">The username is incorrect</strong>

Multi-part fields

<div role="group" aria-labelledby="label">
    <span id="label">Social Security</span>
    <span>
        <input type="number" name="ss-1" size="3" title="First 3 digits" required>
        <input type="number" name="ss-2" size="2" title="Next 2 digits" required>
        <input type="number" name="ss-3" size="4" title="Last 4 digits" required>
    </span>
</div>

Note: You can use <fieldset> instead <div role="group"> but has layout issues

A group of radio buttons

<div role="radiogroup" aria-labelledby="label">
    <span id="label">Credit Card Type:</span>
    <span>
        <label><input type="radio" name="cct" value="visa"> Visa</label>
        <label><input type="radio" name="cct" value="mastercard"> Master Card</label>
        <label><input type="radio" name="cct" value="other"> Other</label>
    </span>
</div>

---

• Marking up forms and reporting violations of forms
• Semantic markup for fieldset alternative
• Semantic input error message inside label
• ARIA21: Using Aria-Invalid to Indicate An Error Field