Skip to content

Commit 0adf08b

Browse files
author
Ogbemi mene
committed
correction for lighthouse validation.
1 parent 0d2fafa commit 0adf08b

2 files changed

Lines changed: 75 additions & 64 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,75 +3,79 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>My form exercise work</title>
6+
<title>Order Your Custom T-Shirt | Product Pick</title>
7+
<meta
8+
name="description"
9+
content="Select your preferred color and size to order your custom Product Pick T-shirt. Quick and easy checkout for existing account holders."
10+
/>
711
<link rel="stylesheet" href="style.css" />
812
</head>
913

1014
<body>
11-
<h1>PRODUCT PICK</h1>
15+
<main>
16+
<h1>PRODUCT PICK</h1>
1217

13-
<form action="T-shirt.html" method="GET" class="form">
14-
<div>
15-
<label for="name">NAME</label>
16-
<input
17-
type="text"
18-
name="name"
19-
id="name"
20-
placeholder="Enter your name"
21-
value=""
22-
minlength="2"
23-
maxlength="100"
24-
required
25-
/>
26-
</div>
18+
<form action="T-shirt.html" method="GET" class="form">
19+
<div>
20+
<label for="name">NAME</label>
21+
<input
22+
type="text"
23+
name="name"
24+
id="name"
25+
placeholder="Enter your name"
26+
value=""
27+
minlength="2"
28+
maxlength="100"
29+
autocomplete="name"
30+
required
31+
/>
32+
</div>
2733

28-
<div>
29-
<label for="email">EMAIL</label>
30-
<input
31-
type="email"
32-
name="email"
33-
id="email"
34-
placeholder="Enter your email"
35-
value=""
36-
required
37-
/>
38-
</div>
34+
<div>
35+
<label for="email">EMAIL</label>
36+
<input
37+
type="email"
38+
name="email"
39+
id="email"
40+
placeholder="Enter your email"
41+
value=""
42+
autocomplete="email"
43+
required
44+
/>
45+
</div>
3946

40-
<div>
41-
<label for="colour">colour of T-shirt</label>
42-
<select name="colour" id="colour" required>
43-
<option value="" disabled selected hidden>
44-
Please choose a colour
45-
</option>
46-
<option value="red">red</option>
47-
<option value="blue">blue</option>
48-
<option value="green">green</option>
49-
</select>
50-
</div>
47+
<div>
48+
<label for="colour">colour of T-shirt</label>
49+
<select name="colour" id="colour" required>
50+
<option value="" disabled selected>Please choose a colour</option>
51+
<option value="red">red</option>
52+
<option value="blue">blue</option>
53+
<option value="green">green</option>
54+
</select>
55+
</div>
5156

52-
<div>
53-
T-shirt size
54-
<label for="size">size of T-shirt</label>
57+
<div>
58+
<label for="size">size of T-shirt</label>
59+
<select name="size" id="size" required>
60+
<option value="" disabled selected>Select size</option>
61+
<option value="XS">XS</option>
62+
<option value="S">S</option>
63+
<option value="M">M</option>
64+
<option value="L">L</option>
65+
<option value="XL">XL</option>
66+
<option value="XXL">XXL</option>
67+
</select>
68+
</div>
5569

56-
<select name="size" id="size" required>
57-
<option value="" disabled selected hidden>Select size</option>
58-
<option value="XS">XS</option>
59-
<option value="S">S</option>
60-
<option value="M">M</option>
61-
<option value="L">L</option>
62-
<option value="XL">XL</option>
63-
<option value="XXL">XXL</option>
64-
</select>
65-
</div>
70+
<button type="submit">Submit</button>
6671

67-
<button type="submit">Submit</button>
68-
69-
<p>
70-
We are selling T-shirts. this is a form to collect the following data Of
71-
our customers who already have accounts, so we know their addresses and
72-
charging, We want to confirm they are the right person, then get them to
73-
choose a colour and size.
74-
</p>
75-
</form>
72+
<p>
73+
We are selling T-shirts. this is a form to collect the following data
74+
Of our customers who already have accounts, so we know their addresses
75+
and charging, We want to confirm they are the right person, then get
76+
them to choose a colour and size.
77+
</p>
78+
</form>
79+
</main>
7680
</body>
7781
</html>

‎Form-Controls/style.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
body {
32
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
43
background-color: #f4f7f6;
@@ -52,13 +51,14 @@ select {
5251
border-radius: 4px;
5352
background-color: #fff;
5453
color: #333;
55-
outline: none;
54+
outline-offset: 2px;
5655
transition: border-color 0.2s ease, box-shadow 0.2s ease;
5756
}
5857

5958
input:focus,
6059
select:focus {
6160
border-color: #3498db;
61+
outline: 2px solid #3498db;
6262
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
6363
}
6464

@@ -72,10 +72,17 @@ button {
7272
border-radius: 4px;
7373
cursor: pointer;
7474
width: 100%;
75-
transition: background-color 0.2s ease;
75+
transition: background-color 0.2s ease, outline 0.1s ease;
7676
margin-top: 10px;
77+
min-height: 48px;
7778
}
7879

79-
button:hover {
80+
button:hover,
81+
button:focus {
8082
background-color: #2980b9;
83+
}
84+
85+
button:focus-visible {
86+
outline: 3px solid #3498db;
87+
outline-offset: 2px;
8188
}

0 commit comments

Comments
 (0)