Skip to content

Commit 1e40348

Browse files
Monsur0001Monsur0001
committed
Syling in Progress
1 parent 898c120 commit 1e40348

2 files changed

Lines changed: 79 additions & 24 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7-
<meta name="form controls" content="an exercise on the understanding of form controls" />
7+
<meta
8+
name="form controls"
9+
content="an exercise on the understanding of form controls"
10+
/>
811
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" href="styles.css">
12+
<link rel="stylesheet" href="styles.css" />
1013
</head>
1114
<body>
1215
<header>
@@ -21,11 +24,23 @@ <h1>T-Shirt Product Pick</h1>
2124

2225
<div>
2326
<label for="name">Name</label>
24-
<input type="text" name="name" id="name" placeholder="Monsur Abdulrahman" required>
27+
<input
28+
type="text"
29+
name="name"
30+
id="name"
31+
placeholder="Monsur Abdulrahman"
32+
required
33+
/>
2534
</div>
2635
<div>
2736
<label for="email">Email</label>
28-
<input type="email" email="email" id="email" placeholder="monsur@gmail.com" required>
37+
<input
38+
type="email"
39+
email="email"
40+
id="email"
41+
placeholder="monsur@gmail.com"
42+
required
43+
/>
2944
</div>
3045
<div>
3146
<label for="color">T-Shirt Color</label>
@@ -36,38 +51,36 @@ <h1>T-Shirt Product Pick</h1>
3651
</select>
3752
</div>
3853
<div>
39-
Size
40-
<div>
54+
<fieldset>
55+
<Legend>Size</Legend>
56+
57+
<div class="size-option">
4158
<label for="xs">XS</label>
42-
<input type="radio" name="size" id="xs" required>
43-
59+
<input type="radio" name="size" id="xs" required />
4460
</div>
45-
<div>
61+
<div class="size-option">
4662
<label for="s">S</label>
47-
<input type="radio" name="size" id="s" value="S">
63+
<input type="radio" name="size" id="s" value="S" />
4864
</div>
49-
<div>
65+
<div class="size-option">
5066
<label for="m">M</label>
51-
<input type="radio" name="size" id="m" value="M">
52-
67+
<input type="radio" name="size" id="m" value="M" />
5368
</div>
54-
<div>
69+
<div class="size-option">
5570
<label for="l">L</label>
56-
<input type="radio" name="size" id="l" value="L">
57-
71+
<input type="radio" name="size" id="l" value="L" />
5872
</div>
59-
<div>
73+
<div class="size-option">
6074
<label for="xl">XL</label>
61-
<input type="radio" name="size" id="xl" value="XL">
62-
75+
<input type="radio" name="size" id="xl" value="XL" />
6376
</div>
64-
<div>
77+
<div class="size-option">
6578
<label for="xxl">XXL</label>
66-
<input type="radio" name="size" id="xxl" value="XXL">
67-
79+
<input type="radio" name="size" id="xxl" value="XXL" />
6880
</div>
81+
</fieldset>
6982
</div>
70-
<button type="submit">Submit</button>
83+
<button type="submit">Submit</button>
7184
</form>
7285
</main>
7386
<footer>

‎Form-Controls/styles.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
main {
6+
max-width: 400px;
7+
margin: 50px auto;
8+
padding: 20px;
9+
background-color: aliceblue;
10+
border-radius: 10px;
11+
box-shadow: 0 4px 6px;
12+
13+
}
14+
15+
label {
16+
display: block;
17+
margin-bottom: 8px;
18+
font-weight: bold;
19+
}
20+
21+
input,
22+
select {
23+
width: 100%;
24+
padding: 10px;
25+
margin-bottom: 20px;
26+
border: 1px solid black;
27+
border-radius: 5px;
28+
29+
}
30+
31+
.size-option {
32+
display: flex;
33+
align-items: center;
34+
gap: 5px;
35+
margin-bottom: 5px;
36+
37+
}
38+
39+
input [type="radio"] {
40+
width: auto;
41+
margin-bottom: 0;
42+
}

0 commit comments

Comments
 (0)