Skip to content

Glasgow | May 2026 | Craig Stoddart | Sprint 1 | Form Control#1266

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 13 commits into from
Closed

Glasgow | May 2026 | Craig Stoddart | Sprint 1 | Form Control #1266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 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
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
91 changes: 85 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,22 +6,101 @@
<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" />
Comment thread
cjyuan marked this conversation as resolved.
</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">
</label>
</p>
</div>
Comment thread
cjyuan marked this conversation as resolved.

<!-- 2.Customer's email - Email must be valid and follow consistent pattern. -->
<div>
<p>
<label>Email:
<input type = "email" id = "mail" name = "User Email">
</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">
Comment thread
cjyuan marked this conversation as resolved.

<option selected disabled > 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" id = "XS" name = "Size" value = "XS">
</label>
Comment thread
cjyuan marked this conversation as resolved.

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

<label>M:
<input type = "radio" id = "M" name = "Size" value = "M">
</label>
Comment on lines +69 to +75

@cjyuancjyuanMay 16, 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.

Why introduce id attribute to each radio button input?

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

Hi, I was following the tutorials linked in the curriculum which led me to believe this was necessary.


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

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

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

<br>

<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