Skip to content

Commit 8bfdc18

Browse files
authored
did the requested forms and make sure requrements are in place as well as placeholders
1 parent 72fe02b commit 8bfdc18

1 file changed

Lines changed: 50 additions & 8 deletions

File tree

Form-Controls/index.html

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,58 @@
1212
<h1>Product Pick</h1>
1313
</header>
1414
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
15+
<form>
16+
<!-- write your html here-->
17+
<!--
18+
try writing out the requirements first as comments
19+
this will also help you fill in your PR message later-->
20+
<fieldset>
21+
<label for="name">
22+
<span>Customer Name: </span>
23+
<strong><span aria-label="required">*</span></strong>
24+
</label>
25+
<input type="text" id="name" name="customer-name" required pattern="[A-Za-z\s\.]+" minlength="2" maxlength="40"/>
26+
</fieldset>
27+
<fieldset>
28+
<label for="email">
29+
<span>Email: </span>
30+
<strong><span aria-label="required">*</span></strong>
31+
</label>
32+
<input type="email" id="email" name="customer-mail" required minlength="5" maxlength="50" placeholder="example@gmail.com" />
33+
</fieldset>
34+
<fieldset>
35+
<label for="color preference">
36+
<span>Color:</span>
37+
<strong><span aria-label="required">*</span></strong>
38+
</label>
39+
<select id="color preference" name="color preference">
40+
41+
<option value="blue">Blue</option>
42+
<option value="white">White</option>
43+
<option value="red">Red</option>
44+
</select>
45+
</fieldset>
46+
<fieldset>
47+
<label for="size">
48+
<span>Size</span>
49+
<strong><span aria-label="required">*</span></strong>
50+
</label>
51+
<select id="size" name="size">
52+
<option value="xs">XS</option>
53+
<option value="s">S</option>
54+
<option value="m">M</option>
55+
<option value="l">L</option>
56+
<option value="xl">XL</option>
57+
<option value="xxl">XXL</option>
58+
</select>
59+
</fieldset>
60+
<button type="reset"> Reset</button>
61+
<button type="submit"> Submit</button>
62+
</form>
63+
<!-- change to your name-->
2164
</main>
2265
<footer>
23-
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
66+
<h2>By Abraham Habte</h2>
2567
</footer>
2668
</body>
2769
</html>

0 commit comments

Comments
 (0)