Embed Size (px)
Citation preview
@clarissaCreating Beautiful, Accessible,
and User-Friendly
Forms
<input type="text" name="fullname">
Text
<input type="date" name="birthday">
Date
<input type="date" name="birthday">
Date
<input type="date" name="birthday">
Date
<input type="date" name="birthday">
Date
Month<input type="month" name="month">
Month<input type="month" name="month">
Month<input type="month" name="month">
<input type="time" name="start-‐time">
Time
<input type="time" name="start-‐time">
Time
<input type="time" name="start-‐time">
Time
<input type="time" name="start-‐time">
Time
<input type="email" name="email">
<input type="email" name="email">
<input type="email" name="email">
<input type="email" name="email">
<input type="url" name="website">
URL
<input type="url" name="website">
URL
<input type="tel" name="phone">
Telephone
<input type="tel" name="phone">
Telephone
<input type="number" name="amount">
Number
<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;}
input[type="radio"]:checked + label { color: #fff; background-‐color: orange;}
input[type="radio"]:checked + label { color: #fff; background-‐color: orange;}
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
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>
<input type="search" name="search" aria-‐label="Search">
<input type="email" name="email"placeholder="[email protected]">
::-‐webkit-‐input-‐placeholder { color: blue; }::-‐moz-‐placeholder { color: blue; }:-‐ms-‐input-‐placeholder { color: blue; }:-‐moz-‐placeholder { color: blue; }
<input type="text" name="city" required>
<input type="text" name="city" required aria-‐required="true">
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" autocorrect="off">
<input type="text" name="fieldname" autocapitalize="off">
<input type="text" name="fieldname" autocapitalize="off">
autocapitalize="characters"autocapitalize="words"autocapitalize="sentences"
Clarissa Peterson
www.clarissapeterson.com@clarissa
