Skip to content

Commit d6ba3b7

Browse files
Perri1308Perri1308
committed
Fix Lighthouse issues and HTML validation errors
1 parent 9326bc1 commit d6ba3b7

1 file changed

Lines changed: 69 additions & 30 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 69 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,105 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<style>
10+
button,
11+
select {
12+
min-height: 44px;
13+
padding: 8px 12px;
14+
}
15+
16+
button {
17+
margin-right: 8px;
18+
}
19+
</style>
920
</head>
21+
1022
<body>
1123
<header>
1224
<h1>Product Pick</h1>
1325
</header>
26+
1427
<main>
1528
<form action="results.html" method="GET">
1629
<div>
17-
<label for= "name"> Name </label>
18-
<input type= "text" name="Name" id="name" placeholder="Username" pattern=".*\S.*\S.*" title="Please enter at least two non-space characters." required>
30+
<label for="name">Name</label>
31+
<input
32+
type="text"
33+
name="Name"
34+
id="name"
35+
placeholder="Username"
36+
pattern=".*\S.*\S.*"
37+
title="Please enter at least two non-space characters."
38+
required
39+
/>
1940
</div>
2041

21-
22-
<div>
23-
<label for="email"> Email</label>
24-
<input type= "email" name="Email" id="email" placeholder="Email" required>
42+
<div>
43+
<label for="email">Email</label>
44+
<input
45+
type="email"
46+
name="Email"
47+
id="email"
48+
placeholder="Email"
49+
required
50+
/>
2551
</div>
26-
T-shirt Color
27-
<div>
28-
<label for= "red">Red</label>
29-
<input type="radio" name="color" id="red" value="Red" required>
52+
53+
T-shirt Color
54+
55+
<div>
56+
<label for="red">Red</label>
57+
<input
58+
type="radio"
59+
name="color"
60+
id="red"
61+
value="Red"
62+
required
63+
/>
3064
</div>
31-
<div>
65+
66+
<div>
3267
<label for="blue">Blue</label>
33-
<input type="radio" name="color" id="blue" value="Blue">
68+
<input
69+
type="radio"
70+
name="color"
71+
id="blue"
72+
value="Blue"
73+
/>
3474
</div>
3575

36-
<div>
76+
<div>
3777
<label for="pink">Pink</label>
38-
<input type="radio" name="color" id="pink" value="Pink">
78+
<input
79+
type="radio"
80+
name="color"
81+
id="pink"
82+
value="Pink"
83+
/>
3984
</div>
4085

41-
<div>
42-
<label for="size"> T-shirt Size's</label>
43-
<select name="T-shirt Size" id="size" required>
44-
45-
46-
<option label="Select a size " value=""></option>
86+
<div>
87+
<label for="size">T-shirt Size</label>
88+
<select name="T-shirt Size" id="size" required>
89+
<option label="Select a size" value=""></option>
4790
<option label="XS" value="XS"></option>
4891
<option label="S" value="S"></option>
4992
<option label="M" value="M"></option>
5093
<option label="L" value="L"></option>
5194
<option label="XL" value="XL"></option>
5295
<option label="XXL" value="XXL"></option>
53-
</select>
54-
96+
</select>
5597
</div>
5698

5799
<div>
58-
<button type="reset">Reset</button>
59-
<button type="submit">Submit</button>
60-
61-
</div>
62-
100+
<button type="reset">Reset</button>
101+
<button type="submit">Submit</button>
102+
</div>
63103
</form>
64-
65104
</main>
105+
66106
<footer>
67-
<!-- change to your name-->
68107
<p>By Perrila Tamang</p>
69108
</footer>
70109
</body>
71-
</html>
110+
</html>

0 commit comments

Comments
 (0)