clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

How to make form element label clickable

Filed under: HTML/CSS— Tagged with: form, snippets, accessibility

It’s good accessibility have a large click area on form elements.

The label and field can be "linked" with by adding a for attribute to the label, giving it the id of the form field:

<input type="checkbox" id="example-checkbox" />
<label for="example-checkbox">Example checkbox</label>

Or wrap the input and the label text to the label.

<label>
  <input type="checkbox" />
  Example checkbox
</label>

Same goes for all types of input fields.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!