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

Show file tree
Hide file tree
Changes from 6 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
64 changes: 57 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,72 @@
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css">
</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>
<ul>
Copy link
Copy Markdown
Contributor

@jenny-alexander jenny-alexander Feb 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

The radio buttons are styled a bit differently . What if you were to remove the list elements? Will it look more aligned?

Image

<li>
<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>
</li>

<li>
<label>
<input type="radio"name="choice" value="B"> BLUE
</label>
</li>
<li>
<label>
<input type="radio"name="choice" value="R"> RED
</label>
</li>
</ul>
</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>
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.

For your <option> values, it's a good idea to avoid using spaces. It's technically okay in HTML but if your form data was sent to a backend system, spaces might causes headaches for systems processing the data.
So, my suggestion is to use 'kebab-case' for multi-word values (i.e. xtra small could be xtra-small).

<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>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>TASLEEM ADEDOKUN</h2>
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.

Using <h2> tag here implies that there is a new section starting. Since a footer name is considered minimal information, it doesn't need a heading. 🙂 Can you think of a better tag to use for your name?

Copy link
Copy Markdown
Author

@tasleemadedokun tasleemadedokun Feb 5, 2026

Choose a reason for hiding this comment

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

Using <h2> tag here implies that there is a new section starting. Since a footer name is considered minimal information, it doesn't need a heading. 🙂 Can you think of a better tag to use for your name?

Hi @jenny-alexander ,
Thank you very much for taking the time to review my work. To be sincere, I had zero knowledge of coding until I joined CYF. I am trying my best, and I am glad you spaced the correction.

However, I have a question? Before I added the CSS, my Lighthouse score was not 100%. Can I get 100% without CSS?
Thanks once again.

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.

You're doing a great job 😀

Absolutely you can get a 100% accessibility score on Lighthouse without using CSS. What accessibility issues were you getting? Did you try to ask AI (ChatGPT, Gemini, Claude, etc) about the accessibility issue?
I can also help if you aren't able to figure it out.

Copy link
Copy Markdown
Author

@tasleemadedokun tasleemadedokun Feb 5, 2026

Choose a reason for hiding this comment

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

Hi @jenny-alexander , thank you very much i have done all neccesary changes.

</footer>
</body>
</html>
10 changes: 10 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
label {
display: inline-block;
padding: 6px 8px;
}

button,
select,
input {
min-height: 30px;
}
Loading