Skip to content

WestMidlands | 26-ITP-Jan | Tasleem Adedokun | Sprint 2 | Feature/form control #1101

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
tasleemadedokun wants to merge 14 commits into from
Closed

WestMidlands | 26-ITP-Jan | Tasleem Adedokun | Sprint 2 | Feature/form control #1101

Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3ba23d6
add all the sections
tasleemadedokun Jan 31, 2026
ec50a32
add the change made to the footer
tasleemadedokun Jan 31, 2026
27d2d2c
Add basic CSS for form accessibility
tasleemadedokun Jan 31, 2026
0f70c02
add simple styled css which included the display, padding and min-height
tasleemadedokun Jan 31, 2026
6f0531b
Update style.css
tasleemadedokun Jan 31, 2026
5135547
Delete Form-Controls/style.css
tasleemadedokun Jan 31, 2026
0b357b3
Remove style.css , and the reference link in the index.html
tasleemadedokun Feb 5, 2026
8279037
Remove list element so that the radio button can align properly.
tasleemadedokun Feb 5, 2026
d0eae65
Use 'Kebab-case' to effect changes in my multiple words, in my <optio…
tasleemadedokun Feb 5, 2026
609dcff
Replace h2 tag under the footer with p tag and add the <em> tag.
tasleemadedokun Feb 5, 2026
0359f59
add a submit button to index.html
tasleemadedokun Feb 5, 2026
a1e86ca
add the button tag within the form tag
tasleemadedokun Feb 6, 2026
96611b3
Effect chanes of p tag from capital to lower cases. line 17-26
tasleemadedokun Feb 6, 2026
548516b
Add space between input type (radio) and name (choice) from line 39-47
tasleemadedokun Feb 6, 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
63 changes: 56 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,71 @@
<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>
<h1>T-Shirt Choice</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-->
<p>Please complete all required (*) fields</p>
<section>
<P>
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 5, 2026

Choose a reason for hiding this comment

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

Should the tag be <p> or <P>? Can you research online and find the correct casing?

<label for="name">NAME *:</label>
<input type="text" id="name" name="fullname" required>
</P>
<P>
<label for="mail">EMAIL *:</label>
<input type="email" id="mail" name="user-mail" required>
</P>
</section>


<section>
<h2> Colour</h2>


<fieldset>

<legend>CHOICE</legend>

<label>
<input type="radio"name="choice" value="G" required> GREEN
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 5, 2026

Choose a reason for hiding this comment

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

I see a space missing between type and name.

Copy link
Copy Markdown
Author

@tasleemadedokun tasleemadedokun Feb 6, 2026

Choose a reason for hiding this comment

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

Thank you very much done.

</label>

<label>
<input type="radio"name="choice" value="B"> BLUE
</label>

<label>
<input type="radio"name="choice" value="R"> RED
</label>

</fieldset>
</section>
<section>
<h2>Size</h2>
<label for="size"> Size</label>
<select id="size" name="size" required>
<option value=""> SELECT </option>
<option value="xtra-small">XS</option>
<option value="small">S</option>
<option value="medium">M</option>
<option value="large">L</option>
<option value="xtra-large">XL</option>
<option value="double-xtra-large">XXL</option>
</select>
</section>

</form>
</main>
<p>
<button>SUBMIT</button>
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 5, 2026

Choose a reason for hiding this comment

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

I see you added the submit button. This is good however the submit button is currently outside of the form.
In order for the form validation (i.e. required fields) to be triggered a submit button has to be within the form.
Can you try to make that change and then ensure that when you click on the button, you get a message if you leave required fields empty.

</p>

<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<p><em> TASLEEM ADEDOKUN</em></p>
</footer>
</body>
</html>