Skip to content

Manchester | 25-ITP-Sep | khalid bih | Sprint 2 | Form controls #829

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
khalidbih wants to merge 6 commits into from
Closed

Manchester | 25-ITP-Sep | khalid bih | Sprint 2 | Form controls #829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
20491ca
Initial form structure for T-shirt project
khalidbih Sep 19, 2025
59072e5
Fix accessibility issues and improve form structure
khalidbih Sep 19, 2025
236dd8c
I Added style to my inputs giving them a size
khalidbih Sep 20, 2025
1f9f56e
Merge main into form-controls and update element
khalidbih Sep 20, 2025
458eaca
Restore index.html from main to exclude changes
khalidbih Sep 20, 2025
52d6356
I made changes for input; styles also more human-readable placeholder
khalidbih Sep 29, 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
46 changes: 46 additions & 0 deletions Form-Controls/form-controls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
Copy link

@CameronDowner CameronDowner Sep 27, 2025

Choose a reason for hiding this comment

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

Could you check this HTML with a HTML validator and solve any issues?

You can copy & paste your HTML under Validate by direct input

Copy link
Author

@khalidbih khalidbih Sep 29, 2025

Choose a reason for hiding this comment

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

I've used the HTML validator, and it shows no more errors or warnings

Copy link

@CameronDowner CameronDowner Sep 29, 2025

Choose a reason for hiding this comment

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

Perfect score on the validator 🙌

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirt order</title>
</head>
<body>
<form>
<fieldset>
<legend>Customer Details</legend>

<label for="customer-name">Name</label>
Copy link

@CameronDowner CameronDowner Sep 27, 2025

Choose a reason for hiding this comment

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

Is this label referencing the input properly?

Copy link
Author

@khalidbih khalidbih Sep 29, 2025

Choose a reason for hiding this comment

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

It wasn't because it didn't match, now I fixed it

<input type="text" name="name" id="customerName" minlength="2" placeholder="customer-name" required style="min-width:48px; min-height:48px;">>
Copy link

@CameronDowner CameronDowner Sep 27, 2025

Choose a reason for hiding this comment

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

It looks there are duplicate > characters that are showing on the page

image

Copy link
Author

@khalidbih khalidbih Sep 29, 2025

Choose a reason for hiding this comment

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

Yes, deleted the extra > character


<label for="customer-email">Email</label>
<input type="email" name="email" id="customerEmail" placeholder="customer-email" required style="min-width:48px; min-height:48px;">>
Copy link

@CameronDowner CameronDowner Sep 27, 2025

Choose a reason for hiding this comment

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

The placeholder is visible to users of the website - is there a more human-readable placeholder we could use for our inputs?

Copy link
Author

@khalidbih khalidbih Sep 29, 2025

Choose a reason for hiding this comment

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

I used Enter your full name, and Enter your full email. I think this is more human-readable.

</fieldset>
<fieldset>
<legend>T-shirt Options</legend>

<label for="tshirtColour">Choose a Colour</label>
<select name="colour" id="tshirtColour" required style="min-width:48px; min-height:48px;">
<option value="">--Select--</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

<label for="tshirtSize">Choose a Size</label>
<select name="size" id="tshirtSize" required style="min-width:48px; min-height:48px;">
<option value="">--Select--</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>l
<option value="xxl">XXL</option>
</select>
</fieldset>
<button type="submit" style="min-width:48px; min-height:48px;">Order</button>
Copy link

@CameronDowner CameronDowner Sep 27, 2025

Choose a reason for hiding this comment

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

Is there another way to apply styles to these elements? What might be the differences to other approaches to applying styles?

Copy link

@CameronDowner CameronDowner Sep 29, 2025

Choose a reason for hiding this comment

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

@khalidbih Could you answer this question?

I'll mark as complete as you have completed the coursework, but would be good to test your understanding here 🙂


</form>

</body>
</html>
67 changes: 43 additions & 24 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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-->
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-shirt order</title>
</head>
<body>
<form>
<fieldset>
<legend>Customer Details</legend>

<label for="customerName">Name</label>
<input type="text" name="name" id="customerName" placeholder="Enter your full name" required style="min-width:35px; min-height:35px;">

<label for="customerEmail">Email</label>
<input type="email" name="email" id="customerEmail" placeholder="Enter your email" required style="min-width:35px;; min-height:35px;">

</fieldset>
<fieldset>
<legend>T-shirt Options</legend>

<label for="tshirtColour">Choose a Colour</label>
<select name="colour" id="tshirtColour" required>
<option value="">--Select--</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

<label for="tshirtSize">Choose a Size</label>
<select name="size" id="tshirtSize" required>
<option value="">--Select--</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>
</fieldset>

<button type="submit">Order</button>
</form>
</body>
</html>