Forms

1. Select Drop-Down Field <select></select>
2. Date Picker <input type="date">
3. Date-Time Local Picker <input type="date">
4. Date-Time Fallback Picker <input type="date">
5. Editable Form Fields <textarea></textarea> <input type="text"> <input type="reset">
6. Complete File Field <input type="file" accept=".jpg, .jpeg, .png" multiple>
7. File Field w/ Accepted File Extensions <input type="file" accept=".jpg, .jpeg, .png">
8. File Field w/ Selecting Multiple Files <input type="file" multiple>
9. Text Field <input type="text">
10. Form Validation w/ Required <input type="text" required>
11. Form Validation w/ Length <input type="text" required minlength="6" maxlength="6"> <input type="number" value="1" min="1" max="10">
12. Form Validation w/ Pattern <input type="text" required pattern="banana|cherry">
13. Form Validation w/ Min/Max, Length, and Pattern <input type="number" pattern="\d+" min="12" max="120"> <textarea rows="5" maxlength="10"></textarea>
14. Hidden Input <input type="hidden" value="34657">
15. Checkbox Inputs and Labels <label for="…"></label> <input type="checkbox">
16. Fieldset and Legend <fieldset> <legend>
17. Complete Form for Custom User Registration <input type="radio"> <input type="text"> <input type="email"> <input type="password"> <select> <button type="submit">
18. Image as Form Button <input type="image" src="login.png" alt="login button">
19. Image as Form Button w/ X, Y Coordinates <input id="image" type="image" src="colors.png" alt="image of four colored squares">
20. Form Wizard w/ Events and Callbacks <input id="checkbox" checked onclick="…"> <label for="…">
21. Form Validation for Months <input type="month" min="2017-06" max="2017-09" required> <input type="submit"> input:valid input:invalid
22. Single-Line Text Fields <input type="text" value="I'm a text field"> <input type="email" multiple> <input type="password"> <input type="search"> <input type="tel"> <input type="url">
23. Multiple-Line Text Fields <textarea cols="30" rows="10">
24. Checkable Fields <input type="checkbox"> <input type="radio">
25. Drop-Down Select Fields <select><option>…</option></select> <select><optgroup><option selected>…</option></optggroup></select> <select multiple><option>…</option></select> <input type="text" list="mySuggestion">
<datalist id="mySuggestion">
  <option>…</option>
</datalist> <label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
<datalist id="fruitList">
  <label for="suggestion">or pick a fruit</label>
  <select id="suggestion"><option>…</option></select>
</datalist>
26. Buttons <button type="submit">…<button> <input type="submit" value="This is a submit button"> <button type="reset">…<button> <input type="reset" value="This is a reset button"> <button type="button">…<button> <input type="button" value="This is an anonymous button">
27. Other Form Fields <input type="file" accept="image/*" multiple> <input type="hidden" name="timestamp" value="1286705410"> <input type="image" name="pos" alt="" src="map.png"> <input type="reset" value="This is a reset button"> <progress max="100" value="75">75/100</progress> <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
28. Advanced Form Fields <input type="number" name="age" id="age" min="1" max="10" step="2"> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"> <input type="datetime-local" name="meet" id="meet"> <input type="month" name="month" id="month"> <input type="time" name="time" id="time"> <input type="color" name="color" id="color">
29. Number Fields w/ Various Form Validation <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> <input id="feet" type="number" name="feet" min="0" step="1"> <input id="inches" type="number" name="inches" min="0" max="11" step="1"> <input type="button" class="meters" value="Enter height in feet and inches"> <input type="submit" value="Submit form">
30. Drop-Down Select Fields w/ Selecting Multiple and Disabled Options <select id="pet-select" name="pet" multiple size="4">  <option value="none" selected>-- Please choose one or more --</option>  <optgroup label="4-legged pets">   <option value="dog">Dog</option>   <option value="cat">Cat</option>   <option value="hamster" disabled>Hamster</option>  </optgroup>  <optgroup label="Flying pets">   <option value="parrot">Parrot</option>   <option value="macaw">Macaw</option>   <option value="albatross">Albatross</option>  </optgroup> </select>
31. Submitting Form w/ GET Method <form action="http://foo.com" method="get">…<form>
32. Submitting Form w/ POST Method <form action="http://foo.com" method="post">…<form>
33. Telephone Fields w/ Patterns and Validation <input id="areaNo" name="areaNo" type="tel" required placeholder="Area code" pattern="[0-9]{3}" aria-label="Area code"> <input id="number1" name="number1" type="tel" required placeholder="First part" pattern="[0-9]{3}" aria-label="First part of number"> <input id="number2" name="number2" type="tel" required placeholder="Second part" pattern="[0-9]{4}" aria-label="Second part of number"> <select name="country"><option>…</option>…<option selected>…</option></select> input:valid input:invalid
34. Text (Username) Field w/ Pattern and Validation <input type="text" id="uname" name="name" required placeholder="Usernames must be lowercase and 4-8 characters in length" pattern="[a-z]{4,8}"> <button></button> input:valid input:invalid
35. Time Field w/ Pattern and Validation <input type="time" name="appt-time" min="12:00" max="18:00" required> <input type="submit" value="Submit form"> input:valid input:invalid
36. URL Field w/ Pattern and Validation <input type="url" required pattern=".*\.myco\..*" title="URL should be in a myco domain"> <input type="text" name="myComment" required> <button></button> input:valid input:invalid
37. Week Field w/ Min/Max and Validation <input type="week" name="week" min="2017-W01" max="2017-W52" required> <input type="submit" value="Submit form"> input:valid input:invalid
38. Editable Fields <div contenteditable></div> <input> <input type="text"> <textarea></textarea> <input type="button"> <input type="reset"> <input type="submit">
39. Select Drop-Down Field w/ many options <select>   <option></option> </select>
40. autofocus on <input> field <input type="text" autofocus>
41. Drop-Down <select> and <datalist> fields