Skip to content

Commit aa9ca4d

Browse files
d-odumosud-odumosu
committed
feat: added a main tag to improve accessibility.
1 parent 824240b commit aa9ca4d

1 file changed

Lines changed: 97 additions & 94 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 97 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -17,101 +17,104 @@
1717
<header>
1818
<h1>Product Pick</h1>
1919
</header>
20+
<main>
2021

21-
<form>
22-
<!-- write your HTML here-->
23-
<!--
24-
try writing out the requirements first as comments
25-
this will also help you fill in your PR message later-->
26-
27-
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
28-
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
29-
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
30-
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
31-
32-
33-
<div class="form-group">
34-
<label for="firstname">First Name </label>
35-
<input
36-
type="text"
37-
id="firstname"
38-
name="firstname"
39-
required
40-
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
41-
title="enter a valid name">
42-
</div>
43-
44-
<div class="form-group">
45-
<label for="lastname">Last Name</label>
46-
<input
47-
type="text"
48-
id="lastname"
49-
name="lastname"
50-
required
51-
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
52-
title="enter a valid name">
53-
</div>
54-
55-
<div class="form-group">
56-
<label for="email">Email</label>
57-
<input
58-
type="email"
59-
id="email"
60-
name="email"
61-
required>
62-
63-
</div>
64-
65-
<div class="form-group">
66-
<fieldset>
67-
<legend>Choose a shirt color:</legend>
68-
<div class="form-group-fieldset">
69-
<input
70-
type="radio"
71-
id="choice1"
72-
name="shirt"
73-
value="blue"
74-
required>
75-
<label for="choice1">Blue</label>
76-
</div>
77-
78-
<div class="form-group-fieldset">
79-
<input
80-
type="radio"
81-
id="choice2"
82-
name="shirt"
83-
value="green"
84-
>
85-
<label for="choice2">Green</label>
86-
</div>
87-
88-
<div class="form-group-fieldset">
89-
<input
90-
type="radio"
91-
id="choice3"
92-
name="shirt"
93-
value="yellow"
94-
>
95-
<label for="choice3">Yellow</label>
96-
</div>
97-
</fieldset>
98-
</div>
99-
100-
<div class="form-group">
101-
<label for="sizing">Choose a size:</label>
102-
<select id="sizing" name="size" required>
103-
<option value="">--Please choose an option--</option>
104-
<option value="ex-small">XS</option>
105-
<option value="small">S</option>
106-
<option value="medium">M</option>
107-
<option value="large">L</option>
108-
<option value="ex-large">XL</option>
109-
<option value="ex-ex-large">XXL</option>
110-
111-
</select>
112-
</div>
113-
<button type="submit">Submit</button>
114-
</form>
22+
23+
<form>
24+
<!-- write your HTML here-->
25+
<!--
26+
try writing out the requirements first as comments
27+
this will also help you fill in your PR message later-->
28+
29+
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
30+
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
31+
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
32+
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
33+
34+
35+
<div class="form-group">
36+
<label for="firstname">First Name </label>
37+
<input
38+
type="text"
39+
id="firstname"
40+
name="firstname"
41+
required
42+
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
43+
title="enter a valid name">
44+
</div>
45+
46+
<div class="form-group">
47+
<label for="lastname">Last Name</label>
48+
<input
49+
type="text"
50+
id="lastname"
51+
name="lastname"
52+
required
53+
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
54+
title="enter a valid name">
55+
</div>
56+
57+
<div class="form-group">
58+
<label for="email">Email</label>
59+
<input
60+
type="email"
61+
id="email"
62+
name="email"
63+
required>
64+
65+
</div>
66+
67+
<div class="form-group">
68+
<fieldset>
69+
<legend>Choose a shirt color:</legend>
70+
<div class="form-group-fieldset">
71+
<input
72+
type="radio"
73+
id="choice1"
74+
name="shirt"
75+
value="blue"
76+
required>
77+
<label for="choice1">Blue</label>
78+
</div>
79+
80+
<div class="form-group-fieldset">
81+
<input
82+
type="radio"
83+
id="choice2"
84+
name="shirt"
85+
value="green"
86+
>
87+
<label for="choice2">Green</label>
88+
</div>
89+
90+
<div class="form-group-fieldset">
91+
<input
92+
type="radio"
93+
id="choice3"
94+
name="shirt"
95+
value="yellow"
96+
>
97+
<label for="choice3">Yellow</label>
98+
</div>
99+
</fieldset>
100+
</div>
101+
102+
<div class="form-group">
103+
<label for="sizing">Choose a size:</label>
104+
<select id="sizing" name="size" required>
105+
<option value="">--Please choose an option--</option>
106+
<option value="ex-small">XS</option>
107+
<option value="small">S</option>
108+
<option value="medium">M</option>
109+
<option value="large">L</option>
110+
<option value="ex-large">XL</option>
111+
<option value="ex-ex-large">XXL</option>
112+
113+
</select>
114+
</div>
115+
<button type="submit">Submit</button>
116+
</form>
117+
</main>
115118

116119
<footer>
117120
<!-- change to your name-->

0 commit comments

Comments
 (0)