Skip to content

Commit 88caf37

Browse files
JohnRob-jnrJohnRob-jnr
committed
Update form structure and styles for T-Shirt order form
1 parent c44123d commit 88caf37

2 files changed

Lines changed: 99 additions & 10 deletions

File tree

‎Form-Controls/index.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
padding: 20px;
4+
background-color: #408db7;
5+
}
6+
7+
.header {
8+
text-align: center;
9+
margin-bottom: 20px;
10+
background-color: #f0f8ff;
11+
padding: 3px;
12+
border-radius: 9px;
13+
font-family: Arial;
14+
font-style: bold;
15+
font-size: medium;
16+
}
17+
18+
19+
.form-inputs {
20+
width: 60%;
21+
background:#f0f8ff;
22+
text-align: left;
23+
display: block;
24+
margin: 0 auto;
25+
padding: 10px;
26+
border-radius: 8px;
27+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
28+
}
29+
30+
.form-selections {
31+
width: 60%;
32+
background:#f0f8ff;
33+
text-align: left;
34+
display: block;
35+
margin: 0 auto;
36+
padding: 10px;
37+
border-radius: 8px;
38+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
39+
}
40+
41+
label {
42+
display: block;
43+
margin-bottom: 10px;
44+
font-weight: 600;
45+
}
46+
47+
input[type="text"],
48+
input[type="email"],
49+
select {
50+
width: 100%;
51+
padding: 10px;
52+
border: 1px solid #ccc;
53+
border-radius: 10px;
54+
box-sizing: border-box; /* Crucial for width alignment */
55+
}
56+
57+
.footer {
58+
text-align: left;
59+
margin-top: 20px;
60+
background-color: #408db7;
61+
padding: 20px;
62+
}

‎Form-Controls/index.html‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<link href="index.css" rel="stylesheet">
45
<meta charset="utf-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
67
<title>My form exercise</title>
@@ -9,19 +10,45 @@
910
</head>
1011
<body>
1112
<header>
12-
<h1>Product Pick</h1>
13+
<h1>T Shirt Order Form</h1>
1314
</header>
1415
<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>
16+
<form>
17+
<!-- Name Field -->
18+
<div class="form-inputs">
19+
<label for="name">Full Name</label>
20+
<input type="text" id="name" name="name" required pattern =".*\S.*\S.*" placeholder="John Robinson">
21+
22+
<label for="email">Email Address</label>
23+
<input type="email" id="email" name="email" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" placeholder="john@example.com">
24+
</div>
25+
26+
<!-- Shirt Colour 3 colours only-->
27+
<div class="form-selections">
28+
<label for="colour">T Shirt Colour</label>
29+
<select id="colour" name="colour">
30+
<option value="Red">Red</option>
31+
<option value="White">White</option>
32+
<option value="Black">Black</option>
33+
</select>
34+
35+
36+
<!-- Shirt size xs - xxl -->
37+
38+
<label for="size">T Shirt Size</label>
39+
<select id="size" name="Size">
40+
<option value="XS">XSmall</option>
41+
<option value="S">Small</option>
42+
<option value="M">Medium</option>
43+
<option value="L">Large</option>
44+
<option value="XL">XLarge</option>
45+
<option value="XXL">XXLarge</option>
46+
</select>
47+
</div>
48+
</form>
2149
</main>
2250
<footer>
23-
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
51+
<p>By John Robinson</p>
2552
</footer>
2653
</body>
27-
</html>
54+
</html>

0 commit comments

Comments
 (0)