Skip to content

Commit dcbf280

Browse files
authored
Added name, email inputs; added three colour options and six size options; added submit button.
1. added name input with validation 2. added email input validation 3: added colour fieldset with three required options 4: added size fieldset with six required options 5: added submit button 6: added my name at the footer section
1 parent 425d7dc commit dcbf280

1 file changed

Lines changed: 76 additions & 5 deletions

File tree

Form-Controls/index.html

Lines changed: 76 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,86 @@ <h1>Product Pick</h1>
1313
</header>
1414
<main>
1515
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
16+
<!--
17+
- Collect customer's validated full name
18+
- Collect customer's validated email address
19+
- Choose 1 of 3 colours
20+
- Choose 1 of 6 sizes
21+
- All fields required
22+
- Semantic HTML only
23+
-->
24+
25+
26+
<!--Customer Name -->
27+
<label for="name">Full Name</label>
28+
<input
29+
type="text"
30+
id="name"
31+
name="name"
32+
minlength="2"
33+
required
34+
>
35+
36+
<!-- Customer Email -->
37+
<label for ="email">Email Address</label>
38+
<input
39+
type="email"
40+
id="email"
41+
name="email"
42+
required
43+
>
44+
45+
<!-- Shirt Colour -->
46+
<fieldset>
47+
<legend>Choose a Colour</legend>
48+
49+
<label>
50+
<input
51+
type="radio"
52+
name="colour"
53+
value="red"
54+
required>
55+
Red
56+
</label>
57+
58+
<label>
59+
<input
60+
type="radio"
61+
name="colour"
62+
value="blue"
63+
required>
64+
Blue
65+
</label>
66+
67+
<label>
68+
<input
69+
type="radio"
70+
name="colour"
71+
value="green"
72+
required>
73+
Green
74+
</label>
75+
</fieldset>
76+
77+
<!-- Shirt Size -->
78+
<fieldset>
79+
<legend>Choose a Size</legend>
80+
81+
<label><input type="radio" name="size" value="XS" required> XS</label>
82+
<label><input type="radio" name="size" value="S" required> S</label>
83+
<label><input type="radio" name="size" value="M" required> M</label>
84+
<label><input type="radio" name="size" value="L" required> L</label>
85+
<label><input type="radio" name="size" value="XL" required> XL</label>
86+
<label><input type="radio" name="size" value="XXL" required> XXL</label>
87+
</fieldset>
88+
89+
<!-- Submit Button -->
90+
<button type="submit">Submit</button>
2091
</form>
2192
</main>
2293
<footer>
2394
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
95+
<h2>By Khaliun Baatarkhuu </h2>
2596
</footer>
2697
</body>
2798
</html>

0 commit comments

Comments
 (0)