![Page 1: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/1.jpg)
@clarissaCreating Beautiful, Accessible,
and User-Friendly
Forms
![Page 2: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/2.jpg)
![Page 3: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/3.jpg)
![Page 4: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/4.jpg)
![Page 5: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/5.jpg)
![Page 6: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/6.jpg)
![Page 7: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/7.jpg)
![Page 8: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/8.jpg)
![Page 9: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/9.jpg)
![Page 10: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/10.jpg)
![Page 11: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/11.jpg)
![Page 12: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/12.jpg)
![Page 13: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/13.jpg)
![Page 14: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/14.jpg)
![Page 15: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/15.jpg)
<input type="text" name="fullname">
Text
![Page 16: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/16.jpg)
<input type="date" name="birthday">
Date
![Page 17: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/17.jpg)
<input type="date" name="birthday">
Date
![Page 18: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/18.jpg)
<input type="date" name="birthday">
Date
![Page 19: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/19.jpg)
<input type="date" name="birthday">
Date
![Page 20: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/20.jpg)
![Page 21: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/21.jpg)
![Page 22: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/22.jpg)
Month<input type="month" name="month">
![Page 23: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/23.jpg)
Month<input type="month" name="month">
![Page 24: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/24.jpg)
Month<input type="month" name="month">
![Page 25: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/25.jpg)
<input type="time" name="start-‐time">
Time
![Page 26: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/26.jpg)
<input type="time" name="start-‐time">
Time
![Page 27: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/27.jpg)
<input type="time" name="start-‐time">
Time
![Page 28: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/28.jpg)
<input type="time" name="start-‐time">
Time
![Page 29: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/29.jpg)
<input type="email" name="email">
![Page 30: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/30.jpg)
<input type="email" name="email">
![Page 31: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/31.jpg)
<input type="email" name="email">
![Page 32: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/32.jpg)
<input type="email" name="email">
![Page 33: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/33.jpg)
<input type="url" name="website">
URL
![Page 34: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/34.jpg)
<input type="url" name="website">
URL
![Page 35: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/35.jpg)
<input type="tel" name="phone">
Telephone
![Page 36: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/36.jpg)
<input type="tel" name="phone">
Telephone
![Page 37: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/37.jpg)
![Page 38: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/38.jpg)
<input type="number" name="amount">
Number
![Page 39: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/39.jpg)
<input type="number" name="amount">
Number
![Page 40: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/40.jpg)
![Page 41: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/41.jpg)
![Page 42: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/42.jpg)
![Page 43: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/43.jpg)
![Page 44: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/44.jpg)
![Page 45: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/45.jpg)
<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>
![Page 46: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/46.jpg)
label { background-‐color: #ffa; padding: 3px 6px; border-‐radius: 4px; }
![Page 47: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/47.jpg)
input[type="radio"] { opacity:0; z-‐index:100;}
![Page 48: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/48.jpg)
label { margin-‐left: -‐17px;}
![Page 49: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/49.jpg)
input[type="radio"]:checked + label { color: #fff; background-‐color: orange;}
![Page 50: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/50.jpg)
input[type="radio"]:checked + label { color: #fff; background-‐color: orange;}
![Page 51: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/51.jpg)
input[type="radio"]:checked + label { color: #fff; background-‐color: orange;}
![Page 52: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/52.jpg)
![Page 53: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/53.jpg)
![Page 54: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/54.jpg)
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
![Page 55: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/55.jpg)
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
![Page 56: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/56.jpg)
![Page 57: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/57.jpg)
![Page 58: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/58.jpg)
<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>
![Page 59: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/59.jpg)
![Page 60: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/60.jpg)
<label for="firstname"> First name</label>
<input type="text" name="fname" id="firstname">
![Page 61: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/61.jpg)
<label> First name: <input type="text" name="fname"></label>
![Page 62: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/62.jpg)
<label for="firstname"> First name: <input type="text" name="fname" id="firstname"></label>
![Page 63: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/63.jpg)
<input type="search" name="search" aria-‐label="Search">
![Page 64: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/64.jpg)
![Page 65: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/65.jpg)
<input type="email" name="email"placeholder="[email protected]">
![Page 66: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/66.jpg)
![Page 67: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/67.jpg)
![Page 68: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/68.jpg)
![Page 69: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/69.jpg)
![Page 70: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/70.jpg)
![Page 71: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/71.jpg)
![Page 72: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/72.jpg)
![Page 73: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/73.jpg)
![Page 74: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/74.jpg)
![Page 75: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/75.jpg)
![Page 76: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/76.jpg)
::-‐webkit-‐input-‐placeholder { color: blue; }::-‐moz-‐placeholder { color: blue; }:-‐ms-‐input-‐placeholder { color: blue; }:-‐moz-‐placeholder { color: blue; }
![Page 77: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/77.jpg)
<input type="text" name="city" required>
![Page 78: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/78.jpg)
<input type="text" name="city" required aria-‐required="true">
![Page 79: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/79.jpg)
![Page 80: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/80.jpg)
![Page 81: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/81.jpg)
![Page 82: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/82.jpg)
![Page 83: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/83.jpg)
![Page 84: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/84.jpg)
![Page 85: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/85.jpg)
![Page 86: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/86.jpg)
![Page 87: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/87.jpg)
![Page 88: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/88.jpg)
![Page 89: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/89.jpg)
![Page 90: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/90.jpg)
![Page 91: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/91.jpg)
input[required] { ... }
or
input:required { ... }
![Page 92: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/92.jpg)
input:optional { ... }
![Page 93: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/93.jpg)
![Page 94: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/94.jpg)
![Page 95: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/95.jpg)
![Page 96: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/96.jpg)
![Page 97: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/97.jpg)
![Page 98: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/98.jpg)
![Page 99: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/99.jpg)
![Page 100: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/100.jpg)
![Page 101: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/101.jpg)
![Page 102: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/102.jpg)
![Page 103: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/103.jpg)
![Page 104: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/104.jpg)
![Page 105: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/105.jpg)
![Page 106: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/106.jpg)
![Page 107: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/107.jpg)
![Page 108: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/108.jpg)
![Page 109: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/109.jpg)
![Page 110: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/110.jpg)
![Page 111: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/111.jpg)
![Page 112: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/112.jpg)
![Page 113: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/113.jpg)
![Page 114: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/114.jpg)
![Page 115: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/115.jpg)
![Page 116: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/116.jpg)
![Page 117: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/117.jpg)
![Page 118: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/118.jpg)
![Page 119: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/119.jpg)
![Page 120: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/120.jpg)
![Page 121: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/121.jpg)
![Page 122: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/122.jpg)
aria-‐live="polite"
aria-‐live="assertive"
![Page 123: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/123.jpg)
![Page 124: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/124.jpg)
![Page 125: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/125.jpg)
<input type="number" name="number" min="1" max="100">
input:valid { border: 3px solid green; }input:invalid { border: 3px dotted red; }
![Page 126: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/126.jpg)
<input type="text" name="fieldname" autocorrect="off">
![Page 127: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/127.jpg)
<input type="text" name="fieldname" autocapitalize="off">
![Page 128: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/128.jpg)
<input type="text" name="fieldname" autocapitalize="off">
autocapitalize="characters"autocapitalize="words"autocapitalize="sentences"
![Page 129: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/129.jpg)
![Page 130: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/130.jpg)
![Page 131: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/131.jpg)
![Page 132: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/132.jpg)
![Page 133: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/133.jpg)
![Page 134: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/134.jpg)
![Page 135: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/135.jpg)
![Page 136: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/136.jpg)
![Page 137: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/137.jpg)
![Page 138: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/138.jpg)
![Page 139: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/139.jpg)
![Page 140: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/140.jpg)
![Page 141: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/141.jpg)
![Page 142: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/142.jpg)
![Page 143: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/143.jpg)
![Page 144: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/144.jpg)
![Page 145: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/145.jpg)
![Page 146: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/146.jpg)
![Page 147: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/147.jpg)
![Page 148: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/148.jpg)
![Page 149: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/149.jpg)
![Page 150: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/150.jpg)
![Page 151: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/151.jpg)
![Page 152: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/152.jpg)
![Page 153: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/153.jpg)
![Page 154: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/154.jpg)
![Page 155: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/155.jpg)
![Page 156: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/156.jpg)
![Page 157: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/157.jpg)
![Page 158: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/158.jpg)
![Page 159: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/159.jpg)
![Page 160: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/160.jpg)
![Page 161: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/161.jpg)
![Page 162: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/162.jpg)
![Page 163: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/163.jpg)
![Page 164: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/164.jpg)
![Page 165: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/165.jpg)
![Page 166: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/166.jpg)
![Page 167: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/167.jpg)
![Page 168: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/168.jpg)
![Page 169: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/169.jpg)
![Page 170: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/170.jpg)
![Page 171: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/171.jpg)
![Page 172: Creating Beautiful, Accessible, and User-Friendly Forms](https://reader038.vdocuments.site/reader038/viewer/2022103010/58f9aa20760da3da068b75cc/html5/thumbnails/172.jpg)
Clarissa Peterson
www.clarissapeterson.com@clarissa