Skip to content

Commit 3f3dd7b

Browse files
mrafeiemrafeie
authored
fixed issues - button added
1 parent 7e350d8 commit 3f3dd7b

1 file changed

Lines changed: 64 additions & 38 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 64 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,84 @@
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" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
6+
<title>T-shirt Order Form</title>
7+
<meta
8+
name="description"
9+
content="T-shirt order form for customers to place orders"
10+
/>
811
<meta name="viewport" content="width=device-width, initial-scale=1" />
12+
<link rel="stylesheet" href="style.css" />
913
</head>
1014
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
1415
<main>
15-
<form>
16+
<form method="get" class="container">
17+
<!-- Requirements:
18+
- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
19+
- What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
20+
- What colour should this T-shirt be? I must provide 3 options and to ensure they do not choose other colours.
21+
- What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL and to ensure they do not choose other sizes.
22+
-->
23+
<header>
24+
<h1>T-shirt Order Form</h1>
25+
</header>
1626

17-
<label for="name">Name:</label>
18-
<input type="text" id="name" name="name" minlength="2" required ><br>
19-
<label for="email">Email:</label>
20-
<input type="email" id="email" name="email"><br><br>
27+
<hr />
28+
<label for="name">Full Name</label>
29+
<input
30+
id="name"
31+
name="name"
32+
type="text"
33+
minlength="2"
34+
placeholder="First Name Surname"
35+
pattern="[\p{L} ]{2,}"
36+
required
37+
/>
2138

22-
<fieldset>
23-
<legend>colour:</legend>
39+
<hr />
40+
<label for="email">Email</label>
41+
<input
42+
id="email"
43+
name="email"
44+
type="email"
45+
pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$"
46+
placeholder="Your email"
47+
required
48+
/>
2449

25-
<label>
26-
<input type="radio" id="colour-red" name="colour" value="red" required>
27-
Red
28-
</label>
29-
30-
<label >
31-
<input type="radio" id="colour-blue" name="colour" value="blue">
32-
Blue
33-
</label>
34-
35-
<label >
36-
<input type="radio" id="colour-green" name="colour" value="green">
37-
Green
38-
</label>
39-
40-
</fieldset>
50+
<hr />
51+
<label for="colour">T-shirt Colour:</label>
52+
<select name="colour" id="colour" required>
53+
<option value="">Choose a Colour</option>
54+
<option value="Red">Red</option>
55+
<option value="Blue">Blue</option>
56+
<option value="Yellow">Yellow</option>
57+
</select>
4158

42-
<p for="size">Choose your size</p>
59+
<hr />
60+
<label for="Size">T-shirt Size:</label>
61+
<select name="size" id="Size" required>
62+
<option value="">Choose a Size</option>
63+
<option value="XS">XS</option>
64+
<option value="S">S</option>
65+
<option value="M">M</option>
66+
<option value="L">L</option>
67+
<option value="XL">XL</option>
68+
<option value="XXL">XXL</option>
69+
</select>
4370

44-
<select id="size" name="size" required>
45-
<option value="s">Small</option>
46-
<option value="m">Medium</option>
47-
<option value="l">Large</option>
48-
<option value="xl">XLarge</option>
49-
<option value="xl">XXLarge</option>
71+
<hr />
72+
<button type="submit">Submit</button>
5073

51-
</select>
74+
<!--
75+
try writing out the requirements first as comments
76+
this will also help you fill in your PR message later-->
5277
</form>
5378
</main>
5479
<footer>
55-
<p>Anita Amirhaeri</p>
80+
<!-- change to your name-->
81+
<p>Mahdi Rafiei</p>
5682
</footer>
5783
</body>
5884
</html>

0 commit comments

Comments
 (0)