Skip to content

Commit b0004a9

Browse files
eyob-techeyob-tech
committed
Fix validation errors and improve accessibility
1 parent 1e930b1 commit b0004a9

1 file changed

Lines changed: 49 additions & 13 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,69 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>T-Shirt Order</title>
66
<style>
7-
body { font-family: Arial, sans-serif; padding: 20px; background: #ffffff; color: #111111; }
8-
label { display: block; margin-top: 16px; font-weight: bold; color: #111111; }
9-
input, select { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #111111; font-size: 1rem; }
10-
button { margin-top: 20px; padding: 10px 20px; background: #8B0000; color: #ffffff; border: none; cursor: pointer; font-size: 1rem; font-weight: bold; }
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background: #ffffff;
11+
color: #111111;
12+
}
13+
label {
14+
display: block;
15+
margin-top: 16px;
16+
font-weight: bold;
17+
color: #111111;
18+
}
19+
input, select {
20+
width: 100%;
21+
padding: 8px;
22+
margin-top: 4px;
23+
border: 2px solid #111111;
24+
font-size: 1rem;
25+
}
26+
button {
27+
display: block;
28+
margin-top: 20px;
29+
padding: 12px 24px;
30+
background: #8B0000;
31+
color: #ffffff;
32+
border: none;
33+
cursor: pointer;
34+
font-size: 1rem;
35+
font-weight: bold;
36+
}
1137
</style>
1238
</head>
1339
<body>
14-
1540
<main>
1641
<h1>Order a T-Shirt</h1>
1742

1843
<label for="name">Your Name</label>
19-
<input type="text" id="name" name="name" pattern=".*\S.*\S.*" required />
44+
<input type="text" id="name" name="name" pattern=".*\S.*\S.*" required>
2045

2146
<label for="email">Your Email</label>
22-
<input type="email" id="email" name="email" required />
47+
<input type="email" id="email" name="email" required>
2348

2449
<label>Colour</label>
25-
<label><input type="radio" name="colour" value="red" required /> Red</label>
26-
<label><input type="radio" name="colour" value="blue" /> Blue</label>
27-
<label><input type="radio" name="colour" value="black" /> Black</label>
50+
<label><input type="radio" name="colour" value="red" required> Red</label>
51+
<label><input type="radio" name="colour" value="blue"> Blue</label>
52+
<label><input type="radio" name="colour" value="black"> Black</label>
2853

2954
<label for="size">Size</label>
3055
<select id="size" name="size" required>
3156
<option value="">Pick a size</option>
32-
<option>XS</option>
33-
<option>S</option>
57+
<option value="XS">XS</option>
58+
<option value="S">S</option>
59+
<option value="M">M</option>
60+
<option value="L">L</option>
61+
<option value="XL">XL</option>
62+
<option value="XXL">XXL</option>
63+
</select>
64+
65+
<button type="submit">Order Now</button>
66+
</main>
67+
</body>
68+
</html>
69+
Compose

0 commit comments

Comments
 (0)