|
9 | 9 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
10 | 10 | </head> |
11 | 11 | <body> |
12 | | - <header>Product Pick</header> |
| 12 | + <header> |
| 13 | + <h1>Product Pick</h1> |
| 14 | + </header> |
13 | 15 | <main> |
14 | 16 | <form> |
15 | 17 | <fieldset> |
|
19 | 21 | type="text" |
20 | 22 | id="name" |
21 | 23 | name="name" |
| 24 | + autocomplete="name" |
22 | 25 | pattern="^\s*(\S\s*){2,}$" |
23 | 26 | required |
24 | 27 | title="Please enter at least 2 characters" |
25 | 28 | /> |
26 | 29 | <label for="email">Email:</label> |
27 | | - <input type="email" id="email" name="email" required /> |
| 30 | + <input |
| 31 | + type="email" |
| 32 | + id="email" |
| 33 | + name="email" |
| 34 | + autocomplete="email" |
| 35 | + required |
| 36 | + /> |
28 | 37 | </fieldset> |
29 | 38 |
|
30 | 39 | <fieldset> |
|
33 | 42 | <input type="radio" id="black" name="color" value="Black" required /> |
34 | 43 | <label for="black">Black</label> |
35 | 44 |
|
36 | | - <input type="radio" id="beige" name="color" value="Beige" required /> |
| 45 | + <input type="radio" id="beige" name="color" value="Beige" /> |
37 | 46 | <label for="beige">Beige</label> |
38 | 47 |
|
39 | | - <input type="radio" id="red" name="color" value="Red" required /> |
| 48 | + <input type="radio" id="red" name="color" value="Red" /> |
40 | 49 |
|
41 | 50 | <label for="red">Red</label> |
42 | 51 | </fieldset> |
|
46 | 55 |
|
47 | 56 | <label for="size">Choose a size:</label> |
48 | 57 | <select name="size" id="size" required> |
49 | | - <option value="">-- Please choose an option --</option> |
50 | | - <option value="xs">Extra Small</option> |
| 58 | + <option value="" disabled selected> |
| 59 | + -- Please choose an option -- |
| 60 | + </option> |
| 61 | + <option value="extra-small">Extra Small</option> |
51 | 62 | <option value="small">Small</option> |
52 | 63 | <option value="medium">Medium</option> |
53 | 64 | <option value="large">Large</option> |
54 | | - <option value="xl">Extra Large</option> |
55 | | - <option value="xxl">XXL</option> |
| 65 | + <option value="extra-large">Extra Large</option> |
| 66 | + <option value="double-extra-large">XXL</option> |
56 | 67 | </select> |
57 | 68 | </fieldset> |
58 | 69 |
|
59 | 70 | <input type="submit" value="Submit" /> |
60 | 71 | </form> |
61 | 72 | </main> |
62 | | - <footer>From control by Mandip sanger</footer> |
| 73 | + <footer>Product Pick Form</footer> |
63 | 74 | </body> |
64 | 75 | </html> |
0 commit comments