Skip to content

Commit d56e0ea

Browse files
codebyracodebyra
committed
chore: fix HTML to pass W3C validation
1 parent 1c697fc commit d56e0ea

1 file changed

Lines changed: 37 additions & 43 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
@@ -14,60 +14,54 @@ <h1>Product Pick</h1>
1414
</header>
1515
<main>
1616
<form>
17-
<!-- REQUIREMENTS:
17+
<!-- REQUIREMENTS:
1818
1. Collect customer's name (minimum 2 non‑space characters)
1919
2. Collect customer's email (must be a valid email format)
2020
3. Provide exactly 3 colour options
2121
4. Provide exactly 6 size options
2222
5. All fields must be required
2323
6. No JavaScript allowed
2424
-->
25-
<fieldset>
26-
<legend>Customer Details</legend>
25+
<fieldset>
26+
<legend>Customer Details</legend>
2727

28-
<label for="name">Full Name</label>
29-
<input
30-
type="text"
31-
id="name"
32-
name="name"
33-
required
34-
pattern=".*\S.*\S.*"
35-
/>
36-
37-
<label for="email">Email Address</label>
38-
<input
39-
type="email"
40-
id="email"
41-
name="email"
42-
required
43-
/>
44-
</fieldset>
28+
<label for="name">Full Name</label>
29+
<input
30+
type="text"
31+
id="name"
32+
name="name"
33+
required
34+
pattern=".*\S.*\S.*"
35+
/>
4536

46-
<fieldset>
47-
<legend>T-Shirt Options</legend>
48-
<label for="colour">T‑Shirt Colour</label>
49-
<select id="colour" name="colour" required>
50-
<option value="">-- Select a colour --</option>
51-
<option value="red">Red</option>
52-
<option value="black">Black</option>
53-
<option value="white">White</option>
54-
</select>
37+
<label for="email">Email Address</label>
38+
<input type="email" id="email" name="email" required />
39+
</fieldset>
5540

56-
<label for="size">T‑Shirt Size</label>
57-
<select id="size" name="size" required>
58-
<option value="">-- Select a size --</option>
59-
<option value="xs">XS</option>
60-
<option value="s">S</option>
61-
<option value="m">M</option>
62-
<option value="l">L</option>
63-
<option value="xl">XL</option>
64-
<option value="xxl">XXL</option>
65-
</select>
41+
<fieldset>
42+
<legend>T-Shirt Options</legend>
43+
<label for="colour">T‑Shirt Colour</label>
44+
<select id="colour" name="colour" required>
45+
<option value="">-- Select a colour --</option>
46+
<option value="red">Red</option>
47+
<option value="black">Black</option>
48+
<option value="white">White</option>
49+
</select>
6650

67-
</fieldset>
68-
69-
<button type="submit">Submit Order</button>
51+
<label for="size">T‑Shirt Size</label>
52+
<select id="size" name="size" required>
53+
<option value="">-- Select a size --</option>
54+
<option value="xs">XS</option>
55+
<option value="s">S</option>
56+
<option value="m">M</option>
57+
<option value="l">L</option>
58+
<option value="xl">XL</option>
59+
<option value="xxl">XXL</option>
60+
</select>
61+
</fieldset>
7062

63+
<button type="submit">Submit Order</button>
64+
</form>
7165
</main>
7266
<footer>
7367
<!-- change to your name-->

0 commit comments

Comments
 (0)