Skip to content

Commit 57b593c

Browse files
fromondafromonda
committed
Footer update and code formatting
1 parent ea27a89 commit 57b593c

1 file changed

Lines changed: 117 additions & 125 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 117 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,120 @@
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="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
10-
<style>
11-
body {
12-
font-family: Arial, sans-serif;
13-
padding: 20px;
14-
}
15-
16-
form {
17-
max-width: 400px;
18-
}
19-
20-
div,
21-
fieldset {
22-
margin-bottom: 20px;
23-
}
24-
25-
label {
26-
display: block;
27-
margin-bottom: 8px;
28-
}
29-
30-
input,
31-
select,
32-
button {
33-
min-height: 44px;
34-
padding: 10px;
35-
font-size: 16px;
36-
width: 100%;
37-
box-sizing: border-box;
38-
}
39-
40-
fieldset label {
41-
display: flex;
42-
align-items: center;
43-
gap: 10px;
44-
margin-bottom: 12px;
45-
cursor: pointer;
46-
}
47-
48-
input[type="radio"] {
49-
width: 20px;
50-
height: 20px;
51-
}
3+
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="" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
11+
<style>
12+
body {
13+
font-family: Arial, sans-serif;
14+
padding: 20px;
15+
}
16+
17+
form {
18+
max-width: 400px;
19+
}
20+
21+
div,
22+
fieldset {
23+
margin-bottom: 20px;
24+
}
25+
26+
label {
27+
display: block;
28+
margin-bottom: 8px;
29+
}
30+
31+
input,
32+
select,
33+
button {
34+
min-height: 44px;
35+
padding: 10px;
36+
font-size: 16px;
37+
width: 100%;
38+
box-sizing: border-box;
39+
}
40+
41+
fieldset label {
42+
display: flex;
43+
align-items: center;
44+
gap: 10px;
45+
margin-bottom: 12px;
46+
cursor: pointer;
47+
}
48+
49+
input[type="radio"] {
50+
width: 20px;
51+
height: 20px;
52+
}
5253
</style>
53-
</head>
54-
<body>
55-
<header>
56-
<h1>Product Pick</h1>
57-
</header>
58-
<main>
59-
<form>
60-
<!-- Name -->
61-
<div>
62-
<label for="name">Name</label>
63-
<input
64-
id="name"
65-
name="name"
66-
type="text"
67-
required
68-
pattern=".*\S.*\S.*"
69-
>
70-
</div>
71-
72-
<!-- Email -->
73-
<div>
74-
<label for="email">E-mail</label>
75-
<input
76-
id="email"
77-
name="email"
78-
type="email"
79-
required
80-
>
81-
</div>
82-
83-
<!-- Colour -->
84-
<fieldset>
85-
<legend>Colour</legend>
86-
87-
<label>
88-
<input type="radio" name="colour" value="red" required>
89-
Red
90-
</label>
91-
92-
<label>
93-
<input type="radio" name="colour" value="blue">
94-
Blue
95-
</label>
96-
97-
<label>
98-
<input type="radio" name="colour" value="green">
99-
Green
100-
</fieldset>
101-
102-
<!-- Size -->
103-
<div>
104-
<label for="size">Size</label>
105-
<select id="size" name="size" required>
106-
<option value="">-- Please choose --</option>
107-
<option>XS</option>
108-
<option>S</option>
109-
<option>M</option>
110-
<option>L</option>
111-
<option>XL</option>
112-
<option>XXL</option>
113-
</select>
114-
</div>
115-
116-
<!-- Submit button -->
117-
<div>
118-
<button type="submit">Submit</button>
119-
</div>
120-
</form>
121-
</main>
122-
123-
<footer>
124-
<!-- change to your name-->
125-
<p>By HOMEWORK SOLUTION</p>
126-
</footer>
127-
</body>
128-
</html>
54+
</head>
55+
56+
<body>
57+
<header>
58+
<h1>Product Pick</h1>
59+
</header>
60+
<main>
61+
<form>
62+
<!-- Name -->
63+
<div>
64+
<label for="name">Name</label>
65+
<input id="name" name="name" type="text" required pattern=".*\S.*\S.*">
66+
</div>
67+
68+
<!-- Email -->
69+
<div>
70+
<label for="email">E-mail</label>
71+
<input id="email" name="email" type="email" required>
72+
</div>
73+
74+
<!-- Colour -->
75+
<fieldset>
76+
<legend>Colour</legend>
77+
78+
<label>
79+
<input type="radio" name="colour" value="red" required>
80+
Red
81+
</label>
82+
83+
<label>
84+
<input type="radio" name="colour" value="blue">
85+
Blue
86+
</label>
87+
88+
<label>
89+
<input type="radio" name="colour" value="green">
90+
Green
91+
</fieldset>
92+
93+
<!-- Size -->
94+
<div>
95+
<label for="size">Size</label>
96+
<select id="size" name="size" required>
97+
<option value="">-- Please choose --</option>
98+
<option>XS</option>
99+
<option>S</option>
100+
<option>M</option>
101+
<option>L</option>
102+
<option>XL</option>
103+
<option>XXL</option>
104+
</select>
105+
</div>
106+
107+
<!-- Submit button -->
108+
<div>
109+
<button type="submit">Submit</button>
110+
</div>
111+
</form>
112+
</main>
113+
114+
<footer>
115+
<!-- change to your name-->
116+
<p>By MR FRANCESCO ROMANO MONDA</p>
117+
</footer>
118+
</body>
119+
120+
</html>

0 commit comments

Comments
 (0)