Skip to content

Commit cb879f7

Browse files
cywong-devcywong-dev
committed
Revised on 20 May 2026 for the comments
1 parent 23f8103 commit cb879f7

1 file changed

Lines changed: 50 additions & 89 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 50 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,62 @@
1+
<!DOCTYPE html>
12
<html lang="en" title="Checking Form">
23

34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Checking Form</title>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
background-color: hsl(0, 2%, 20%);
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
height: 100vh;
15-
margin: 0;
16-
}
17-
18-
.customer-form {
19-
background-color: #ffffff;
20-
padding: 40px;
21-
border-radius: 8px;
22-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23-
width: 300px;
24-
}
25-
26-
.customer-form label {
27-
margin-bottom: 5px;
28-
color: #1a1a1a; /* dark grey text */
29-
background-color: transparent;
30-
}
31-
32-
.customer-form button {
33-
width: 100%;
34-
padding: 10px;
35-
background-color: #0056b3; /* darker blue */
36-
color: #ffffff;
37-
border: none;
38-
border-radius: 4px;
39-
cursor: pointer;
40-
font-size: 16px;
41-
}
42-
43-
.custojmer-form button:hover {
44-
background-color: #003f8a;
45-
}
46-
</style>
478
</head>
489

4910
<body>
5011
<main>
51-
<form class="customer-form" title="checking">
52-
53-
<H1>Checking Form:</H1>
54-
55-
<div>
56-
<label for="customer-name">Customer's name : </label>
57-
<input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
58-
title="Please enter at least two non-space characters." />
59-
60-
</div>
61-
62-
<p></p>
63-
64-
<div>
65-
<label for="customer-email">Customer's email : </label>
66-
<input id="customer-email" name="customer-email" type="email" required />
67-
68-
</div>
69-
70-
<p></p>
71-
72-
<div>
73-
<label for="tshirt-colour">T-shirt Color : </label>
74-
<select id="tshirt-colour" name="tshirt-colour" required>
75-
<option value="" disabled selected>Select a colour</option>
76-
<option value="red">Red</option>
77-
<option value="blue">Blue</option>
78-
<option value="black">Black</option>
79-
</select>
80-
81-
</div>
82-
<p></p>
83-
<div>
84-
<label for="tshirt-size">T-shirt size required : </label>
85-
<select id="tshirt-size" name="tshirt-size" required>
86-
<option value="" disabled selected>Select a size</option>
87-
<option value="XS">XS</option>
88-
<option value="S">S</option>
89-
<option value="M">M</option>
90-
<option value="L">L</option>
91-
<option value="XL">XL</option>
92-
<option value="XXL">XXL</option>
93-
</select>
94-
95-
</div>
96-
<p></p>
97-
<button type="submit">Submit checking</button>
98-
</form>
12+
<form class="customer-form" title="checking">
13+
14+
<H1>Checking Form:</H1>
15+
16+
<div>
17+
<label for="customer-name">Customer's name : </label>
18+
<input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
19+
title="Please enter at least two non-space characters." />
20+
</div>
21+
<br>
22+
23+
<div>
24+
<label for="customer-email">Customer's email : </label>
25+
<input id="customer-email" name="customer-email" type="email" required />
26+
27+
</div>
28+
<br>
29+
30+
<div>
31+
<label for="tshirt-colour">T-shirt Color : </label>
32+
<select id="tshirt-colour" name="tshirt-colour" required>
33+
<option value="" disabled selected>Select a colour</option>
34+
<option value="red">Red</option>
35+
<option value="blue">Blue</option>
36+
<option value="black">Black</option>
37+
</select>
38+
</div>
39+
<br>
40+
<div>
41+
<label for="tshirt-size">T-shirt size required : </label>
42+
<select id="tshirt-size" name="tshirt-size" required>
43+
<option value="" disabled selected>Select a size</option>
44+
<option value="XS">XS</option>
45+
<option value="S">S</option>
46+
<option value="M">M</option>
47+
<option value="L">L</option>
48+
<option value="XL">XL</option>
49+
<option value="XXL">XXL</option>
50+
</select>
51+
52+
</div>
53+
<br>
54+
<button type="submit">Submit checking</button>
55+
</form>
9956
</main>
57+
<footer>
58+
<p>By ChunyanWong HOMEWORK SOLUTION</p>
59+
</footer>
10060
</body>
101-
</html>
61+
62+
</html>

0 commit comments

Comments
 (0)