Skip to content

Commit cd10040

Browse files
AbdennourHachemiAbdennourHachemi
committed
corecting typos and making adding attribute name to size radio button to allow single selection
1 parent e05cec1 commit cd10040

2 files changed

Lines changed: 48 additions & 84 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 37 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="description" content="Order form">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="stylesheet" href="styles.css">
1010
</head>
1111
<body>
@@ -14,111 +14,93 @@ <h1>Product Pick</h1>
1414
</header>
1515
<main>
1616
<form>
17-
<!-- write your html here-->
18-
<label for="fname">Please Enter your First name:</label><br>
19-
<input type="txt" id="fname" name="fname"> <br>
20-
<label for="lname">Please Enter your Last name:</label><br>
21-
<input type="txt" id="lname" name="lname"> <br>
22-
<label for="email">Please Enter your Email:</label><br>
23-
<input type="email" id="email" name="email" /><br>
24-
<label for="color">Please pick a color:</label> <br>
17+
<div id="fn"><label for="fname">Please Enter your First name:</label>
18+
<input type="text" id="fname" name="fname" pattern=".*\S.*\S.*"> <br></div>
19+
<div id="sn"><label for="lname">Please Enter your Last name:</label>
20+
<input type="text" id="lname" name="lname" pattern=".*\S.*\S.*"> <br></div>
21+
<div id="em"><label for="email">Please Enter your Email:</label>
22+
<input type="email" id="email" name="email" required><br>
23+
</div>
24+
2525

2626

2727
<div class="colorSelection">
28+
<label>Please pick a color:</label> <br>
2829

2930
<div class="colorOption">
30-
<label for="blueOption">Blue</label>
31+
<label>Blue</label>
3132
<div class="square" id="blueOption">
3233
<input type="radio" name="color" value="blue">
3334
</div>
3435
</div>
3536

3637
<div class="colorOption">
37-
<label for="greenOption">Green</label>
38+
<label>Green</label>
3839
<div class="square" id="greenOption">
3940
<input type="radio" name="color" value="green">
4041
</div>
4142
</div>
4243

4344
<div class="colorOption">
44-
<label for="redOption">Red</label>
45+
<label>Red</label>
4546
<div class="square" id="redOption">
46-
<input type="radio" name="color" value="red">
47+
<input type="radio" name="color" value="red" required>
4748
</div>
4849
</div>
4950

5051
</div>
51-
<div>
52-
<label for="color">Please select the t-shirt size:</label> <br>
52+
<div id ="sizediv">
53+
<label>Please select the t-shirt size:</label> <br>
5354
<div class="colorSelection">
5455

5556
<div class="sizeOption">
56-
<label for="sizOption">XS</label>
57+
<label>XS</label>
5758
<div >
58-
<input type="radio" value="xs">
59+
<input type="radio" name="size" value="xs">
5960
</div>
6061
</div>
6162

6263
<div class="sizeOption">
63-
<label for="sizOption">S</label>
64-
<div >
65-
<input type="radio" value="s">
64+
<label>S</label>
65+
<div>
66+
<input type="radio" name="size" value="s">
6667
</div>
6768
</div>
6869
<div class="sizeOption">
69-
<label for="sizOption">M</label>
70-
<div >
71-
<input type="radio" value="m">
70+
<label>M</label>
71+
<div>
72+
<input type="radio" name="size" value="m">
7273
</div>
7374
</div>
7475
<div class="sizeOption">
75-
<label for="sizOption">L</label>
76+
<label>L</label>
7677
<div >
77-
<input type="radio" value="l">
78+
<input type="radio" name="size" value="l">
7879
</div>
7980
</div>
8081
<div class="sizeOption">
81-
<label for="sizOption">XL</label>
82-
<div >
83-
<input type="radio" value="xl">
82+
<label>XL</label>
83+
<div>
84+
<input type="radio" name="size" value="xl">
8485
</div>
8586
</div>
8687
<div class="sizeOption">
87-
<label for="sizOption">XXL</label>
88+
<label>XXL</label>
8889
<div >
89-
<input type="radio" value="xxl">
90+
<input type="radio" name="size" value="xxl">
9091
</div>
9192
</div>
93+
</div>
9294

9395

9496
</div>
9597

9698

97-
<!-- <div class="colorSelection">
98-
<div><label for="Blue">Blue</label>
99-
<div class="square" id="blueOption"><input type="radio" value="blue" ></dev>
100-
<div><label for="green">Green</label> </div>
101-
<div class="square" id="greenOption"><input type="radio" name="aligned" value="white"> </div>
102-
</div>
103-
<div><label fo="red">Red</label>
104-
<div class="square" id="redOption"><input type="radio" name="aligned" value="right"></div>
105-
</div>
106-
107-
108-
</div> -->
109-
<!--
110-
111-
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
112-
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
113-
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
114-
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
115-
try writing out the requirements first as comments
116-
this will also help you fill in your PR message later-->
11799
</form>
118100
</main>
119101
<footer>
120-
<!-- change to your name-->
121-
<!-- <p>By Abdennour Hachemi</p> -->
102+
103+
<p>By Abdennour Hachemi</p>
122104
</footer>
123105
</body>
124106
</html>

‎Form-Controls/styles.css‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,9 @@
1-
/* .square {
2-
height: 25px;
3-
width: 25px;
41

5-
6-
7-
}
8-
9-
10-
#blueOption{
11-
background-color: #180fcb;
12-
}
13-
#greenOption{
14-
background-color: green;
15-
}
16-
#redOption{
17-
background-color: red;
18-
}
19-
.colorSelection{
20-
border: solid 1px
21-
22-
}
23-
.colorSelection {
24-
display: flex;
25-
flex-direction: row;
26-
justify-content: center;
27-
gap :20px;
28-
29-
} */
302
.colorSelection {
313
display: flex;
32-
justify-content:baseline;
334
gap: 20px;
5+
margin-left: 20px;
6+
margin-top: 20px;
347
}
358

369
.colorOption {
@@ -55,3 +28,12 @@
5528
#redOption {
5629
background-color: red;
5730
}
31+
32+
#sizediv{
33+
margin:20px 20px;
34+
35+
}
36+
37+
#fn,#sn,#em{
38+
margin: 20px 20px;
39+
}

0 commit comments

Comments
 (0)