Do you have a label tag for the fields associated with your input?

Updated by Brady Stroud [SSW] 1 year ago. See history

123

<introEmbed
  body={<>
When adding input boxes to collect data, please always have a \<label\> tag associated with your \<input\> tag to link the labels with their respective edit controls. This improves accessibility and gives nice focusing stuff (when you click the label).
  </>}
/>
```html
<p>
  <label for="EmailAddress">Email Address</label>
  <input id="EmailAddress" type="text" />
</p>
```

**Tip:** To do this in ASP.NET use the AssociatedControlID parameter on your \<asp:Label /\>; controls.

```html
<p>
  <asp:Label
    ID="EmailLabel"
    runat="server"
    Text="Email Address"
    AssociatedControlID="EmailAddress"
  />
  <asp:TextBox ID="EmailAddress" runat="server" />
</p>
```

**Tip:** For a nicer user experience, consider using adaptive labels and inputs with a UI Library like [Material UI](https://material-ui.com/components/text-fields/).

Acknowledgements

Adam Cogan
Related rules

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.

We open source.Loving SSW Rules? Star us on GitHub. Star