Skip to content

Commit 9a54070

Browse files
burhan-mustafaburhan-mustafa
committed
Added a form based on README requirements
created style sheet to centre the form
1 parent ff7b9d0 commit 9a54070

3 files changed

Lines changed: 84 additions & 6 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Writing that out as a series of questions to ask yourself:
2525
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
2626
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
2727

28-
All fields are required.
28+
All fields are required.
2929
Do not write a form action for this project.
3030

3131
## Acceptance Criteria

‎Form-Controls/index.html‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,70 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
67
<title>My form exercise</title>
78
<meta name="description" content="" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<link rel = "stylesheet" href = "style.css">
911
</head>
12+
1013
<body>
14+
1115
<header>
1216
<h1>Product Pick</h1>
1317
</header>
1418
<main>
15-
<form>
19+
20+
<form method = "get" class = "form-container">
1621
<!-- 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-->
22+
<!--Requirements:
23+
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
24+
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
25+
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
26+
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL-->
27+
28+
<label> Forename: </label>
29+
<input type = "text" for = "Forname:" minlength="2" required>
30+
<br>
31+
32+
<label> Surname: </label>
33+
<input type = "text" for = "Surname:" minlength="2 " required>
34+
<br>
35+
36+
<label> Email: </label>
37+
<input type = "email" for = "Email:" required>
38+
<br>
39+
40+
<label> T-shirt Colour: </label>
41+
<select required>
42+
<option>White</option>
43+
<option>Black</option>
44+
<option>Grey</option>
45+
</select>
46+
<br>
47+
48+
<label> T-shirt Size:</label>
49+
<select required>
50+
<option>XS</option>
51+
<option>S</option>
52+
<option>M</option>
53+
<option>L</option>
54+
<option>XL</option>
55+
<option>XXL</option>
56+
</select>
57+
<br>
58+
59+
<button type ="submit">Submit</button>
60+
2061
</form>
2162
</main>
63+
2264
<footer>
2365
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
66+
<p>By Muhammad-Burhan Mustafa</p>
2567
</footer>
68+
2669
</body>
2770
</html>

‎Form-Controls/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
.form-container{
3+
display: flex;
4+
flex-direction: column;
5+
border-style:solid;
6+
padding: 10px;
7+
max-width:170px;
8+
margin:auto;
9+
}
10+
11+
.form-container input{
12+
width:100%;
13+
max-width: 150px;
14+
box-sizing: border-box;
15+
margin-left:auto;
16+
margin-right:auto;
17+
}
18+
19+
.form-container select,
20+
.form-container button{
21+
max-width:150px;
22+
width: 100%;
23+
box-sizing: border-box;
24+
margin-left:auto;
25+
margin-right:auto;
26+
}
27+
28+
h1{
29+
text-align: center;
30+
}
31+
32+
footer{
33+
text-align: center;
34+
}
35+

0 commit comments

Comments
 (0)