Skip to content

Commit 8f01d67

Browse files
serveyanoserveyano
committed
improved
1 parent 6709ec3 commit 8f01d67

2 files changed

Lines changed: 121 additions & 111 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 62 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -3,122 +3,73 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
67
<title>T-Shirt Order Form</title>
78

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>
9+
<link rel="stylesheet" href="style.css">
6310
</head>
6411

6512
<body>
6613

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>
14+
<main>
15+
16+
<form>
17+
<h1>T-Shirt Order Form</h1>
18+
19+
<div class="form-group">
20+
<label for="name">Full Name</label>
21+
22+
<input
23+
type="text"
24+
id="name"
25+
name="name"
26+
required
27+
minlength="2"
28+
pattern=".*\S.*"
29+
>
30+
</div>
31+
32+
<div class="form-group">
33+
<label for="email">Email Address</label>
34+
35+
<input
36+
type="email"
37+
id="email"
38+
name="email"
39+
required
40+
>
41+
</div>
42+
43+
<div class="form-group">
44+
<label for="colour">Choose a Colour</label>
45+
46+
<select id="colour" name="colour" required>
47+
<option value="">Select a colour</option>
48+
<option value="black">Black</option>
49+
<option value="white">White</option>
50+
<option value="blue">Blue</option>
51+
</select>
52+
</div>
53+
54+
<div class="form-group">
55+
<label for="size">Choose a Size</label>
56+
57+
<select id="size" name="size" required>
58+
<option value="">Select a size</option>
59+
<option value="XS">XS</option>
60+
<option value="S">S</option>
61+
<option value="M">M</option>
62+
<option value="L">L</option>
63+
<option value="XL">XL</option>
64+
<option value="XXL">XXL</option>
65+
</select>
66+
</div>
67+
68+
<button type="submit">Submit Order</button>
69+
70+
</form>
71+
72+
</main>
12273

12374
</body>
124-
</html>
75+
</html>

‎Form-Controls/style.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #f3f3f3;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
}
15+
16+
form {
17+
background-color: white;
18+
padding: 30px;
19+
border-radius: 10px;
20+
width: 350px;
21+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
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+
}
46+
47+
button {
48+
width: 100%;
49+
padding: 10px;
50+
background-color: black;
51+
color: white;
52+
border: none;
53+
border-radius: 5px;
54+
cursor: pointer;
55+
}
56+
57+
button:hover {
58+
background-color: #333;
59+
}

0 commit comments

Comments
 (0)