Skip to content

Commit 4daf33e

Browse files
JohnRob-jnrJohnRob-jnr
committed
Refactor form structure for improved readability and organization
1 parent 88caf37 commit 4daf33e

1 file changed

Lines changed: 31 additions & 31 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,39 @@
1313
<h1>T Shirt Order Form</h1>
1414
</header>
1515
<main>
16-
<form>
17-
<!-- Name Field -->
18-
<div class="form-inputs">
19-
<label for="name">Full Name</label>
20-
<input type="text" id="name" name="name" required pattern =".*\S.*\S.*" placeholder="John Robinson">
21-
22-
<label for="email">Email Address</label>
23-
<input type="email" id="email" name="email" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" placeholder="john@example.com">
24-
</div>
16+
<form>
17+
<!-- Name Field -->
18+
<div class="form-inputs">
19+
<label for="name">Full Name</label>
20+
<input type="text" id="name" name="name" required pattern=".*\S.*\S.*" placeholder="John Robinson">
21+
<label for="email">Email Address</label>
22+
<input type="email" id="email" name="email" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
23+
placeholder="john@example.com">
24+
</div>
2525

26-
<!-- Shirt Colour 3 colours only-->
27-
<div class="form-selections">
28-
<label for="colour">T Shirt Colour</label>
29-
<select id="colour" name="colour">
30-
<option value="Red">Red</option>
31-
<option value="White">White</option>
32-
<option value="Black">Black</option>
33-
</select>
26+
<!-- Shirt Colour 3 colours only-->
27+
<div class="form-selections">
28+
<label for="colour">T Shirt Colour</label>
29+
<select id="colour" name="colour">
30+
<option value="" selected disabled>Select a colour</option>
31+
<option value="Red">Red</option>
32+
<option value="White">White</option>
33+
<option value="Black">Black</option>
34+
</select>
3435

35-
36-
<!-- Shirt size xs - xxl -->
37-
38-
<label for="size">T Shirt Size</label>
39-
<select id="size" name="Size">
40-
<option value="XS">XSmall</option>
41-
<option value="S">Small</option>
42-
<option value="M">Medium</option>
43-
<option value="L">Large</option>
44-
<option value="XL">XLarge</option>
45-
<option value="XXL">XXLarge</option>
46-
</select>
47-
</div>
48-
</form>
36+
<!-- Shirt size xs - xxl -->
37+
<label for="size">T Shirt Size</label>
38+
<select id="size" name="Size">
39+
<option value="" selected disabled>Select a size</option>
40+
<option value="XS">XSmall</option>
41+
<option value="S">Small</option>
42+
<option value="M">Medium</option>
43+
<option value="L">Large</option>
44+
<option value="XL">XLarge</option>
45+
<option value="XXL">XXLarge</option>
46+
</select>
47+
</div>
48+
</form>
4949
</main>
5050
<footer>
5151
<p>By John Robinson</p>

0 commit comments

Comments
 (0)