Skip to content

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

Open
Alaterry8 wants to merge 8 commits into
CodeYourFuture:mainfrom
Alaterry8:feature/form-controls
Open

Alaterry8 wants to merge 8 commits into
CodeYourFuture:mainfrom
Alaterry8:feature/form-controls

Conversation

@Alaterry8

@Alaterry8 Alaterry8 commented Sep 12, 2026

Copy link
Copy Markdown

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Task ID: CYF-1004

Changelist

  • Added a name field
  • Added an email field
  • Added a colour selector
  • Added a size option selector
  • Tested accessibility on lighthouse using Dev tools

I agree to follow the code of conduct for this organisation.

@netlify

netlify Bot commented Sep 12, 2026

Copy link
Copy Markdown

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 5c1bcb2
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6aa568a881bc5300083c9ad0
😎 Deploy Preview https://deploy-preview-1506--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@Alaterry8 Alaterry8 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 12, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 12, 2026
@github-actions

This comment has been minimized.

@Alaterry8 Alaterry8 changed the title Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls/CYF-0000 Sep 12, 2026
@github-actions

This comment has been minimized.

@Alaterry8 Alaterry8 changed the title Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls/CYF-0000 Manchester | 26-ITP-Sep | Ahmed Elmahmoudi | Sprint 1 | Form controls Sep 12, 2026
@Alaterry8 Alaterry8 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Sep 13, 2026
@Liam310 Liam310 added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Sep 14, 2026
Comment thread Form-Controls/index.html
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 />

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!)

Comment thread Form-Controls/index.html

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

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?

Comment thread Form-Controls/index.html
<br /><br />
</fieldset>

<br /><br />

@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.

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 🙂

@Liam310

Liam310 commented Sep 15, 2026

Copy link
Copy Markdown
Contributor

Hey @Alaterry8! You've showcased a good understanding of some appropriate choices for form elements here along with a good start with validating the inputs. As it stands, there are still a couple of inputs that are considered valid when they shouldn't be. Have a read of comments and see what you think!

@Liam310 Liam310 added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels Sep 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Reviewed Volunteer to add when completing a review with trainee action still to take.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants