Skip to content

Commit 5691b52

Browse files
lintsanglintsang
authored
Merge pull request #1 from lintsang/feature/form-controls
Pull request from Feature/form controls
2 parents ff7b9d0 + b1cdf63 commit 5691b52

3 files changed

Lines changed: 94 additions & 24 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
<!--{{<objectives>}}>-->
66

7-
- [ ] Interpret requirements and check against a list of criteria
8-
- [ ] Write a valid form
9-
- [ ] Test with Devtools
10-
- [ ] Refactor using Devtools
11-
- [ ] Use version control by committing often and pushing regularly to GitHub
12-
- [ ] Develop the habit of writing clean, well-structured, and error-free code
7+
- [x] Interpret requirements and check against a list of criteria
8+
- [x] Write a valid form
9+
- [x] Test with Devtools
10+
- [x] Refactor using Devtools
11+
- [x] Use version control by committing often and pushing regularly to GitHub
12+
- [x] Develop the habit of writing clean, well-structured, and error-free code
1313
<!--{{<objectives>}}>-->
1414

1515
## Task
@@ -34,18 +34,18 @@ Do not write a form action for this project.
3434

3535
Let's write out our testable criteria. Check each one off as you complete it.
3636

37-
- [ ] I have only used HTML and CSS.
38-
- [ ] I have not used any JavaScript.
37+
- [x] I have only used HTML and CSS.
38+
- [x] I have not used any JavaScript.
3939

4040
### HTML
4141

42-
- [ ] My form is semantic HTML.
43-
- [ ] All inputs have associated labels.
44-
- [ ] My Lighthouse Accessibility score is 100.
45-
- [ ] I require a valid name.
46-
- [ ] I require a valid email.
47-
- [ ] I require one colour from a defined set of 3 colours.
48-
- [ ] I require one size from a defined set of 6 sizes.
42+
- [x] My form is semantic HTML.
43+
- [x] All inputs have associated labels.
44+
- [x] My Lighthouse Accessibility score is 100.
45+
- [x] I require a valid name.
46+
- [x] I require a valid email.
47+
- [x] I require one colour from a defined set of 3 colours.
48+
- [x] I require one size from a defined set of 6 sizes.
4949

5050
### Developers must adhere to professional standards.
5151

@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
5454
These practices reflect the level of quality expected in professional work.
5555
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
5656

57-
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58-
- [ ] My code is consistently formatted
59-
- [ ] My page content is free of typos and grammatical mistakes
60-
- [ ] I commit often and push regularly to GitHub
57+
- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58+
- [x] My code is consistently formatted
59+
- [x] My page content is free of typos and grammatical mistakes
60+
- [x] I commit often and push regularly to GitHub
6161

6262
## Resources
6363
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)

‎Form-Controls/css/style.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
h1{
2+
font-family: 'Times New Roman', Times, serif;
3+
font-size: 1.5rem;
4+
}
5+
fieldset{
6+
background-color: #becce2;
7+
border: 2px solid #c0cde0;
8+
border-style: solid;
9+
border-radius: 0.5em;
10+
margin: 1em auto;
11+
padding: 1em;
12+
width: 40em;
13+
max-width: 800px;
14+
}
15+
16+
legend{
17+
color: #222;
18+
background-color: #f6f9ff;
19+
font-size: 90%;
20+
padding: 1em 2em;
21+
border: solid 1px #becce2;
22+
border-radius: 0.3em;
23+
24+
25+
}
26+
fieldset > div{
27+
padding: 0.5em 3em;
28+
display: grid;
29+
grid-template-columns: 2fr 4fr;
30+
}
31+
input, select, button{
32+
border: solid 1px #becce2;
33+
padding: 4px;
34+
font-size: 1em;
35+
border-radius: 0.3em;
36+
}

‎Form-Controls/index.html‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,59 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
6+
<title>My Sprint 1 form controls exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="css/style.css">
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<form>
16-
<!-- write your html here-->
17+
<fieldset>
18+
<legend>
19+
Person name and email</legend>
20+
<div class="form-group">
21+
<label for="fullname">Full Name:</label>
22+
<input type="text" id="fullname" required minlength="2">
23+
</div>
24+
<div class="form-group">
25+
<label for="email">Email:</label>
26+
<input type="email" id="email" required pattern="^.+@.+\..+$">
27+
</div>
28+
<div class="form-group">
29+
<label for="colour-pick">Choose T-shirt Colour:</label>
30+
<select id="colour-pick">
31+
<option value="white">White</option>
32+
<option value="black">Black</option>
33+
<option value="grey">Grey</option>
34+
</select>
35+
</div>
36+
<div class="form-group">
37+
<label for="size-pick">Choose T-shisrt Size</label>
38+
<select id="size-pick">
39+
<option value="xs">XS</option>
40+
<option value="s">S</option>
41+
<option value="m">M</option>
42+
<option value="l">L</option>
43+
<option value="xl">XL</option>
44+
<option value="xxl">XXL</option>
45+
</select>
46+
</div>
47+
<div class="form-group">
48+
<button type="submit">Submit</button>
49+
</div>
50+
</fieldset>
1751
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
52+
Create a form that can collect
53+
name, email, preferred tshirt colour and size from user-->
2054
</form>
2155
</main>
2256
<footer>
2357
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
58+
<p>By Lin Tsang</p>
2559
</footer>
2660
</body>
2761
</html>

0 commit comments

Comments
 (0)