Skip to content

Commit cc4da2c

Browse files
Frumentius-RevFrumentius-Rev
committed
format form controls
1 parent 63c37cd commit cc4da2c

3 files changed

Lines changed: 59 additions & 52 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- [ ] Refactor using Devtools
1111
- [ ] Use version control by committing often and pushing regularly to GitHub
1212
- [ ] Develop the habit of writing clean, well-structured, and error-free code
13+
1314
<!--{{<objectives>}}>-->
1415

1516
## Task
@@ -29,7 +30,7 @@ All fields are required.
2930
Do not write a form action for this project.
3031

3132
> [!TIP]
32-
> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`.
33+
> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`.
3334
>
3435
> Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form!
3536
@@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
4748
- [ ] My form is semantic HTML.
4849
- [ ] All inputs have associated labels.
4950
- [ ] My Lighthouse Accessibility score is 100.
50-
- [ ] I require a valid name.
51+
- [ ] I require a valid name.
5152
- [ ] I require a valid email.
5253
- [ ] I require one colour from a defined set of 3 colours.
5354
- [ ] I require one size from a defined set of 6 sizes.
@@ -65,6 +66,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
6566
- [ ] I commit often and push regularly to GitHub
6667

6768
## Resources
69+
6870
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
6971
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
7072
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

‎Form-Controls/index.html‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
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>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="style.css" />
1010
</head>
1111
<body>
1212
<header>
@@ -16,43 +16,52 @@ <h1>Product Pick</h1>
1616
<form>
1717
<div>
1818
<label for="name">Name:</label>
19-
<input type="text" name="name" id="name" pattern=".*\S.*\S.*" required>
19+
<input
20+
type="text"
21+
name="name"
22+
id="name"
23+
pattern=".*\S.*\S.*"
24+
required
25+
/>
2026
</div>
21-
27+
2228
<div>
2329
<label for="email">Email:</label>
24-
<input type="email" name="email" id="email" placeholder="cyftrainee@gmail.com" required>
30+
<input
31+
type="email"
32+
name="email"
33+
id="email"
34+
placeholder="cyftrainee@gmail.com"
35+
required
36+
/>
2537
</div>
2638

2739
<fieldset>
2840
<legend>T-Shirt Colour</legend>
2941

30-
<label for="white">White</label>
31-
<input type="radio" name="colour" id="white" value="white" required>
32-
33-
<label for="black">Black</label>
34-
<input type="radio" name="colour" id="black" value="black" required>
42+
<label for="white">White</label>
43+
<input type="radio" name="colour" id="white" value="white" required />
3544

36-
<label for="blue">Blue</label>
37-
<input type="radio" name="colour" id="blue" value="blue" required>
45+
<label for="black">Black</label>
46+
<input type="radio" name="colour" id="black" value="black" required />
3847

39-
</fieldset>
48+
<label for="blue">Blue</label>
49+
<input type="radio" name="colour" id="blue" value="blue" required />
50+
</fieldset>
4051

4152
<div>
4253
<label for="size">T-shirt Size</label>
4354
<select name="size" id="size" required>
44-
45-
<option value=""disabled selected>Choose</option>
55+
<option value="" disabled selected>Choose</option>
4656
<option value="xs">XS</option>
4757
<option value="s">S</option>
4858
<option value="m">M</option>
4959
<option value="l">L</option>
5060
<option value="xl">XL</option>
5161
<option value="xxl">XXL</option>
52-
5362
</select>
5463
</div>
55-
64+
5665
<button type="Submit">Submit</button>
5766
</form>
5867
</main>

‎Form-Controls/style.css‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,54 @@
11
* {
2-
box-sizing: border-box;
2+
box-sizing: border-box;
33
}
44

55
body {
6-
font-family: Arial, sans-serif;
7-
max-width: 340px;
8-
margin: 40px auto;
6+
font-family: Arial, sans-serif;
7+
max-width: 340px;
8+
margin: 40px auto;
99
}
1010

1111
form {
12-
display: flex;
13-
flex-direction: column;
14-
gap: 8px;
15-
background: #f5f5f5;
16-
padding: 20px;
17-
box-sizing: border-box;
18-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
19-
border-radius: 12px;
12+
display: flex;
13+
flex-direction: column;
14+
gap: 8px;
15+
background: #f5f5f5;
16+
padding: 20px;
17+
box-sizing: border-box;
18+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
19+
border-radius: 12px;
2020
}
2121

2222
input[type="text"],
2323
input[type="email"] {
24-
width: 280px;
25-
24+
width: 280px;
2625
}
2726

2827
fieldset {
29-
width: 280px;
30-
padding: 10px;
31-
border-radius: 8px;
28+
width: 280px;
29+
padding: 10px;
30+
border-radius: 8px;
3231
}
3332

3433
input,
3534
select {
36-
padding: 10px;
37-
margin-top: 5px;
38-
35+
padding: 10px;
36+
margin-top: 5px;
3937
}
4038

4139
button {
42-
width: 120px;
43-
padding: 10px;
44-
border-radius: 6px;
45-
display: block;
46-
margin: 8px auto 0;
47-
border:none;
48-
background-color: rgb(44, 44, 247);
49-
color: white;
50-
cursor: pointer;
51-
transition: background-color 0.3s ease;
52-
40+
width: 120px;
41+
padding: 10px;
42+
border-radius: 6px;
43+
display: block;
44+
margin: 8px auto 0;
45+
border: none;
46+
background-color: rgb(44, 44, 247);
47+
color: white;
48+
cursor: pointer;
49+
transition: background-color 0.3s ease;
5350
}
5451

5552
button:hover {
56-
background-color: rgb(65, 74, 206);
57-
53+
background-color: rgb(65, 74, 206);
5854
}

0 commit comments

Comments
 (0)