Skip to content

Commit 78573b3

Browse files
cywong-devcywong-dev
committed
Merge branch 'staging-branch' of https://github.com/cywong-dev/Module-Onboarding-Form-Controls into staging-branch
2 parents 6e5dcb4 + a91b01a commit 78573b3

1 file changed

Lines changed: 25 additions & 100 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 25 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,27 @@
11
<!DOCTYPE html>
2-
<html lang="en" title="Checking Forms">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Checking Form</title>
8-
<style>
9-
body {
10-
font-family: Arial, sans-serif;
11-
background-color: hsl(0, 2%, 20%);
12-
display: flex;
13-
justify-content: center;
14-
align-items: center;
15-
height: 100vh;
16-
margin: 0;
17-
}
18-
19-
.customer-form {
20-
background-color: #ffffff;
21-
padding: 40px;
22-
border-radius: 8px;
23-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24-
width: 300px;
25-
}
26-
27-
.customer-form label {
28-
margin-bottom: 5px;
29-
color: #1a1a1a; /* dark grey text */
30-
background-color: transparent;
31-
}
32-
33-
.customer-form button {
34-
width: 100%;
35-
padding: 10px;
36-
background-color: #0056b3; /* darker blue */
37-
color: #ffffff;
38-
border: none;
39-
border-radius: 4px;
40-
cursor: pointer;
41-
font-size: 16px;
42-
}
43-
44-
.custojmer-form button:hover {
45-
background-color: #003f8a;
46-
}
47-
</style>
48-
</head>
49-
50-
<body>
51-
<main>
52-
<form class="customer-form" title="checking">
53-
54-
<H1>Checking Form:</H1>
55-
56-
<div>
57-
<label for="customer-name">Customer's name : </label>
58-
<input id="customer-name" name="customer-name" type="text" required pattern=".*\S.*\S.*"
59-
title="Please enter at least two non-space characters." />
60-
61-
</div>
62-
63-
<p></p>
64-
65-
<div>
66-
<label for="customer-email">Customer's email : </label>
67-
<input id="customer-email" name="customer-email" type="email" required />
68-
69-
</div>
70-
71-
<p></p>
72-
73-
<div>
74-
<label for="tshirt-colour">T-shirt Color : </label>
75-
<select id="tshirt-colour" name="tshirt-colour" required>
76-
<option value="" disabled selected>Select a colour</option>
77-
<option value="red">Red</option>
78-
<option value="blue">Blue</option>
79-
<option value="black">Black</option>
80-
</select>
81-
82-
</div>
83-
<p></p>
84-
<div>
85-
<label for="tshirt-size">T-shirt size required : </label>
86-
<select id="tshirt-size" name="tshirt-size" required>
87-
<option value="" disabled selected>Select a size</option>
88-
<option value="XS">XS</option>
89-
<option value="S">S</option>
90-
<option value="M">M</option>
91-
<option value="L">L</option>
92-
<option value="XL">XL</option>
93-
<option value="XXL">XXL</option>
94-
</select>
95-
96-
</div>
97-
<p></p>
98-
<button type="submit">Submit checking</button>
99-
</form>
100-
</main>
101-
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>My form exercise</title>
7+
<meta name="description" content="" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Product Pick</h1>
13+
</header>
14+
<main>
15+
<form>
16+
<!-- write your html here-->
17+
<!--
18+
try writing out the requirements first as comments
19+
this will also help you fill in your PR message later-->
20+
</form>
21+
</main>
22+
<footer>
23+
<!-- change to your name-->
24+
<h2>By HOMEWORK SOLUTION</h2>
25+
</footer>
26+
</body>
10227
</html>

0 commit comments

Comments
 (0)