Skip to content

Commit 92359a0

Browse files
AbidAkhtar-techAbidAkhtar-tech
committed
Add input for choosing colour
1 parent c540b9d commit 92359a0

1 file changed

Lines changed: 58 additions & 1 deletion

File tree

‎Form-Controls/index.html‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,68 @@
99
</head>
1010
<body>
1111
<header>
12-
<h1>Product Pick</h1>
12+
<h1>Product T-shirts</h1>
1313
</header>
1414
<main>
1515
<form>
1616
<!-- write your html here-->
17+
18+
<!-- 1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. -->
19+
20+
<label for="username">Name</label>
21+
<input type="text" id="username" minlength="2" required/>
22+
23+
<!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. -->
24+
25+
<label for="email">Email</label>
26+
<input type="email" id="email" required>
27+
28+
<!-- 3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? -->
29+
30+
<fieldset>
31+
<legend>Choose a colour</legend>
32+
33+
<label for="red">Red</label>
34+
<input type="radio" id="red" name="colour" value="red" required>
35+
36+
<label for="green">Green</label>
37+
<input type="radio" id="green" name="colour" value="green" required>
38+
39+
<label for="white">White</label>
40+
<input type="radio" id="white" name="colour" value="white" required>
41+
42+
43+
</fieldset>
44+
45+
<!-- 4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -->
46+
47+
<fieldset>
48+
<legend>Choose a size</legend>
49+
50+
<label for="xsmall">XS</label>
51+
<input type="radio" id="xsmall" name="size" value="xsmall" required>
52+
53+
<label for="small">S</label>
54+
<input type="radio" id="small" name="size" value="small" required>
55+
56+
<label for="medium">M</label>
57+
<input type="radio" id="medium" name="size" value="medium" required>
58+
59+
<label for="large">L</label>
60+
<input type="radio" id="large" name="size" value="large" required>
61+
62+
<label for="xlarge">XL</label>
63+
<input type="radio" id="xlarge" name="size" value="xlarge" required>
64+
65+
<label for="xxlarge">XXL</label>
66+
<input type="radio" id="xxlarge" name="size" value="xxlarge" required>
67+
68+
69+
</fieldset>
70+
71+
<button type="button">Submit</button>
72+
73+
1774

1875
<!--
1976
try writing out the requirements first as comments

0 commit comments

Comments
 (0)