Skip to content

Commit 1d440bf

Browse files
Jay00-ggJay00-gg
authored
T-shirt Order form controls
1 parent ff7b9d0 commit 1d440bf

1 file changed

Lines changed: 76 additions & 11 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 76 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,85 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
11-
<header>
12-
<h1>Product Pick</h1>
11+
<header>T-shirt Order Form
12+
<h1>T-shirt Order Form</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-->
20-
</form>
21-
</main>
22-
<footer>
16+
<!-- Name -->
17+
<label for="name">Full Name</label>
18+
<input
19+
type="text"
20+
id="name"
21+
required
22+
minlength="2"
23+
>
24+
25+
<!--EMAIL ADDRESS" -->
26+
<label for="email">Email Address</label>
27+
<input
28+
type="email"
29+
id="email"
30+
name="email"
31+
required
32+
>
33+
34+
<!-- COLOUR -->
35+
<p>Choose a colour:</p>
36+
37+
<label>
38+
<input type="radio" name="colour" value="pink" required>
39+
Pink
40+
</label>
41+
42+
<label>
43+
<input type="radio" name="colour" value="black" required>
44+
Black
45+
</label>
46+
47+
<label>
48+
<input type="radio" name="colour" value="blue" required>
49+
Blue
50+
</label>
51+
52+
<!-- SIZE -->
53+
<label for="size">SIZE</label>
54+
<select id="size" name="size" required>
55+
<option value="">-- Select Size --</option>
56+
<option value="XS">XS</option>
57+
<option value="S">S</option>
58+
<option value="M">M</option>
59+
<option value="L">L</option>
60+
<option value="XL">XL</option>
61+
<option value="XXL">XXL</option>
62+
</select>
63+
64+
<!--
65+
FORM REQUIREMENTS:
66+
1. Collect customer's full name
67+
- Must be at least 2 characters long
68+
- Cannot be empty
69+
70+
2. Collect customer's email
71+
- Must be a valid email format
72+
- Field is required
73+
74+
3. Choose T-shirt colour
75+
- Must select ONE option only
76+
- Only 3 allowed options provided
77+
- Cannot enter custom colours
78+
79+
4. Choose T-shirt size
80+
- Must select ONE option
81+
- Options: XS, S, M, L, XL, XXL
82+
- Field is required
83+
84+
5. All fields are required before submission
85+
86+
6. No JavaScript allowed... only HTML form validation
87+
-->
2388
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
89+
<p>By Juanita Nwachukwu</p>
2590
</footer>
2691
</body>
27-
</html>
92+
</html>

0 commit comments

Comments
 (0)