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 all 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
38 changes: 30 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,46 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="description" content="Choose your preferred T-shirt color and size." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<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-->
<form method="get">

@cjyuan cjyuan Sep 17, 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 introduce the method="get" attribute explicitly?

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

GET is useful to search or view information, VS code made me add it and then later I realised it wasn't needed.

<!-- 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>

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

<!-- fieldset for tshirt size-->
<fieldset>
<legend>T-Shirt Size</legend>
<label><input type="radio" name="tshirt-size" value="extra-small" required>XS</label><br>
<label><input type="radio" name="tshirt-size" value="small">S</label><br>
<label><input type="radio" name="tshirt-size" value="medium">M</label><br>
<label><input type="radio" name="tshirt-size" value="large">L</label><br>
<label><input type="radio" name="tshirt-size" value="extra-large">XL</label><br>
<label><input type="radio" name="tshirt-size" value="double-extra-large">XXL</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