Skip to content

Commit 4ac2403

Browse files
AbdennourHachemiAbdennourHachemi
committed
formatting html file
1 parent cd10040 commit 4ac2403

1 file changed

Lines changed: 92 additions & 100 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 92 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,98 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<title>My form exercise</title>
7-
<meta name="description" content="Order form">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<link rel="stylesheet" href="styles.css">
10-
</head>
11-
<body>
12-
<header>
13-
<h1>Product Pick</h1>
14-
</header>
15-
<main>
16-
<form>
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-
253

4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>My form exercise</title>
8+
<meta name="description" content="Order form">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<link rel="stylesheet" href="styles.css">
11+
</head>
2612

27-
<div class="colorSelection">
28-
<label>Please pick a color:</label> <br>
13+
<body>
14+
<header>
15+
<h1>Product Pick</h1>
16+
</header>
17+
<main>
18+
<form>
19+
<div id="fn"><label for="fname">Please Enter your First name:</label>
20+
<input type="text" id="fname" name="fname" pattern=".*\S.*\S.*"> <br>
21+
</div>
22+
<div id="sn"><label for="lname">Please Enter your Last name:</label>
23+
<input type="text" id="lname" name="lname" pattern=".*\S.*\S.*"> <br>
24+
</div>
25+
<div id="em"><label for="email">Please Enter your Email:</label>
26+
<input type="email" id="email" name="email" required><br>
27+
</div>
28+
<div class="colorSelection">
29+
<label>Please pick a color:</label> <br>
30+
<div class="colorOption">
31+
<label>Blue</label>
32+
<div class="square" id="blueOption">
33+
<input type="radio" name="color" value="blue">
34+
</div>
35+
</div>
36+
<div class="colorOption">
37+
<label>Green</label>
38+
<div class="square" id="greenOption">
39+
<input type="radio" name="color" value="green">
40+
</div>
41+
</div>
42+
<div class="colorOption">
43+
<label>Red</label>
44+
<div class="square" id="redOption">
45+
<input type="radio" name="color" value="red" required>
46+
</div>
47+
</div>
48+
</div>
49+
<div id="sizediv">
50+
<label>Please select the t-shirt size:</label> <br>
51+
<div class="colorSelection">
52+
<div class="sizeOption">
53+
<label>XS</label>
54+
<div>
55+
<input type="radio" name="size" value="xs">
56+
</div>
57+
</div>
58+
<div class="sizeOption">
59+
<label>S</label>
60+
<div>
61+
<input type="radio" name="size" value="s">
62+
</div>
63+
</div>
64+
<div class="sizeOption">
65+
<label>M</label>
66+
<div>
67+
<input type="radio" name="size" value="m">
68+
</div>
69+
</div>
70+
<div class="sizeOption">
71+
<label>L</label>
72+
<div>
73+
<input type="radio" name="size" value="l">
74+
</div>
75+
</div>
76+
<div class="sizeOption">
77+
<label>XL</label>
78+
<div>
79+
<input type="radio" name="size" value="xl">
80+
</div>
81+
</div>
82+
<div class="sizeOption">
83+
<label>XXL</label>
84+
<div>
85+
<input type="radio" name="size" value="xxl">
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</form>
91+
</main>
2992

30-
<div class="colorOption">
31-
<label>Blue</label>
32-
<div class="square" id="blueOption">
33-
<input type="radio" name="color" value="blue">
34-
</div>
35-
</div>
93+
<footer>
94+
<p>By Abdennour Hachemi</p>
95+
</footer>
96+
</body>
3697

37-
<div class="colorOption">
38-
<label>Green</label>
39-
<div class="square" id="greenOption">
40-
<input type="radio" name="color" value="green">
41-
</div>
42-
</div>
43-
44-
<div class="colorOption">
45-
<label>Red</label>
46-
<div class="square" id="redOption">
47-
<input type="radio" name="color" value="red" required>
48-
</div>
49-
</div>
50-
51-
</div>
52-
<div id ="sizediv">
53-
<label>Please select the t-shirt size:</label> <br>
54-
<div class="colorSelection">
55-
56-
<div class="sizeOption">
57-
<label>XS</label>
58-
<div >
59-
<input type="radio" name="size" value="xs">
60-
</div>
61-
</div>
62-
63-
<div class="sizeOption">
64-
<label>S</label>
65-
<div>
66-
<input type="radio" name="size" value="s">
67-
</div>
68-
</div>
69-
<div class="sizeOption">
70-
<label>M</label>
71-
<div>
72-
<input type="radio" name="size" value="m">
73-
</div>
74-
</div>
75-
<div class="sizeOption">
76-
<label>L</label>
77-
<div >
78-
<input type="radio" name="size" value="l">
79-
</div>
80-
</div>
81-
<div class="sizeOption">
82-
<label>XL</label>
83-
<div>
84-
<input type="radio" name="size" value="xl">
85-
</div>
86-
</div>
87-
<div class="sizeOption">
88-
<label>XXL</label>
89-
<div >
90-
<input type="radio" name="size" value="xxl">
91-
</div>
92-
</div>
93-
</div>
94-
95-
96-
</div>
97-
98-
99-
</form>
100-
</main>
101-
<footer>
102-
103-
<p>By Abdennour Hachemi</p>
104-
</footer>
105-
</body>
106-
</html>
98+
</html>

0 commit comments

Comments
 (0)