Skip to content

Commit 62ced7e

Browse files
author
adedolapo
committed
Refactor form structure and add size and color selection options
1 parent 3b1f395 commit 62ced7e

2 files changed

Lines changed: 59 additions & 40 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,52 @@
99
</head>
1010
<body>
1111
<header>
12-
<h1>Product Pick</h1>
12+
<h1>Shirt Product Pick</h1>
1313
</header>
1414
<main>
1515
<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-->
16+
17+
<p>
18+
<label for="name"> Name:</label>
19+
<input type="text" id="name" name="user_name" required/>
20+
</p>
21+
<p>
22+
<label for="mail">Email: </label>
23+
<input type="email" id="mail" name="user_name" required/>
24+
</p>
25+
<p>
26+
<label for="size">
27+
<span> Choose your size:</span>
28+
</label>
29+
<select id="size" name="user-size">
30+
<option value="xs">XS</option>
31+
<option value="small">S</option>
32+
<option value="mid">M</option>
33+
<option value="large">L</option>
34+
<option value="xl">XL</option>
35+
<option value="xxl">XXL</option>
36+
37+
</select>
38+
</p>
39+
40+
<p>
41+
<label for="color">
42+
<span> Choose your color:</span>
43+
</label>
44+
<select id="color" name="user-color">
45+
<option value="red">Red</option>
46+
<option value="blue">Blue</option>
47+
<option value="green">Green</option>
48+
<option value="yellow">Yellow</option>
49+
<option value="black">Black</option>
50+
<option value="white">White</option>
51+
52+
</select>
2053
</form>
2154
</main>
2255
<footer>
23-
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
56+
<!--Adedolapo Bamiduro-->
57+
<p></p>
2558
</footer>
2659
</body>
27-
</html>
60+
</html>

‎Wireframe/index.html‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,19 @@
1-
<!DOCTYPE html>
1+
2+
!DOCTYPE html>
23
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
33-
</html>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframe</h1>
14+
<p>An article about webpages and their purpose</p>
15+
</header>
16+
17+
<main>
18+
<article>
19+
<img src="placeholder.svg" alt="An image depict

0 commit comments

Comments
 (0)