Skip to content

Commit 6d457ad

Browse files
anitahy73anitahy73
authored
Enhance form structure and add user input validation
Updated form fields, added validation, and improved layout.
1 parent b0042cd commit 6d457ad

1 file changed

Lines changed: 60 additions & 34 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7-
<meta name="description" content="" />
7+
<meta name="description" content="Christelle's form which allows customers to fill their details and the kind of T shirt they like." />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
@@ -13,46 +13,72 @@ <h1>Product Pick</h1>
1313
</header>
1414
<main>
1515
<form>
16-
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>
21-
22-
<fieldset>
23-
<legend>colour:</legend>
24-
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
16+
<!-- write your html here-->
17+
<p>
18+
<label for="name"> Name:</label>
19+
<input type="text" id="name" name="user_name" required pattern=".*\S.*\S.*" title="Please enter at least 2 non-space characters"/>
20+
</p>
21+
<p>
22+
<label for="mail">Email: </label>
23+
<input type="email" id="mail" name="user_name" required/>
24+
</p>
25+
26+
<fieldset>
27+
<legend> Please choose a colour:</legend>
28+
<p>
29+
<label>
30+
<input type="radio" name="colour" value="white" required>
31+
White
32+
</label>
33+
</p>
34+
<p>
35+
<label>
36+
<input type="radio" name="colour" value="black" required>
37+
Black
38+
</label>
39+
</p>
40+
<p>
41+
<label>
42+
<input type="radio" name="colour" value="red" required>
43+
Red
44+
</label>
45+
</p>
46+
47+
</fieldset>
48+
49+
<p>
50+
<label for="size">
51+
<span> Choose your size:</span>
3852
</label>
39-
40-
</fieldset>
53+
<select id="size" name="user-size" required>
54+
<option value="">--Select--</option>
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>
4161

42-
<p for="size">Choose your size</p>
62+
</select>
63+
</p>
64+
<p class="button">
65+
<button type ="submit">Submit</button>
66+
<button type="reset">Reset</button>
4367

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>
68+
</p>
5069

51-
</select>
70+
<!--
71+
try writing out the requirements first as comments
72+
- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
73+
-What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
74+
- What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
75+
- What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
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>By Anita Amirhaeri </p>
5682
</footer>
5783
</body>
5884
</html>

0 commit comments

Comments
 (0)