Skip to content

North west | 26-ITP-Sept | Brian Yorachi | Sprint 1 | Form controls #1516

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
BrianY315 wants to merge 4 commits into
base: main
Choose a base branch
from
+105 −0
Open

North west | 26-ITP-Sept | Brian Yorachi | Sprint 1 | Form controls #1516

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57ce907
Add basic html structure
BrianY315 Sep 13, 2026
028d352
Add_form_fields
BrianY315 Sep 13, 2026
165edc5
Add email and colour label
BrianY315 Sep 13, 2026
ccf9091
add size options and submit button
BrianY315 Sep 13, 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
105 changes: 105 additions & 0 deletions Form-Controls/task-Tshirts
View file
Open in desktop

@cjyuan cjyuan Sep 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

You were supposed to implement the form in index.html.

Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T‑Shirt Order Form</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
padding: 40px;
line-height: 1.6;
}
Comment on lines +6 to +12

@cjyuan cjyuan Sep 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Could you move the internal CSS to an external fie? It is best practice to separate CSS from HTML.


form {
background: #fff;
padding: 20px;
max-width: 500px;
margin: auto;
border-radius: 8px;
border: 1px solid #ddd;
}

label {
display: block;
margin-top: 15px;
font-weight: bold;
}

input, select {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
}

button {
margin-top: 20px;
padding: 12px;
width: 100%;
background: #333;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}

button:hover {
background: #555;
}
</style>
</head>

<body>
<form>
<h1>Order Your T‑Shirt</h1>

<!-- Customer Name -->
<label for="customer-name">Customer Name</label>
<input
type="text"
id="customer-name"
name="customer-name"
required
pattern=".*\S.*\S.*"
aria-describedby="nameHelp"
>
<small id="nameHelp">Name must contain at least two non‑space characters.</small>
Comment on lines +64 to +70

@cjyuan cjyuan Sep 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

  • customer-name - This naming convention is called kebab-case.
  • nameHelp - This naming convention is called camelCase.

It's best practice to use a consistent naming convention throughout.


<!-- Email -->
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
required
>

<!-- Colour -->
<label for="colour">T‑Shirt Colour</label>
<select id="colour" name="colour" required>
<option value="">-- Select a colour --</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select>

<!-- Size -->
<label for="size">T‑Shirt Size</label>
<select id="size" name="size" required>
<option value="">-- Select a 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>

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