Skip to content

Commit 7905e6f

Browse files
LesyaLyanLesyaLyan
committed
Added Meta, changed name pattern and formated
1 parent bd5adb3 commit 7905e6f

1 file changed

Lines changed: 55 additions & 39 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 55 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,82 @@
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>T-shirt Order Form</title>
7-
<meta name="description" content="" />
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" />
9-
<link rel="stylesheet" href="style.css">
12+
<link rel="stylesheet" href="style.css" />
1013
</head>
1114
<body>
12-
<main>
13-
14-
<form method="get" class="container">
15-
<!-- Requirements:
15+
<main>
16+
<form method="get" class="container">
17+
<!-- Requirements:
1618
- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
1719
- What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
1820
- What colour should this T-shirt be? I must provide 3 options and to ensure they do not choose other colours.
1921
- 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.
2022
-->
21-
<header>
22-
<h1>T-shirt Order Form</h1>
23-
</header>
23+
<header>
24+
<h1>T-shirt Order Form</h1>
25+
</header>
2426

25-
<hr>
26-
<label for="name">Full Name</label>
27-
<input id="name" name="name" type="text" minlength="2" placeholder="First Name Surname" pattern="[A-Za-z ]{2,}" required>
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+
/>
2838

29-
<hr>
30-
<label for="email">Email</label>
31-
<input id="email" name="email" type="email" pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$"
32-
placeholder="Your email" required>
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+
/>
3349

34-
<hr>
35-
<label for="colour">T-shirt Colour:</label>
36-
<select name="colour" id="colour" required>
37-
<option value="">Choose a Colour</option>
38-
<option value="Red">Red</option>
39-
<option value="Blue">Blue</option>
40-
<option value="Yellow">Yellow</option>
41-
</select>
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>
4258

43-
<hr>
44-
<label for="Size">T-shirt Size:</label>
45-
<select name="size" id="Size" required>
46-
<option value="">Choose a Size</option>
47-
<option value="XS">XS</option>
48-
<option value="S">S</option>
49-
<option value="M">M</option>
50-
<option value="L">L</option>
51-
<option value="XL">XL</option>
52-
<option value="XXL">XXL</option>
53-
</select>
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>
5470

55-
<hr>
56-
<button type="submit">Submit</button>
71+
<hr />
72+
<button type="submit">Submit</button>
5773

5874
<!-- write your html here-->
5975
<!--
6076
try writing out the requirements first as comments
6177
this will also help you fill in your PR message later-->
6278
</form>
63-
</main>
79+
</main>
6480
<footer>
6581
<!-- change to your name-->
6682
<p>By Lesya Lyaisyan</p>

0 commit comments

Comments
 (0)