London | January 2026 | Ihor Taradaiko | Sprint 2 | Form Controls by ihortar · Pull Request #1040 · CodeYourFuture/Module-Onboarding

ihortar · 2026-01-24T14:43:00Z

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

My form is semantic html.
All inputs have associated labels.
My Lighthouse Accessibility score is 100.
I require a valid name. I have defined a valid name as a text string of two characters or more.
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.

netlify · 2026-01-24T14:43:06Z

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	`2ce19c9`
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6984e851ad4338000838c48c
😎 Deploy Preview	https://deploy-preview-1040--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
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

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

cjyuan

According to https://validator.w3.org/, there are errors in your code. Can you fix them?
Have you tested the form? That is, try to submit the form with different input, including both valid and invalid input.

cjyuan · 2026-02-02T20:46:52Z

Form-Controls/index.html

+</form>
    </main>
    <footer>


Can you improve the indentation?

VSCode's "Format Document" feature can help us format our code for better readability and consistency.
To use the feature, right-click inside the code editor and select the option.
Please note that if there are syntax errors in the code, the "Prettier" extension may not format HTML code properly.

cjyuan · 2026-02-02T20:54:14Z

Form-Controls/index.html

+  />
+  </p>
+    <p>
+    <label for="r2">What's your email address?*</label>


Can you use AI to find out why it is not a good practice to use names like r2, r3, c1foridandclass` in HTML, and update them accordingly?

cjyuan · 2026-02-02T21:01:54Z

Form-Controls/index.html

+    required
+    minlength="3"
+    maxlength="30"
+    pattern="[A-Za-z ]+"


Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter pattern to reject any name containing only space characters?

cjyuan · 2026-02-02T21:04:19Z

Form-Controls/index.html

+    <input type="text"
+    name="color"
+    placeholder="Color"
+    required
+    list="c1"
+    />
+    <datalist id="c1">
+      <option>Yellow</option>
+      <option>Blue</option>
+      <option>White</option>
+    </datalist>
+  </p>


Currently a user can enter a value that is not in the list. For example, "ABCDEF".

ihortar · 2026-02-05T10:59:08Z

Hi @cjyuan
Thank you for checking my PR!
I appreciate all the hints (I was looking for a button like "beautify" in Postman, but could not find it)
I have fixed the code and tested the form, it works as expected now.
Please check when available.
Thank you.

cjyuan

The code in index.html is incomplete -- it would not pass the validation on https://validator.w3.org/.

cjyuan · 2026-02-05T17:56:44Z

Form-Controls/index.html

+    <input type="text" id="color" name="color" placeholder="Color" list="color-options" pattern="Yellow|Blue|White"
+      required />
+    <datalist id="color-options">
+      <option>Yellow</option>
+      <option>Blue</option>
+      <option>White</option>
+    </datalist>


Why not use <select> element to create the drop-down list?

With your current implementation, the input field seems to invite a different value but it does not. When a value not on the list is entered, it only gives the message "Please match the requested format", which does not explain what "format" is expected.

@cjyuan to be honest, I thought it's nice to be able to not just select the color from the list but also to select it by typing the text.
Since in the task, the only requirement was to select only one color/size I thought it worked fine.

Fixed the code and validated that it does not show any errors.

I am mentioning this to raise a design issue, and it is just a suggestion.

On one hand, if we let the user type the input freely, they could enter some weird value.
On the other hand, if we restrict (using pattern) the possible input to just three possible values, why not just let them choose one of the three colors?

In the task the user had to be able to choose one of three colors, imho, datalist worked just fine.
I do understand what you meant, but it just fits the requirements.
With the form is definitely more straightforward.

I forgot the mention the accessibility issue between using "select" and using "input+datalist". People who needs a screen reader to access a webpage can "see" them differently. For former indicates, "choose one of N options", the latter may indicate "enter text here freely".

cjyuan · 2026-02-05T19:33:54Z

Changes look good. Well done.

ihortar added 2 commits January 24, 2026 14:14

Completed form

19fabaf

editied form

4afcffe

ihortar added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026

ihortar marked this pull request as ready for review January 24, 2026 14:43

This was referenced Jan 24, 2026

January 2026 | Onboarding | Ihor Taradaiko (IN PROGRESS) ihortar/My-Coursework-Planner#27

Open

January 2026 | Onboarding | Ihor Taradaiko ihortar/My-Coursework-Planner#41

Open

cjyuan 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 Feb 2, 2026

cjyuan reviewed Feb 2, 2026

View reviewed changes

cjyuan 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 Feb 2, 2026

ihortar added 4 commits February 5, 2026 10:48

Found errors in code and fixed / changed id&class values

f3f0745

Changed pattern for "name"

a3fd56a

added pattern to "color"

cc8501a

Beautified

bf06264

ihortar added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 5, 2026

cjyuan reviewed Feb 5, 2026

View reviewed changes

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 5, 2026

Changes to code ( added doctype, title / fixed forms using <select>)

2ce19c9

ihortar added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Feb 5, 2026

Uh oh!

Conversation

ihortar commented Jan 24, 2026

Changelist

Uh oh!

netlify bot commented Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-onboarding-module ready!

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ihortar commented Feb 5, 2026

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjyuan commented Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jan 24, 2026 •

edited

Loading