Skip to content

Brussels |ITP-2025-1| Meysam Razagh | Week 2 |Form Controls #56

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
Epunch wants to merge 7 commits into
base: main
Choose a base branch
from
+44 −13
Open

Brussels |ITP-2025-1| Meysam Razagh | Week 2 |Form Controls #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
84e4a52
update the form
Epunch Oct 5, 2025
0be7955
update the form
Epunch Oct 5, 2025
8336e42
Refactor form layout and add Tailwind CSS styling
Epunch Oct 22, 2025
ed5957b
Revert to original simple form structure
Epunch Oct 23, 2025
1bd6fce
Back TO Default
Epunch Nov 12, 2025
42d699c
Update index.html
Epunch Nov 14, 2025
4e19a77
form controls exercise
Epunch Nov 15, 2025
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
48 changes: 40 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,56 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<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-->

<!-- customer name -->
<label for="name">Name:</label>
<input id="name" name="name" type="text" minlength="2" required>

<br><br>

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

<br><br>

<!-- t-shirt colour -->
<p>Colour:</p>
Copy link

@noahg9 noahg9 Dec 16, 2025

Choose a reason for hiding this comment

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

The colour options should be grouped using <fieldset> and <legend>

<label><input type="radio" name="color" value="red" required> Red</label>
<label><input type="radio" name="color" value="blue"> Blue</label>
<label><input type="radio" name="color" value="green"> Green</label>

<br><br>

<!-- t-shirt size -->
<p>Size:</p>
Copy link

@noahg9 noahg9 Dec 16, 2025

Choose a reason for hiding this comment

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

This should also be grouped using <fieldset> and <legend>

<label><input type="radio" name="size" value="XS" required> XS</label>
<label><input type="radio" name="size" value="S"> S</label>
<label><input type="radio" name="size" value="M"> M</label>
<label><input type="radio" name="size" value="L"> L</label>
<label><input type="radio" name="size" value="XL"> XL</label>
<label><input type="radio" name="size" value="XXL"> XXL</label>

<br><br>

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

</form>
</main>

<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
//my name
Copy link

@noahg9 noahg9 Dec 16, 2025

Choose a reason for hiding this comment

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

In html, comments are written like this <!-- your name -->

<h2>By MEYSAM RAZAGH</h2>
</footer>
</body>
</html>
</html>
9 changes: 4 additions & 5 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,24 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe PR</h1>
<p>
This is the default, provided code and no changes have been made yet.
I did some changes for undrestanding this process.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
“I made some changes here as part of learning this process.”
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Made by Meysam !
</p>
</footer>
</body>
Expand Down
Empty file added indextest.html
View file
Open in desktop
Empty file.
Loading