Skip to content

Commit 45d9b80

Browse files
AkliluMihtsunAkliluMihtsun
committed
adding more changes
1 parent d696e45 commit 45d9b80

2 files changed

Lines changed: 106 additions & 85 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,75 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="style.css" />
1010
</head>
1111
<body>
1212
<header>
1313
<h1>Product Pick</h1>
1414
</header>
1515
<main>
1616
<form>
17-
<!-- write your html here-->
18-
<!--
19-
try writing out the requirements first as comments
20-
this will also help you fill in your PR message later
21-
22-
requirements
23-
-What is the customer's name? I must collect this data and ensure it contains at least two non-space characters
24-
-What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern
25-
-What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
26-
-What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
27-
<fieldset>
28-
<legend>Customer Information</legend>
29-
<p>
30-
<label for="customerName">Customer Name</label>
31-
<input id="customerName" name="customerName" type="text" pattern=".*\S.*\S.*" required>
32-
</p>
33-
<p>
34-
<label for="emailAddress">Email Address</label>
35-
<input id="emailAddress" name="emailAddress" type="email" required>
36-
</p>
17+
<fieldset>
18+
<legend>Customer Information</legend>
19+
<p>
20+
<label for="customerName">Customer Name</label>
21+
<input
22+
id="customerName"
23+
name="customerName"
24+
type="text"
25+
pattern=".*\S.*\S.*"
26+
placeholder="username"
27+
required
28+
/>
29+
</p>
30+
<p>
31+
<label for="emailAddress">Email Address</label>
32+
<input
33+
id="emailAddress"
34+
name="emailAddress"
35+
type="email"
36+
placeholder="email"
37+
required
38+
/>
39+
</p>
3740
</fieldset>
3841
<fieldset>
39-
<legend>T-shirt Colour and Size</legend>
40-
<p>
41-
<label for="red">Red</label>
42-
<input type="radio" id="red" name="colour">
43-
</p>
44-
<p>
45-
<label for="green">Green</label>
46-
<input type="radio" id="green" name="colour">
47-
</p>
48-
<p>
49-
<label for="blue">Blue</label>
50-
<input type="radio" id="blue" name="colour">
51-
</p>
52-
<p>
53-
<label for="size">Tshirt Size</label>
54-
<select id="size" name="size">
55-
<option value="XS">XS</option>
56-
<option value="S">S</option>
57-
<option value="M">M</option>
58-
<option value="L">L</option>
59-
<option value="XL">XL</option>
60-
<option value="XXL">XXL</option>
61-
</select>
62-
</p>
63-
64-
</fieldset>
65-
42+
<legend>T-shirt Colour and Size</legend>
43+
<p>
44+
<input type="radio" id="red" name="colour" value="red" required />
45+
<label for="red">Red</label>
46+
</p>
47+
<p>
48+
<input type="radio" id="green" name="colour" value="green" />
49+
50+
<label for="green">Green</label>
51+
</p>
52+
<p>
53+
<input type="radio" id="blue" name="colour" value="blue" />
54+
<label for="blue">Blue</label>
55+
</p>
56+
<p>
57+
<label for="size">T-shirt Size</label>
58+
<select id="size" name="size" required>
59+
<option value="" disabled selected>Select Size</option>
60+
<option value="XS">XS</option>
61+
<option value="S">S</option>
62+
<option value="M">M</option>
63+
<option value="L">L</option>
64+
<option value="XL">XL</option>
65+
<option value="XXL">XXL</option>
66+
</select>
67+
</p>
68+
</fieldset>
69+
<input type="submit" value="Submit" />
6670
</form>
6771
</main>
6872
<footer>
69-
<!-- change to your name-->
7073
<p>By AKLILU MIHTSUN</p>
7174
</footer>
7275
</body>

‎Form-Controls/style.css‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,79 @@
11
body {
2-
font-family: Arial, sans-serif;
3-
background-color: #f2f2f2;
4-
margin: 0;
2+
font-family: Arial, sans-serif;
3+
background-color: #f2f2f2;
4+
margin: 0;
55
}
66

77
header {
8-
background-color: #333;
9-
color: white;
10-
text-align: center;
11-
padding: 20px;
8+
background-color: #333;
9+
color: white;
10+
text-align: center;
11+
padding: 20px;
1212
}
1313

1414
header h1 {
15-
margin: 0;
15+
margin: 0;
1616
}
1717

1818
main {
19-
max-width: 600px;
20-
margin: 30px auto;
21-
padding: 0 20px;
19+
max-width: 600px;
20+
margin: 30px auto;
21+
padding: 0 20px;
2222
}
2323

2424
fieldset {
25-
background-color: white;
26-
border: 1px solid #ccc;
27-
border-radius: 8px;
28-
padding: 20px;
29-
margin-bottom: 20px;
25+
background-color: white;
26+
border: 1px solid #ccc;
27+
border-radius: 8px;
28+
padding: 20px;
29+
margin-bottom: 20px;
3030
}
3131

3232
legend {
33-
font-weight: bold;
34-
padding: 0 20px;
33+
font-weight: bold;
34+
padding: 0 20px;
3535
}
3636

3737
fieldset p {
38-
margin-bottom: 15px;
38+
margin-bottom: 15px;
3939
}
4040

4141
input[type="text"],
4242
input[type="email"] {
43-
display: block;
44-
width: 100%;
45-
box-sizing: border-box;
46-
padding: 10px;
47-
margin-top: 6px;
48-
border: 1px solid #bbb;
49-
border-radius: 5px;
43+
display: block;
44+
width: 100%;
45+
box-sizing: border-box;
46+
padding: 10px;
47+
margin-top: 6px;
48+
border: 1px solid #bbb;
49+
border-radius: 5px;
5050
}
5151

52-
5352
select {
54-
padding: 10px;
55-
border: 1px solid #bbb;
56-
border-radius: 5px;
57-
margin-left: 10px;
58-
}
59-
footer{
60-
font-weight: bold;
61-
}
53+
display: block;
54+
margin-top: 6px;
55+
padding: 10px;
56+
border: 1px solid #bbb;
57+
border-radius: 5px;
58+
}
59+
60+
input[type="submit"] {
61+
background-color: #bbb;
62+
color: black;
63+
font-weight: bold;
64+
padding: 10px 20px;
65+
border-radius: 5px;
66+
}
67+
input[type="text"]:focus,
68+
input[type="email"]:focus,
69+
input[type="radio"]:focus,
70+
input[type="submit"]:focus,
71+
select:focus {
72+
outline: 3px solid black;
73+
}
74+
75+
footer {
76+
font-weight: bold;
77+
padding: 10px 20px;
78+
margin-top: 6px;
79+
}

0 commit comments

Comments
 (0)