Skip to content

Barcelona | Oct-2025-02| Joseph Ayitey | Sprint 2 | Form Controls #45

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
joseph-ayitey wants to merge 3 commits into
base: main
Choose a base branch
from
+77 −7
Open

Barcelona | Oct-2025-02| Joseph Ayitey | Sprint 2 | Form Controls #45

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7952c40
Form have been built on semantic html
joseph-ayitey Nov 15, 2025
b5e42e1
I have modified the header from Product Pick to J-Linx Enterprise
joseph-ayitey Nov 17, 2025
6dbe4d3
New paragraph statement have been added and footer modified
joseph-ayitey Nov 17, 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
84 changes: 77 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,89 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>J-Linx Enterprise</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>
<p>Please fill in the form below:</p>
<form action="#" method="post">
<div>
Copy link

@mvcds mvcds Nov 18, 2025

Choose a reason for hiding this comment

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

For reading, it's better to align this properly, othere than this LGTM (look good to me)

<label for="fullName">Full name</label>
Copy link

@LucaPipolo LucaPipolo Nov 18, 2025

Choose a reason for hiding this comment

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

Very minor User Experience tip: if the fields are required, consider adding a * in the label to communicate the user what you expect. Like <label for="email">Email*:</label>

For more info, have a look to Google accessibility tips here: "Labels inform a user about the purpose of a field, if the field is required […]".

Copy link
Author

@joseph-ayitey joseph-ayitey Nov 19, 2025

Choose a reason for hiding this comment

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

Thanks for your tips, its really helpful.. Thanks for reviewing my works and helping out. i do appreciate..
So its good when i introduce *. As you indicated, or only when the field is required?

Copy link

@mvcds mvcds Nov 19, 2025

Choose a reason for hiding this comment

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

If the field requires it

Copy link
Author

@joseph-ayitey joseph-ayitey Nov 19, 2025

Choose a reason for hiding this comment

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

Thank You @mvcds

<input
type="text" placeholder="Joseph Ayitey"
id="fullName"
name="fullName"
minlength="2"
required
/>
</div>

<div>
<label for="email">Email address</label>
<input
type="email" placeholder="[email protected]"
id="email"
name="email"
required
/>
</div>

<div>
<label for="Addres">Address</label>
<input
type="Address" placeholder="Home Address"
id="Address"
name="Address"
required
/>
</div>

<fieldset>
<legend>Choose a colour</legend>

<div>
<input type="radio" id="colourRed" name="colour" value="red" required />
<label for="colourRed">Red</label>
</div>

<div>
<input type="radio" id="colourGreen" name="colour" value="green" />
<label for="colourGreen">Green</label>
</div>

<div>
<input type="radio" id="colourBlue" name="colour" value="blue" />
<label for="colourBlue">Blue</label>
</div>

<div>
<input type="radio" id="colourYellow" name="colour" value="Yellow" />
<label for="colourYellow">Yellow</label>
</div>

<div>
<input type="radio" id="colourBlack" name="colour" value="Black" />
<label for="colourBlack">Black</label>
</div>
</fieldset>

<div>
<label for="size">Choose a size</label>
<select id="size" name="size" required>
<option value="#">Select size</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
</div>
<button type="submit">Submit</button>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By J-Linx Front-End Developer(Joseph)</h2>
</footer>
</body>
</html>