Skip to content

London | 26-ITP-May | Gideon Defar | Sprint 1 | Form Control#1289

Open
gideondefar wants to merge 10 commits into
CodeYourFuture:mainfrom
gideondefar:feature/form-control
Open

London | 26-ITP-May | Gideon Defar | Sprint 1 | Form Control#1289
gideondefar wants to merge 10 commits into
CodeYourFuture:mainfrom
gideondefar:feature/form-control

Conversation

@gideondefar
Copy link
Copy Markdown

Learners, PR Template

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

Changelist

I created a form control in HTML and checked the accessibility.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 16, 2026

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit a33f433
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a085d61170f670008c4f38e
😎 Deploy Preview https://deploy-preview-1289--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: 91 (🟢 up 5 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.

@github-actions

This comment has been minimized.

@gideondefar gideondefar added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 16, 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 May 16, 2026
Copy link
Copy Markdown
Author

@gideondefar gideondefar left a comment

Choose a reason for hiding this comment

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

changed wireframe

@gideondefar gideondefar added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. 📅 Sprint 1 Assigned during Sprint 1 of this module labels May 16, 2026
Comment thread Form-Controls/index.html
<p>
<label for="customerName">Name:</label>
<input type="text" id="customerName" name="customerName" required minlength="2"
pattern=".*\S.*" placeholder="Enter your full name">
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.

Can you change the pattern so that it can reject names like "A " or " A"? (Name with only one non-space character but with many space characters)

Comment thread Form-Controls/index.html
Comment on lines +28 to +30
<input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com"
pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$"
title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
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.

Why specify the pattern when the input type is "email"? What difference does the pattern make?

When I tested the form, the input field still accepts "a@a" as a valid email.

Comment thread Form-Controls/index.html
Comment on lines +37 to +38
<input type="radio" id="colourRed" name="shirtColour" value="red" required>
<label for="colourRed">Red</label>
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.

id values should follow the "kebab-case" naming convention. For example: color-red.

Note: If you wrap <input> inside <label>, you would not need to introduce id.

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 17, 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. 📅 Sprint 1 Assigned during Sprint 1 of this module

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants