Skip to content

Commit 3b580ae

Browse files
serveyanoserveyano
committed
Remove Form-Controls files from wireframe PR
1 parent 64b8d7e commit 3b580ae

2 files changed

Lines changed: 99 additions & 0 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Form Controls
2+
3+
## Learning Objectives
4+
5+
<!--{{<objectives>}}>-->
6+
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
13+
<!--{{<objectives>}}>-->
14+
15+
## Task
16+
17+
We are selling T-shirts. Write a form to collect the following data:
18+
19+
Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size.
20+
21+
Writing that out as a series of questions to ask yourself:
22+
23+
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
24+
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
25+
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
26+
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
27+
28+
All fields are required.
29+
Do not write a form action for this project.
30+
31+
> [!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+
>
34+
> 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!
35+
36+
## Acceptance Criteria
37+
38+
### Developers must test their work.
39+
40+
Let's write out our testable criteria. Check each one off as you complete it.
41+
42+
- [ ] I have only used HTML and CSS.
43+
- [ ] I have not used any JavaScript.
44+
45+
### HTML
46+
47+
- [ ] My form is semantic HTML.
48+
- [ ] All inputs have associated labels.
49+
- [ ] My Lighthouse Accessibility score is 100.
50+
- [ ] I require a valid name.
51+
- [ ] I require a valid email.
52+
- [ ] I require one colour from a defined set of 3 colours.
53+
- [ ] I require one size from a defined set of 6 sizes.
54+
55+
### Developers must adhere to professional standards.
56+
57+
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
58+
59+
These practices reflect the level of quality expected in professional work.
60+
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
61+
62+
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
63+
- [ ] My code is consistently formatted
64+
- [ ] My page content is free of typos and grammatical mistakes
65+
- [ ] I commit often and push regularly to GitHub
66+
67+
## Resources
68+
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
69+
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
70+
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
71+
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
72+
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Form-Controls/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<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+
</head>
10+
<body>
11+
<header>
12+
<h1>Product Pick</h1>
13+
</header>
14+
<main>
15+
<form>
16+
<!-- write your html here-->
17+
<!--
18+
try writing out the requirements first as comments
19+
this will also help you fill in your PR message later-->
20+
</form>
21+
</main>
22+
<footer>
23+
<!-- change to your name-->
24+
<p>By HOMEWORK SOLUTION</p>
25+
</footer>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)