Skip to content

London | 26-ITP-SEP | Sakiya Mayow | Sprint 1 | Form Controls #1500

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
zakiaao-tech wants to merge 12 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-SEP | Sakiya Mayow | Sprint 1 | Form Controls #1500

Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a9b5770
Initial commit
zakiaao-tech Sep 11, 2026
5c1e178
Added name and email validation to form in index.html
zakiaao-tech Sep 11, 2026
f9437e6
Added colour, size for validation to form in index.html
zakiaao-tech Sep 11, 2026
6a476a1
Changed label and removed Last name and <legend>
zakiaao-tech Sep 14, 2026
7db0e90
Removed submit button from email
zakiaao-tech Sep 14, 2026
54ded4f
Removed spaces in id and name
zakiaao-tech Sep 14, 2026
98961ad
left one submit button at the end and removed unnecessary spaces
zakiaao-tech Sep 14, 2026
43145a0
Ran prettier to format document
zakiaao-tech Sep 14, 2026
0dff25d
Removed trailing slash on br and regex, added =" to regex as required…
zakiaao-tech Sep 14, 2026
39bfc0d
Made sure that the for on the labels is matching
zakiaao-tech Sep 14, 2026
9e4795c
cleaned up
zakiaao-tech Sep 14, 2026
f95b8bd
Fixed / > endings and x ticking boxes in README checklist
zakiaao-tech Sep 14, 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
52 changes: 52 additions & 0 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,58 @@ <h1>Product Pick</h1>
<main>
<form>
<!-- write your html here-->
<div>
<legend>Customer details</legend>

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

<legend> is only valid inside one particular element, and it isn't <div>. Which element groups a set of fields and takes a legend? The MDN page from the prep on structuring a form shows it.

<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" required .*\S.*\S.*> <br>

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

The regex from the README is sitting here as an attribute on its own, so the browser ignores it. Which attribute is it meant to be the value of? I typed two spaces into this field on the deploy preview and it passed. Also the task asks for one name field, not first and last.

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

One name field now, good. The regex is still a bare attribute though, so this one is still open. See the new comment on line 23.

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

Fixed now, and two spaces are rejected. Good.

<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" required>
<button type="Submit">Submit</button>

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

There are four Submit buttons in this form, and one of them is inside the <select>. A form needs one. Where should it go?

</div>

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

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

Missing space between type="email" and name="email". The formatter will fix this one.

@zakiaao-tech zakiaao-tech Sep 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I received all your feedback and I have completed the corrections, and I will definitely create branch next time. Thank you !

<button type="Submit">Submit</button>

</div>

<div>
<label for="T-shirt colour">Select one T-shirt colour:</label>

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

for="T-shirt colour" but the select below is now id="T-shirt-colour". They have to match exactly. Same on line 44.

<select name="T-shirt colour" id="T-shirt colour" required>

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

An id can't contain spaces, and a name shouldn't either. Try submitting the form and look at what appears in the address bar for this field.

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

Ids and names fixed. The for on the labels wasn't updated to match, so they've come apart. See the comment on line 34.

@abdishakoor-dev abdishakoor-dev Sep 14, 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.

Matching now. Good.

<option value="">Choose one colour</option>
<option>Black</option>
<option>Navy blue</option>
<option>Grey</option>
</select>

<button type="Submit">Submit</button>
</div>

<div>
<label for="T-shirt Size">Select one size:</label>
<select name="T-shirt Size" id="T-shirt Size" required>
<option value=""> Choose one size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>

<button type="Submit">Submit</button>
</select>

</div>









<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
Expand Down
Loading