Skip to content

Manchester | 25-ITP-Sep | Fatima Rouchi | Sprint 1 | Form Controls #1492

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

Manchester | 25-ITP-Sep | Fatima Rouchi | Sprint 1 | Form Controls #1492

Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
70fadbd
ADD label name
fatimarouchi Sep 10, 2026
a8221e6
Add label email
fatimarouchi Sep 10, 2026
f4006e4
Add fieldset for T-shirt color
fatimarouchi Sep 10, 2026
0cb0ba4
add fieldset for tshirt size
fatimarouchi Sep 10, 2026
1e9d2a1
Add fielset size and submit button
fatimarouchi Sep 10, 2026
8dcf268
Change footer name
fatimarouchi Sep 10, 2026
b9f5a28
Correct submit button
fatimarouchi Sep 10, 2026
397c84e
Change checkboxes to radio buttons
fatimarouchi Sep 16, 2026
6c73392
removed required attribute from the radio buttons
fatimarouchi Sep 17, 2026
748213c
remove id attributes from radio buttons
fatimarouchi Sep 17, 2026
420b6a5
add method and action to form tag
fatimarouchi Sep 17, 2026
2c6ca50
remove the "action" attribute from the form tag
fatimarouchi Sep 17, 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
33 changes: 27 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,36 @@ <h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!-- label for the name input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern=".*\S.*\S.*"><br><br>

<!-- label for the email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

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

Note: Chrome Developer Tools and AI tools may provide useful insights into how we can further improve our implementation. While you are not required to follow their suggestions in every exercise, taking the time to consider them can often help us learn more effectively.

Here's an example,

Image


<!--fieldset for tshirt color-->
<fieldset>
<legend>T-Shirt Color</legend>
<label><input type="radio" id="red" name="tshirt-color" value="red" required>Red</label><br>
<label><input type="radio" id="blue" name="tshirt-color" value="blue" required>Blue</label><br>
<label><input type="radio" id="green" name="tshirt-color" value="green" required>Green</label><br>

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

Indentation is slightly off.

Suggestion:

  • Look up the benefits of using a code formatter.
  • Install the Prettier extension for VS Code, then:
    • Use VS Code's Format Document feature to format your code.
    • Optionally, enable Format On Save and Format On Paste to keep your code consistently formatted.

Resource: Visual Studio Code - Formatting

Note: The formatter may not work correctly if your code contains syntax errors.

</fieldset><br>

<!-- fieldset for tshirt size-->
<fieldset>
<legend>T-Shirt Size</legend>
<label><input type="checkbox" id="extra-small" name="tshirt-size" value="extra-small" required>XS</label><br>
<label><input type="checkbox" id="small" name="tshirt-size" value="small" required>S</label><br>
<label><input type="checkbox" id="medium" name="tshirt-size" value="medium" required>M</label><br>
<label><input type="checkbox" id="large" name="tshirt-size" value="large" required>L</label><br>
<label><input type="checkbox" id="extra-large" name="tshirt-size" value="extra-large" required>XL</label><br>
</fieldset><br>
Comment on lines +26 to +41

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

  • Why use type="radio" for T-Shirt color, and type="checkbox" for T-Shirt size?

  • Also, try using AI to find out how we could simplify the markup for radio buttons.

@fatimarouchi fatimarouchi Sep 17, 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.

Thank you for your feedback, hopefully I managed to correct the mistakes.

<button type="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By FATIMA ROUCHI</p>
</footer>
</body>
</html>
Loading