Skip to content

London | 25-ITP-September | Carlos Abreu | Sprint 2 | Form Controls #907

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
carlosyabreu wants to merge 11 commits into
base: main
Choose a base branch
from
Open

London | 25-ITP-September | Carlos Abreu | Sprint 2 | Form Controls #907

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
eef98f2
Add all the files of the project
carlosyabreu Oct 7, 2025
a517f26
Delete: index.html
carlosyabreu Oct 8, 2025
8e682c9
Add form attributes for tshirt order form
carlosyabreu Oct 8, 2025
bf3b9dd
Add form elements for tshirt order form
carlosyabreu Oct 8, 2025
36c7b82
Refactor the index.html adding accessibility and email validation
carlosyabreu Oct 8, 2025
8f854aa
Correct accessibity to be 100%
carlosyabreu Oct 8, 2025
80dfc2c
Revert "Add all the files of the project"
carlosyabreu Oct 10, 2025
5e571cc
Add > operator to close label for email tag and pattern to validade o…
carlosyabreu Oct 11, 2025
5c0f1c9
Add required for input text attribute
carlosyabreu Oct 11, 2025
45816b5
Add required attribute for input email
carlosyabreu Oct 11, 2025
5244c33
Run w3validator and fixed the wrong code
carlosyabreu Oct 12, 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
83 changes: 57 additions & 26 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,58 @@
<!DOCTYPE html>
<!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>
Comment on lines -22 to -25
Copy link
Contributor

@cjyuan cjyuan Oct 12, 2025

Choose a reason for hiding this comment

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

Why not keep this footer and replace the placeholder text accordingly?

</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>T-Shirt Order Form</title>
</head>
<body>
<main>
<h1>T-Shirt Order Form</h1>
<p>Please provide your details and pick a colour and size. Only three colours are available.</p>

<form aria-labelledby="formTitle">
<h2 id="formTitle" class="visually-hidden">Order form</h2>

<div>
<label for="customerName">Customer name</label>
<input type="text" id="customerName" name="customerName" pattern="[A-Za-z\s]+" required title="Alphabets and spaces only" placeholder="Full name" autocomplete="name">
</div>
<br>

<div>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="you@example.com" autocomplete="email" inputmode="email" aria-describedby="emailHelp" required>
<small id="emailHelp">Enter a valid email address (you@example.com).</small>
</div>
<br>

<fieldset>
<legend>Colour (choose one)</legend>
<label for="red"><input type="radio" id="red" name="colour" value="Red" required> Red</label>
<label for="blue"><input type="radio" id="blue" name="colour" value="Blue"> Blue</label>
<label for="green"><input type="radio" id="green" name="colour" value="Green"> Green</label>
</fieldset>
<br>

<div>
<label for="size">T-shirt 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>
<br>

<div>
<button type="submit">Place order</button>
<button type="reset">Reset</button>
</div>
</form>
</main>
</body>
</html>