Creating Beautiful, Accessible, and User-Friendly Forms

@clarissa
Creating Beautiful,Accessible,
and User-Friendly
Forms

<input
type="text"
name="fullname">
Text

<input
type="date"
name="birthday">
Date

Month
<input
type="month"
name="month">

<input
type="time"
name="start-‐
time">
Time

<input
type="email"
name="email">
Email

<input
type="url"
name="website">
URL

<input
type="tel"
name="phone">
Telephone

<input
type="number"
name="amount">
Number

<input
type="radio"
value="red"

name="color"
id="red"><label

for="red">red</label>
<input
type="radio"
value="orange"

name="color"
id="orange"><label

for="orange">orange</label>
<input
type="radio"
value="blue"

name="color"
id="blue"><label

for="blue">blue</label>

label
{

background-‐color:
#ffa;

padding:
3px
6px;

border-‐radius:
4px;

}

input[type="radio"]
{

opacity:0;

z-‐index:100;
}

label
{

margin-‐left:
-‐17px;
}

input[type="radio"]:checked
+
label

{

color:
#fff;

background-‐color:
orange;
}

https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/

<select>

<optgroup
label="Meat">

<option
value="bacon">Bacon</option>

<option
value="chicken">Chicken</option>

<option
value="ham">Ham</option>

</optgroup>

<optgroup
label="Veggies">

<option
value="peppers">Green
Peppers</
option>

<option
value="mushrooms">Mushrooms</
option>

</optgroup>

</select>

<label
for="firstname">

First
name
</label>
<input
type="text"
name="fname"

id="firstname">

<label>

First
name:

<input
type="text"
name="fname">
</label>

<label
for="firstname">

First
name:

<input
type="text"

name="fname"
id="firstname">
</label>

::-‐webkit-‐input-‐placeholder
{
color:

blue;
}
::-‐moz-‐placeholder
{
color:
blue;
}
:-‐ms-‐input-‐placeholder
{
color:
blue;
}
:-‐moz-‐placeholder
{
color:
blue;
}

input[required]
{
...
}

or
input:required
{
...
}

input:optional
{
...
}

aria-‐live="polite"
aria-‐live="assertive"

<input
type="number"
name="number"

min="1"
max="100">
input:valid
{
border:
3px
solid
green;
}
input:invalid
{
border:
3px
dotted
red;
}

<input
type="text"
name="fieldname"

autocapitalize="off">
autocapitalize="characters"
autocapitalize="words"
autocapitalize="sentences"

Clarissa Peterson
www.clarissapeterson.com
@clarissa

Creating Beautiful, Accessible, and User-Friendly Forms

More Related Content

What's hot

Similar to Creating Beautiful, Accessible, and User-Friendly Forms

More from Clarissa Peterson

Recently uploaded

Creating Beautiful, Accessible, and User-Friendly Forms