Skip to content

Commit 058595e

Browse files
Jay00-ggJay00-gg
authored
corrected-form-controls-juanita
1 parent 0c6947f commit 058595e

1 file changed

Lines changed: 96 additions & 58 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 96 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,111 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
910
</head>
1011
<body>
11-
<header>T-shirt Order Form
12-
<h1>T-shirt Order Form</h1>
13-
</header>
14-
<main>
15-
<form>
16-
<!-- Name -->
17-
<label for="name">Full Name</label>
18-
<input
19-
type="text"
20-
id="name"
21-
required
22-
minlength="5"
23-
>
12+
<!--
13+
FORM REQUIREMENTS:
14+
1. Collect customer's full name
15+
- Must be at least 2 characters long
16+
- Cannot be empty
2417
25-
<!--EMAIL ADDRESS" -->
26-
<label for="email">Email Address</label>
27-
<input
28-
type="email"
29-
id="email"
30-
name="email"
31-
required
32-
>
18+
2. Collect customer's email
19+
- Must be a valid email format
20+
- Field is required
21+
22+
3. Choose T-shirt colour
23+
- Must select ONE option only
24+
- Only 3 allowed options provided
25+
- Cannot enter custom colours
26+
27+
4. Choose T-shirt size
28+
- Must select ONE option
29+
- Options: XS, S, M, L, XL, XXL
30+
- Field is required
31+
32+
5. All fields required before submission
33+
34+
6. No JavaScript allowed... only HTML form validation
35+
-->
36+
<header>
37+
<h1>T-Shirt Order Form</h1>
38+
</header>
39+
40+
<main>
41+
<form>
3342

34-
<!-- COLOUR -->
35-
<p>Choose a colour:</p>
43+
<!-- Name -->
44+
<label for="name">Full Name</label>
45+
<input
46+
type="text"
47+
id="name"
48+
name="name"
49+
placeholder="Enter your full name"
50+
required
51+
minlength="2"
52+
pattern=".*\S.*\S.*"
53+
>
54+
55+
<!-- Email -->
56+
<label for="email">Email Address</label>
57+
<input
58+
type="email"
59+
id="email"
60+
name="email"
61+
placeholder="you@example.com"
62+
required
63+
>
64+
65+
<!-- Colour Selection -->
66+
<fieldset>
67+
<legend>Choose a colour</legend>
3668

3769
<label>
38-
<input type="radio" name="colour" value="pink" required>
70+
<input
71+
type="radio"
72+
name="colour"
73+
value="pink"
74+
required
75+
>
3976
Pink
4077
</label>
4178

4279
<label>
43-
<input type="radio" name="colour" value="black" required>
80+
<input
81+
type="radio"
82+
name="colour"
83+
value="black"
84+
>
4485
Black
4586
</label>
4687

4788
<label>
48-
<input type="radio" name="colour" value="blue" required>
89+
<input
90+
type="radio"
91+
name="colour"
92+
value="blue"
93+
>
4994
Blue
5095
</label>
96+
</fieldset>
97+
98+
<!-- Size Selection -->
99+
<fieldset>
100+
<legend>Select a size</legend>
51101

52-
<!-- SIZE -->
53-
<label for="size">SIZE</label>
54-
<select id="size" name="size" required>
102+
<label for="size">Size</label>
103+
104+
<select
105+
id="size"
106+
name="size"
107+
required
108+
>
55109
<option value="">-- Select Size --</option>
56110
<option value="XS">XS</option>
57111
<option value="S">S</option>
@@ -60,33 +114,17 @@ <h1>T-shirt Order Form</h1>
60114
<option value="XL">XL</option>
61115
<option value="XXL">XXL</option>
62116
</select>
117+
</fieldset>
63118

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
119+
<!-- Submit Button -->
120+
<button type="submit">Submit Order</button>
78121

79-
4. Choose T-shirt size
80-
- Must select ONE option
81-
- Options: XS, S, M, L, XL, XXL
82-
- Field is required
122+
</form>
123+
</main>
83124

84-
5. All fields are required before submission
125+
<footer>
126+
<p>By Juanita Nwachukwu</p>
127+
</footer>
85128

86-
6. No JavaScript allowed... only HTML form validation
87-
-->
88-
<!-- change to your name-->
89-
<p>By Juanita Nwachukwu</p>
90-
</footer>
91-
</body>
129+
</body>
92130
</html>

0 commit comments

Comments
 (0)