Skip to content

Commit fcae6d8

Browse files
committed
Add T-shirt order form with validation
1 parent c44123d commit fcae6d8

1 file changed

Lines changed: 56 additions & 4 deletions

File tree

Form-Controls/index.html

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,62 @@ <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+
<!-- Name -->
17+
<div>
18+
<label for="name">Name</label>
19+
<input
20+
id="name"
21+
name="name"
22+
type="text"
23+
required
24+
pattern=".*\S.*\S.*"
25+
>
26+
</div>
27+
28+
<!-- Email -->
29+
<div>
30+
<label for="email">E-mail</label>
31+
<input
32+
id="email"
33+
name="email"
34+
type="email"
35+
required
36+
>
37+
</div>
38+
39+
<!-- Colour -->
40+
<div>
41+
<p>Colour</p>
42+
43+
<label>
44+
<input type="radio" name="colour" value="red" required>
45+
Red
46+
</label>
47+
48+
<label>
49+
<input type="radio" name="colour" value="blue">
50+
Blue
51+
</label>
52+
53+
<label>
54+
<input type="radio" name="colour" value="green">
55+
Green
56+
</label>
57+
</div>
58+
59+
<!-- Size -->
60+
<div>
61+
<label for="size">Size</label>
62+
<select id="size" name="size" required>
63+
<option value="">-- Please choose --</option>
64+
<option>XS</option>
65+
<option>S</option>
66+
<option>M</option>
67+
<option>L</option>
68+
<option>XL</option>
69+
<option>XXL</option>
70+
</select>
71+
</div>
2072
</form>
2173
</main>
2274
<footer>

0 commit comments

Comments
 (0)