Skip to content

Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls #1506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Alaterry8 wants to merge 8 commits into
base: main
Choose a base branch
from
+75 −28
Open

Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls #1506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
37961e3
Add name field
Alaterry8 Sep 11, 2026
e040675
Add Email field
Alaterry8 Sep 12, 2026
2209ca4
Add colour selector
Alaterry8 Sep 12, 2026
98a1815
Add size selector
Alaterry8 Sep 12, 2026
91005b6
Add submit button
Alaterry8 Sep 12, 2026
61dcc8b
Add name to footer
Alaterry8 Sep 12, 2026
049784b
Apply lighthouse fixes
Alaterry8 Sep 12, 2026
5c1bcb2
tick all requirements
Alaterry8 Sep 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 21 additions & 20 deletions Form-Controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

<!--{{<objectives>}}>-->

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

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

> [!TIP]
> 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.*`.
> 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.*`.
>
> 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!

Expand All @@ -39,18 +39,18 @@ Do not write a form action for this project.

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

- [ ] I have only used HTML and CSS.
- [ ] I have not used any JavaScript.
- [x] I have only used HTML and CSS.
- [x] I have not used any JavaScript.

### HTML

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

### Developers must adhere to professional standards.

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

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

## Resources

- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
Expand Down
62 changes: 54 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand All @@ -12,16 +12,62 @@
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<form class="form">
<label for="name">Name:</label>
<input type="text" name="name" id="name" minlength="2" required />

@Liam310 Liam310 Sep 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minlength is a useful attribute, but it doesn't do exactly what is being asked by the instructions for this task. Have a read of the instructions again for what the requirement is for validating the name input (and read the tip that helps you figure out how to attack it!)


<br /><br />

<label for="email"> Email:</label>
<input type="email" name="email" id="email" required />

<br /><br />

<label for="colour"> Colour: </label>
<select name="colour" id="colour" required>
<option value="select" selected disabled>Select</option>

@Liam310 Liam310 Sep 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a nice user experience to have a placeholder option in a select like you have here, and it's almost there but not quite. It's great that used selected and disabled on this, but at the moment something else isn't quite right because I'm still able to submit the form without changing this drop down at all, which isn't what we want. I should have to choose an actual colour.

Have a look at the MDN documentation for select. What have they done in their example that's different? Why does that matter?

<option value="red">Red</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>

<br /><br />

<fieldset>
<legend>Size</legend>

<label for="XS">XS</label>
<input type="radio" name="size" id="XS" value="XS" required />
<br /><br />

<label for="S">S</label>
<input type="radio" name="size" id="S" value="S" />
<br /><br />

<label for="M">M</label>
<input type="radio" name="size" id="M" value="M" />
<br /><br />

<label for="L">L</label>
<input type="radio" name="size" id="L" value="L" />
<br /><br />

<label for="XL">XL</label>
<input type="radio" name="size" id="XL" value="XL" />
<br /><br />

<label for="XXL">XXL</label>
<input type="radio" name="size" id="XXL" value="XXL" />
<br /><br />
</fieldset>

<br /><br />

@Liam310 Liam310 Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see you've used br a lot here to create space between the different form elements. This is a neat trick, but is actually not what it is supposed to be used for. To quote MDN:

The <br> element has a single, well-defined purpose — to create a line break in a block of text.

If you are adding spacing between elements on a page, that's exactly what CSS is for. Shortcuts like this can seem useful but they run the risk of causing unexpected confusion for assistive technologies when used out of place!

Note: styling is not required for this task. I'm not going to require you to change anything on this point, but bear in mind for future that you should avoid using br tags for this reason 🙂


<button type="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>Ahmed Elmahmoudi</p>
</footer>
</body>
</html>
Loading