Skip to content

Commit f016fc3

Browse files
committed
Build T-Shirt form with size options and improve structure
1 parent 1c75dcf commit f016fc3

1 file changed

Lines changed: 72 additions & 5 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,81 @@
99
</head>
1010
<body>
1111
<header>
12-
<h1>Product Pick</h1>
12+
<h1>T-Shirt Product Pick</h1>
1313
</header>
14+
<!-- T-Shirt Information Collection Form Design (Name Email and T-shirt color) -->
1415
<main>
1516
<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-->
17+
18+
<div>
19+
<label for="name">Name</label>
20+
<input
21+
type="text"
22+
name="name"
23+
id="name"
24+
minlength="2"
25+
placeholder="Monsur Abdulrahman"
26+
required
27+
28+
/>
29+
</div>
30+
<div>
31+
<label for="email">Email</label>
32+
<input
33+
type="email"
34+
name="email"
35+
id="email"
36+
placeholder="monsur@gmail.com"
37+
required
38+
/>
39+
</div>
40+
<div>
41+
<label for="color">T-Shirt Color</label>
42+
<select name="color" id="color" required>
43+
<option value="">-- Select a color --</option>
44+
<option value="White">White</option>
45+
<option value="Green">Green</option>
46+
<option value="Black">Black</option>
47+
</select>
48+
</div>
49+
50+
<!-- T-shirt Size Column -->
51+
52+
<fieldset>
53+
<Legend>Size</Legend>
54+
55+
<div class="size-option">
56+
<input type="radio" name="size" id="xs" required />
57+
<label for="xs">XS</label>
58+
59+
</div>
60+
<div class="size-option">
61+
<input type="radio" name="size" id="s" value="S" />
62+
<label for="s">S</label>
63+
64+
</div>
65+
<div class="size-option">
66+
<input type="radio" name="size" id="m" value="M" />
67+
<label for="m">M</label>
68+
69+
</div>
70+
<div class="size-option">
71+
<input type="radio" name="size" id="l" value="L" />
72+
<label for="l">L</label>
73+
</div>
74+
<div class="size-option">
75+
<input type="radio" name="size" id="xl" value="XL" />
76+
<label for="xl">XL</label>
77+
78+
</div>
79+
<div class="size-option">
80+
<input type="radio" name="size" id="xxl" value="XXL" />
81+
<label for="xxl">XXL</label>
82+
83+
</div>
84+
</fieldset>
85+
86+
<button type="submit">Submit</button>
2087
</form>
2188
</main>
2289
<footer>

0 commit comments

Comments
 (0)