Skip to content

Commit 4a4cd4a

Browse files
RaeesStevensRaeesStevens
committed
Refined html
1 parent e0400be commit 4a4cd4a

1 file changed

Lines changed: 49 additions & 48 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,73 @@
1-
<!DOCTYPE html>
1+
2+
<!doctype html>
23
<html lang="en">
34
<head>
45
<meta charset="utf-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
67
<title>My form exercise</title>
78
<meta name="description" content="" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" href="style.css">
10-
10+
<link rel="stylesheet" href="style.css" />
1111
</head>
1212
<body>
1313
<header>
1414
<h1>Product Pick</h1>
1515
</header>
1616
<main>
1717
<div class="container">
18-
<form>
19-
<!-- write your html here-->
20-
<!--
21-
try writing out the requirements first as comments
22-
this will also help you fill in your PR message later-->
23-
<div class="field-row">
24-
<label for="name">Customer Name:</label>
25-
<input type="text" id="name" minlength="2" pattern=".*\S.*\S.*" required>
26-
27-
<label for="email">Customer Email:</label>
28-
<input type="email" id="email" name="email" required>
29-
</div>
18+
<form>
19+
<div class="field-row">
20+
<label for="name">Customer Name:</label>
21+
<input
22+
type="text"
23+
id="name"
24+
name="name"
25+
minlength="2"
26+
pattern=".*\S.*\S.*"
27+
required
28+
/>
3029

31-
<fieldset>
32-
<legend>T-shirt color:</legend>
30+
<label for="email">Customer Email:</label>
31+
<input type="email" id="email" name="email" required />
32+
</div>
3333

34-
<div class="color-options">
35-
<input type="radio" id="blue" name="color" value="blue" required>
36-
<label for="blue">Blue</label>
34+
<fieldset>
35+
<legend>T-shirt color:</legend>
36+
<div class="color-options">
37+
<label>
38+
<input type="radio" name="color" value="blue" required />
39+
Blue
40+
</label>
41+
<label>
42+
<input type="radio" name="color" value="black" />
43+
Black
44+
</label>
45+
<label>
46+
<input type="radio" name="color" value="grey" />
47+
Grey
48+
</label>
49+
</div>
50+
</fieldset>
3751

38-
<input type="radio" id="black" name="color" value="black" required>
39-
<label for="black">Black</label>
52+
<div class="size-row">
53+
<label for="size">Size:</label>
54+
<select id="size" name="size" required>
55+
<option value="">--select a size--</option>
56+
<option value="XS">XS</option>
57+
<option value="S">S</option>
58+
<option value="M">M</option>
59+
<option value="L">L</option>
60+
<option value="XL">XL</option>
61+
<option value="XXL">XXL</option>
62+
</select>
63+
</div>
4064

41-
<input type="radio" id="grey" name="color" value="grey" required>
42-
<label for="grey">Grey</label>
65+
<input type="submit" value="Submit" />
66+
</form>
4367
</div>
44-
45-
<div class="size-row">
46-
<label for="size">Size</label>
47-
<select id="size" name="size" required>
48-
49-
<option value="">--select a size--</option>
50-
<option value="XS">XS</option>
51-
<option value="S">S</option>
52-
<option value="M">M</option>
53-
<option value="L">L</option>
54-
<option value="XL">XL</option>
55-
<option value="XXL">XXL</option>
56-
</select>
57-
</div>
58-
59-
<input type="submit" value="Submit">
60-
61-
</fieldset>
62-
</div>
63-
64-
</form>
65-
</div>
6668
</main>
6769
<footer>
68-
<!-- change to your name-->
6970
<p>By Raees Stevens</p>
7071
</footer>
7172
</body>
72-
</html>
73+
</html>

0 commit comments

Comments
 (0)