Skip to content

Commit 6773491

Browse files
mahbubur13mahbubur13
committed
changed the html
1 parent 2ffa1bd commit 6773491

3 files changed

Lines changed: 43 additions & 24 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,46 +6,51 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="style.css">
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
1415
<main>
15-
<form>
16+
<form action="#" method="POST">
1617
<div>
17-
<label for="name">Name</label>
18-
<input type="text" name="name" id"Name" placeholder="name" required>
18+
<label for="name">Name</label>
19+
<input type="text" name="name" id="name" placeholder="name" pattern="(\s*[^\s]\s*){2,}" title="Name must contain at least two letters or characters." required>
1920
</div>
2021
<div>
21-
<lable type="text" for= "email">email</lable>
22-
<input type="email" id="email" size="30" required />
22+
<label for="email">Email</label>
23+
<input type="email" name="email" id="email" size="30" required />
2324
</div>
24-
<p>Please select favourite colour:</p>
25-
<input type="radio" id="red" name="fav_color" value"red">
26-
<label for="red">Red</label><br>
27-
<input type="radio" id="blue" name="fav_color" value"blue">
28-
<label for="blue">Blue</label><br>
29-
<input type="radio" id="green" name="fav_color" value"green">
30-
<label for="green">Green</label><br>
25+
<fieldset>
26+
<legend>Please select favourite colour:</legend>
27+
<input type="radio" class="colour" id="red" name="fav_color" value="red">
28+
<label for="red">Red</label><br>
29+
<input type="radio" class="colour" id="blue" name="fav_color" value="blue">
30+
<label for="blue">Blue</label><br>
31+
<input type="radio" class="colour" name="fav_color" id="green" value="green">
32+
<label for="green">Green</label><br>
33+
</fieldset>
3134
<div>
32-
<p> Please select your relevant size</p>
33-
<label for="clothing-size">Choose a size:</label>
34-
<select id="clothing-size" name="size">
35-
<option value="xs"> XS - Extra Small</option>
36-
<option value="s">S - Small</option>
37-
<option value="m" selected>M - Medium</option>
38-
<option value="l">L - Large</option>
39-
<option value="xl">XL - Extra Large</option>
40-
</select>
35+
<p>Please select your relevant size</p>
36+
<label for="clothing-size">Choose a size:</label>
37+
<!-- Added a placeholder option and a 6th size (XXL) -->
38+
<select id="clothing-size" name="size" required>
39+
<option value="" disabled selected hidden>-- Select a size --</option>
40+
<option value="xs">XS - Extra Small</option>
41+
<option value="s">S - Small</option>
42+
<option value="m">M - Medium</option>
43+
<option value="l">L - Large</option>
44+
<option value="xl">XL - Extra Large</option>
45+
<option value="xxl">XXL - Double Extra Large</option>
46+
</select>
4147
</div>
4248
<button type="reset">Reset</button>
4349
<button type="submit">Submit</button>
44-
</form>
50+
</form>
4551
</main>
4652
<footer>
47-
<!-- change to your name-->
48-
<p>By HOMEWORK SOLUTION</p>
53+
<p>By HOMEWORK SOLUTION</p>
4954
</footer>
5055
</body>
5156
</html>

‎Form-Controls/style.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#name {
2+
height: 24px;
3+
}
4+
5+
#email {
6+
height: 24px;
7+
}
8+
.colour {
9+
height: 24px;
10+
width: 24px;
11+
}

‎Wireframe/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,6 @@ article {
8787
grid-column: span 3;
8888
}
8989
}
90+
91+
92+

0 commit comments

Comments
 (0)