Skip to content

Commit edd78f3

Browse files
MacDonald91MacDonald91
committed
Refactor form to meet task requirements: add email field, improve name validation, remove form action, correct select options, and fix semantic structure
1 parent dd37262 commit edd78f3

1 file changed

Lines changed: 30 additions & 12 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,58 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8">
65
<title>Product Pick</title>
7-
<link rel="stylesheet" href="style.css" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
88
</head>
99

1010
<body>
11-
<main>
11+
<header>
1212
<h1>Product Pick</h1>
13+
</header>
1314

15+
<main>
1416
<form>
1517
<fieldset>
1618
<legend>Choose your T-shirt</legend>
1719

20+
<!-- Name -->
1821
<label for="name">Name:</label>
19-
<input type="text" id="name" name="name" minlength="2" required />
22+
<input
23+
type="text"
24+
id="name"
25+
name="name"
26+
minlength="2"
27+
required
28+
>
2029

30+
<!-- Email -->
2131
<label for="email">Email:</label>
22-
<input type="email" id="email" name="email" required />
32+
<input
33+
type="email"
34+
id="email"
35+
name="email"
36+
required
37+
>
2338

39+
<!-- Colour -->
2440
<label for="colour">Colour:</label>
2541
<select id="colour" name="colour" required>
26-
<option value="">Select a colour</option>
42+
<option value="" disabled selected>Select a colour</option>
2743
<option value="Black">Black</option>
2844
<option value="White">White</option>
2945
<option value="Blue">Blue</option>
3046
</select>
3147

48+
<!-- Size -->
3249
<label for="size">Size:</label>
3350
<select id="size" name="size" required>
34-
<option value="">Select a size</option>
35-
<option value="Small">Small</option>
36-
<option value="Medium">Medium</option>
37-
<option value="Large">Large</option>
51+
<option value="" disabled selected>Select a size</option>
52+
<option value="XS">XS</option>
53+
<option value="S">S</option>
54+
<option value="M">M</option>
55+
<option value="L">L</option>
3856
<option value="XL">XL</option>
3957
<option value="XXL">XXL</option>
4058
</select>
@@ -45,7 +63,7 @@ <h1>Product Pick</h1>
4563
</main>
4664

4765
<footer>
48-
<h2>By Alasdair MacDonald</h2>
66+
<p>By Alasdair MacDonald</p>
4967
</footer>
5068
</body>
5169
</html>

0 commit comments

Comments
 (0)