Skip to content

Commit c6e47a7

Browse files
bytesandrosesbytesandroses
committed
Refactor: update color and size pickers from ordered list
1 parent 30eade7 commit c6e47a7

1 file changed

Lines changed: 66 additions & 86 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 66 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,6 @@ <h1>Product Pick</h1>
1515
</header>
1616
<main>
1717
<form>
18-
<!--
19-
I have used HTML only.
20-
I have not used any CSS or JavaScript.
21-
My form is semantic html.
22-
All inputs have associated labels.
23-
My Lighthouse Accessibility score is 100.
24-
I require a valid name. I have defined a valid name as a text string of two characters or more.
25-
I require a valid email.
26-
I require one colour from a defined set of 3 colours.
27-
I require one size from a defined set of 6 sizes.
28-
-->
2918

3019
<h2>Contact details</h2>
3120
<p>
@@ -41,87 +30,78 @@ <h2>Contact details</h2>
4130
<h2>T-shirt details</h2>
4231
<fieldset>
4332
<legend>Color:</legend>
44-
<ul>
45-
<li>
46-
<label for="color_1">
47-
<input type="radio" id="color_1" name="color" value="red" />
48-
Red
49-
</label>
50-
<br></br>
51-
</li>
52-
53-
<li>
54-
<label for="color_2">
55-
<input type="radio" id="color_2" name="color" value="white" />
56-
White
57-
</label>
58-
<br></br>
59-
</li>
60-
61-
<li>
62-
<label for="color_3">
63-
<input type="radio" id="color_3" name="color" value="blue" />
64-
Blue
65-
</label>
66-
<br></br>
67-
</li>
68-
</ul>
33+
<p>
34+
<label for="color_1">
35+
<input type="radio" id="color_1" name="color" value="red" required />
36+
Red
37+
</label>
38+
</p>
39+
40+
<p>
41+
<label for="color_2">
42+
<input type="radio" id="color_2" name="color" value="white" required />
43+
White
44+
</label>
45+
</p>
46+
47+
<p>
48+
<label for="color_3">
49+
<input type="radio" id="color_3" name="color" value="blue" required />
50+
Blue
51+
</label>
52+
</p>
6953
</fieldset>
7054

55+
<p></p>
56+
7157
<fieldset>
7258
<legend>Size:</legend>
73-
<ul>
74-
<li>
75-
<label for="size_1">
76-
<input type="radio" id="size_1" name="size" value="XS" />
77-
XS
78-
</label>
79-
<br></br>
80-
</li>
81-
82-
<li>
83-
<label for="size_2">
84-
<input type="radio" id="size_2" name="size" value="S" />
85-
S
86-
</label>
87-
<br></br>
88-
</li>
89-
90-
<li>
91-
<label for="size_3">
92-
<input type="radio" id="size_3" name="size" value="M" />
93-
M
94-
</label>
95-
<br></br>
96-
</li>
97-
98-
<li>
99-
<label for="size_4">
100-
<input type="radio" id="size_4" name="size" value="L" />
101-
L
102-
</label>
103-
<br></br>
104-
</li>
105-
106-
<li>
107-
<label for="size_5">
108-
<input type="radio" id="size_5" name="size" value="XL" />
109-
XL
110-
</label>
111-
<br></br>
112-
</li>
113-
114-
<li>
115-
<label for="size_6">
116-
<input type="radio" id="size_6" name="size" value="XXL" />
117-
XXL
118-
</label>
119-
<br></br>
120-
</li>
121-
</ul>
122-
</fieldset>
12359

60+
<p>
61+
<label for="size_1">
62+
<input type="radio" id="size_1" name="size" value="XS" required />
63+
XS
64+
</label>
65+
</p>
66+
67+
<p>
68+
<label for="size_2">
69+
<input type="radio" id="size_2" name="size" value="S" required />
70+
S
71+
</label>
72+
</p>
73+
74+
<p>
75+
<label for="size_3">
76+
<input type="radio" id="size_3" name="size" value="M" required />
77+
M
78+
</label>
79+
</p>
80+
81+
<p>
82+
<label for="size_4">
83+
<input type="radio" id="size_4" name="size" value="L" required />
84+
L
85+
</label>
86+
</p>
87+
88+
<p>
89+
<label for="size_5">
90+
<input type="radio" id="size_5" name="size" value="XL" required />
91+
XL
92+
</label>
93+
</p>
94+
95+
<p>
96+
<label for="size_6">
97+
<input type="radio" id="size_6" name="size" value="XXL" required />
98+
XXL
99+
</label>
100+
</p>
124101

102+
</fieldset>
103+
<p></p>
104+
<button type="submit">Submit</button>
125105
</form>
126106
</main>
127107
<footer>

0 commit comments

Comments
 (0)