Skip to content

Commit 2ba6397

Browse files
Zadri415Zadri415
committed
Finalise form markup and validation
1 parent c6b59c1 commit 2ba6397

1 file changed

Lines changed: 42 additions & 46 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
99
</head>
1010
<body>
1111
<header>
@@ -14,64 +14,60 @@ <h1>Product Pick</h1>
1414

1515
<main>
1616
<form>
17-
<!-- REQUIREMENTS -->
18-
<!-- what is the customer's name? (min 2 characters) -->
19-
<div>
20-
<label for="name">Full Name:</label><br />
21-
<input type="text" id="name" name="name" required mainlength="2" autocomplete="name" /><br /><br />
22-
</div>
17+
<!-- Customer's name -->
18+
<div>
19+
<label for="name">Full Name:</label><br>
20+
<input type="text" id="name" name="name" required minlength="2" autocomplete="name"><br>
21+
</div>
2322

24-
<!-- What is the customer's email? (must be valid) -->
25-
<div>
26-
<label for="email">Email Address:</label><br />
27-
<input type="email" id="email" name="email" required autocomplete="email" /><br /><br />
28-
</div>
23+
<!-- Email -->
24+
<div>
25+
<label for="email">Email Address:</label><br>
26+
<input type="email" id="email" name="email" required autocomplete="email"><br><br>
27+
</div>
2928

30-
<!-- What colour should this t-shirt be? (only 3 options) -->
29+
<!-- T-shirt Color -->
3130
<fieldset>
32-
<legend>Choose a T-shirt Color:</legend>
33-
31+
<legend>Choose a T-shirt Color:</legend>
3432
<div>
35-
<input type="radio" id="red" name="color" value="red" />
33+
<input type="radio" id="red" name="color" value="red">
3634
<label for="red">Red</label>
37-
</div><br />
38-
35+
</div><br>
3936
<div>
40-
<input type="radio" id="blue" name="color" value="blue" />
37+
<input type="radio" id="blue" name="color" value="blue">
4138
<label for="blue">Blue</label>
42-
</div><br />
43-
39+
</div><br>
4440
<div>
45-
<input type="radio" id="green" name="color" value="green" />
41+
<input type="radio" id="green" name="color" value="green">
4642
<label for="green">Green</label>
47-
</div><br />
48-
</fieldset><br />
43+
</div><br><br>
44+
</fieldset>
4945

50-
<!-- T-shirt Size -->
51-
<div>
52-
<label for="size">Select Size:</label>
53-
<select id="size" name="size" required>
54-
<option value="">--Select a Size--</option>
55-
<option value="XS">XS</option>
56-
<option value="S">S</option>
57-
<option value="M">M</option>
58-
<option value="L">L</option>
59-
<option value="XL">XL</option>
60-
<option value="XXL">XXL</option>
61-
</select><br /><br />
62-
</div>
46+
<!-- Size -->
47+
<div>
48+
<label for="size">Select Size:</label>
49+
<select id="size" name="size" required>
50+
<option value="">--Select a Size--</option>
51+
<option value="XS">XS</option>
52+
<option value="S">S</option>
53+
<option value="M">M</option>
54+
<option value="L">L</option>
55+
<option value="XL">XL</option>
56+
<option value="XXL">XXL</option>
57+
</select><br><br>
58+
</div>
6359

64-
<!-- Submit button (optional for testing)-->
65-
<div>
66-
<button type="submit">Submit</button>
67-
</div>
60+
<!-- Submit -->
61+
<div>
62+
<button type="submit">Submit</button>
63+
</div>
6864
</form>
6965
</main>
7066

71-
7267
<footer>
73-
7468
<h2>By Zadri Abdule</h2>
7569
</footer>
7670
</body>
7771
</html>
72+
73+

0 commit comments

Comments
 (0)