Labeled with Love

Connecting the Dots

A typical form control: a label and a field.
Your Name
<input name="full_name">
<label for="full_name">Your Name</label>
<input id="full_name" name="full_name">

An Alternate Approach

<label>
<input type="checkbox" name="devices[]" value="Asus Nexus 7">
Asus Nexus 7
</label>
<input type="checkbox" id="asus-nexus-7" name="devices[]"
value="Asus Nexus 7">
<label for="asus-nexus-7">Asus Nexus 7</label>
<label for="asus-nexus-7">
<input type="checkbox" name="devices[]" id="asus-nexus-7"
value="Asus Nexus 7">
Asus Nexus 7
</label>
input {
width: 80%;
}
input[type=checkbox],
input[type=radio] {
width: auto;
}
input {
width: 80%;
}
label input {
width: auto;
}

Added Benefit: Interactivity

Animation showing how clicking a label will focus the associated form control.
A screenshot of a group of checkbox controls with their labels outlined.
.grouped label {
margin: -1em 0;
padding: 1em 0;
}
An animation showing very generous tap targets on a narrow screen.

Placeholders Aren’t Labels

An animation showing a placeholder in action on Web Standards Sherpa.
<p class="form-control">
<input id="full_name" name="full_name">
<label for="full_name">Your Name</label>
</p>
.form-control {
position: relative;
}
label {
display: block;
position: absolute;
top: 50%;
margin-top: -.5em;
left: .25em;
transition: .25s transform;
}
input {
display: block;
border: 1px solid;
border-radius: 3px;
padding: .25em;
}
input:focus + label {
transform: translateY(-1.5em);
}
A fancy, accessible form field and label from Mary Lou’s collection.

--

--

--

Author of Adaptive Web Design and former Web Standards Project manager advocating for web standards & accessibility at @Microsoft.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Gustafson

Aaron Gustafson

Author of Adaptive Web Design and former Web Standards Project manager advocating for web standards & accessibility at @Microsoft.

More from Medium

JavaScript Frustration

Submit Form with Files using Javascript

How to get data from localstorage in javascript

HTML — A MUST FOR EVERY WEBSITE