Skip to content

Glasgow | May-2026 | Craig Stoddart | Sprint 1 | Form Controls #1413

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
CraigStodd wants to merge 17 commits into from
Closed

Glasgow | May-2026 | Craig Stoddart | Sprint 1 | Form Controls #1413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8e42931
Changed "HOMEWORK SOLUTION" to my name
CraigStodd May 12, 2026
4ea3905
Added Requirements in comments
CraigStodd May 12, 2026
37ba83c
Updated "Full Name" input to specify input type, id and name
CraigStodd May 12, 2026
ae6e173
Added Email label; added colons to label titles
CraigStodd May 12, 2026
a4dbbe1
Added template code for "T-Shirt Size" checkbox
CraigStodd May 12, 2026
770726e
Changed "T-Shirt Size" checkbox-style button to radio-style button; a…
CraigStodd May 12, 2026
33d6910
Added "T-Shirt Colour" section
CraigStodd May 12, 2026
53f0989
Cleaned up Comments for readability
CraigStodd May 12, 2026
0728ba1
Added basic style sheet with text formatting
CraigStodd May 12, 2026
8576e9d
Added Grid Container
CraigStodd May 12, 2026
15bf3af
Changed container type; changed h1 to "T-Shirt Order"
CraigStodd May 12, 2026
a851094
Removed whitespace from T-Shirt Colour"; removed stray div tag
CraigStodd May 12, 2026
efae5ad
Fixed Label end tags
CraigStodd May 12, 2026
c2864c8
- Removed capital letters in stylesheet ref, line 10
CraigStodd Jun 4, 2026
fbeac8a
- Removed id tag from radio buttons
CraigStodd Jun 4, 2026
01455f7
-Added required attributes to each form section
CraigStodd Jun 4, 2026
537aeb3
- Added pattern + title attributes to Full Name" section (lines 32-33…
CraigStodd Jun 4, 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
101 changes: 94 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,114 @@
<!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" />

<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-Shirt Order</h1>
</header>
<main>
<h2>Verify your order and details below:</h2>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!-- REQUIREMENTS:
Each requirement is listed as a comment with the corresponding code below it-->

<div class="container">
<!-- 1.Customer's name - ensure it contains at least two non-space characters. -->
<div>
<p>
<label
>Full Name:
<input
type="text"
id="name"
name="name"
pattern=".*\S.*\S.*"
title="Please enter at least two letters or characters (spaces do not count)."
required
/>
</label>
</p>
</div>

<!-- 2.Customer's email - Email must be valid and follow consistent pattern. -->
<div>
<p>
<label
>Email:
<input type="email" id="mail" name="User Email" required />
</label>
</p>
</div>

<!-- 3.T-Shirt colours - Provide 3 options, ensure right option can be picked. -->
<div>
<p>
<label for="t-shirt-colour"> T-Shirt Colour: </label>
<select name="t-shirt-colour" id="t-shirt-colour" required>
<option value="" selected>Select a colour</option>

<option label="Red" value="Red">Red</option>
<option label="Blue" value="Blue">Blue</option>
<option label="Yellow" value="Yellow">Yellow</option>
</select>
</p>
</div>

<!-- 4.Provide size options -XS, S, M, L, XL, XXL -->
<div>
<p>T-Shirt Size:</p>

<p>
<label
>XS:
<input type="radio" name="Size" value="XS" required />
</label>
Comment on lines +69 to +72

@cjyuancjyuanJun 4, 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 look up "Should the text associated with a radio button be placed on left or right of the radio button?"

Change is optional.

@CraigStoddCraigStoddJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Sure, I'll look into it.


<label
>S:
<input type="radio" name="Size" value="S" required />

@cjyuancjyuanJun 4, 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.

The convention is to use lowercase kebab-case values for the name attribute (and also for id and class attributes)

@CraigStoddCraigStoddJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Noted, I'll change this.

</label>

<label
>M:
<input type="radio" name="Size" value="M" required />
</label>

<label
>L:
<input type="radio" name="Size" value="L" required />
</label>

<label
>XL:
<input type="radio" name="Size" value="XL" required />
</label>

<label
>XXL:
<input type="radio" name="Size" value="XXL" required />
</label>
</p>
</div>
</div>

<br />

@cjyuancjyuanJun 4, 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.

Consider using CSS to control spacing between elements instead of using <br> tags. This approach is generally more maintainable and semantically correct.

@CraigStoddCraigStoddJun 5, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Ok.


<div>
<button type="submit">Submit</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Craig Stoddart</p>
</footer>
</body>
</html>
16 changes: 16 additions & 0 deletions Form-Controls/mystyle.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
/* Form Styling */
/* Text Formatting */
/* Headers */
h1, h2 {font-family: Tahoma;}

h2 {font-weight: lighter;}

/* Paragraph */

p {font-family: verdana;
font-size: 90%;}

.container {border-style: solid;
border-width: 1px;
padding: 5px;
max-width:350px;}
Loading