Skip to content

Glasgow | ITP January-2026| Tuan Nguyen | Sprint 1| Form control #1103

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

Closed
Jacknguyen4438 wants to merge 14 commits into from
Closed

Glasgow | ITP January-2026| Tuan Nguyen | Sprint 1| Form control #1103

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e8bbf03
Creating and adding input for the user
Jacknguyen4438 Jan 31, 2026
6ab6dd5
Doing required check on task need to be done
Jacknguyen4438 Jan 31, 2026
2b6606d
Nesting select and option inside the parent label to help with acces…
Jacknguyen4438 Jan 31, 2026
ee353eb
Doing some attribute to some input and adding check to learning object
Jacknguyen4438 Jan 31, 2026
e6ac02a
Merge branch 'CodeYourFuture:main' into Form-control-work
Jacknguyen4438 Jan 31, 2026
5e42f93
Making some improvement after reading some review comment. Fix some e…
Jacknguyen4438 Feb 12, 2026
7b5e8cc
Merge branch 'Form-control-work' of https://github.com/Jacknguyen4438…
Jacknguyen4438 Feb 12, 2026
8d1277c
Remove comment for easier reading, changing the footer tags for bette…
Jacknguyen4438 Feb 12, 2026
205ba3b
fixing some grammar error and change fit with the course work criteria
Jacknguyen4438 Feb 12, 2026
9c5a249
Small change to the radio button
Jacknguyen4438 Feb 12, 2026
7ec34c7
adding require attribute to radio input
Jacknguyen4438 Feb 12, 2026
978ad11
Make some change to for attribute and it value lower case.
Jacknguyen4438 Feb 12, 2026
9d9847f
Make some change for the rest of all attribute value.
Jacknguyen4438 Feb 12, 2026
ba8b66c
minor change some id and label link
Jacknguyen4438 Feb 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
24 changes: 12 additions & 12 deletions Form-Controls/README.md
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

Can you review the exercise requirements? Should there be changes in the README file?

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Feb 12, 2026

Choose a reason for hiding this comment

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

I have check the criteria and make some change. I am happy report that the change now fit with the course check list.

Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

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

- [ ] Interpret requirements and check against a list of criteria
- [ ] Write a valid form
- [ ] Test with Devtools
- [ ] Refactor using Devtools
- [x] Interpret requirements and check against a list of criteria
- [x] Write a valid form
- [x] Test with Devtools
- [x] Refactor using Devtools
<!--{{<objectives>}}>-->

## Task
Expand All @@ -30,18 +30,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 used HTML only.
- [x] I have used HTML only.
- [x] I have not used any CSS or JavaScript.

### HTML

- [ ] 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.
- [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. I have defined a valid name as a text string of two characters or more.
- [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.

## Resources

Expand Down
34 changes: 32 additions & 2 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>Glasgow style product form</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Expand All @@ -17,11 +17,41 @@ <h1>Product Pick</h1>
<!--
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

I think these comments can be removed since their intention was to help you complete the exercise. Comments in the code can be useful for:

  • Describing complex logic or workarounds
  • Explaining "why," not "what"
  • TODO notes for incomplete work

try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<div>
<label for="Name">Customer name:</label>
<input type="text" id="Name" name="Name" required placeholder="John Smith">
</div>
<br>
<div>
<label for="Email">Costumer email:</label>
<input type="email" id="Email" name="Email" required placeholder="example123@gmail.com">
</div>
<br>
<div>
<label for="Color">T-shirt color:</label>
<input type="color" id="Color" name=" Product color" required>
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

Wow 🤩, I really like this unique choice you made with the color picker. Very interesting.

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Feb 12, 2026

Choose a reason for hiding this comment

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

Thank you, I choose this because I I think is easier and provide the user choice more precise.

Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

I see a leading space in the name=" Product color". This could cause issues if the form was ever submitted for processing.

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Feb 12, 2026

Choose a reason for hiding this comment

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

Thank you for point this out, this is some gramma mistake I have fix this and it shouldn't be a problem.

</div>
<div>
<br>
<label for="Size">Shirt size
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

I see something missing on line 36. Can you find the problem?

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Feb 12, 2026

Choose a reason for hiding this comment

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

Yes I have check and see that is should be after size word and not nested the whole select element.

<select id="Size" name="Shirt size" required>
<option label="XS" value="XS"></option>
<option label="S" value="S"></option>
<option label="M" value="M"></option>
<option label="L" value="L"></option>
<option label="XL" value="XL"></option>
<option label="XXL" value="XXL"></option>
</select>
</label>
</div>
<br>
<button type="submit">Submit</button>
</form>
</main>
<hr>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Tuan Nguyen</h2>
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 6, 2026

Choose a reason for hiding this comment

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

I suggest using something other than <h2> in the footer. By using <h2> you are announcing a major section header within your footer.

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Feb 12, 2026

Choose a reason for hiding this comment

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

Thank you for the comment, I will find some other tag that are correct.

</footer>
</body>
</html>
Loading