Skip to content

Commit 6709ec3

Browse files
serveyanoserveyano
committed
Added T-shirt order form project
1 parent ff7b9d0 commit 6709ec3

1 file changed

Lines changed: 121 additions & 24 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 121 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,124 @@
11
<!DOCTYPE html>
22
<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-
<p>By HOMEWORK SOLUTION</p>
25-
</footer>
26-
</body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>T-Shirt Order Form</title>
7+
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
background-color: #f2f2f2;
12+
margin: 0;
13+
padding: 40px;
14+
}
15+
16+
form {
17+
background-color: white;
18+
max-width: 400px;
19+
margin: auto;
20+
padding: 20px;
21+
border-radius: 10px;
22+
}
23+
24+
h1 {
25+
text-align: center;
26+
margin-bottom: 20px;
27+
}
28+
29+
.form-group {
30+
margin-bottom: 15px;
31+
}
32+
33+
label {
34+
display: block;
35+
margin-bottom: 5px;
36+
font-weight: bold;
37+
}
38+
39+
input,
40+
select {
41+
width: 100%;
42+
padding: 10px;
43+
border: 1px solid #ccc;
44+
border-radius: 5px;
45+
box-sizing: border-box;
46+
}
47+
48+
button {
49+
width: 100%;
50+
padding: 10px;
51+
background-color: black;
52+
color: white;
53+
border: none;
54+
border-radius: 5px;
55+
font-size: 16px;
56+
cursor: pointer;
57+
}
58+
59+
button:hover {
60+
background-color: #333;
61+
}
62+
</style>
63+
</head>
64+
65+
<body>
66+
67+
<form>
68+
<h1>T-Shirt Order Form</h1>
69+
70+
<div class="form-group">
71+
<label for="name">Full Name</label>
72+
73+
<input
74+
type="text"
75+
id="name"
76+
name="name"
77+
required
78+
minlength="2"
79+
pattern=".*\S.*"
80+
>
81+
</div>
82+
83+
<div class="form-group">
84+
<label for="email">Email Address</label>
85+
86+
<input
87+
type="email"
88+
id="email"
89+
name="email"
90+
required
91+
>
92+
</div>
93+
94+
<div class="form-group">
95+
<label for="colour">Choose a Colour</label>
96+
97+
<select id="colour" name="colour" required>
98+
<option value="">Select a colour</option>
99+
<option value="black">Black</option>
100+
<option value="white">White</option>
101+
<option value="blue">Blue</option>
102+
</select>
103+
</div>
104+
105+
<div class="form-group">
106+
<label for="size">Choose a Size</label>
107+
108+
<select id="size" name="size" required>
109+
<option value="">Select a size</option>
110+
<option value="XS">XS</option>
111+
<option value="S">S</option>
112+
<option value="M">M</option>
113+
<option value="L">L</option>
114+
<option value="XL">XL</option>
115+
<option value="XXL">XXL</option>
116+
</select>
117+
</div>
118+
119+
<button type="submit">Submit Order</button>
120+
121+
</form>
122+
123+
</body>
27124
</html>

0 commit comments

Comments
 (0)