Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff 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" />
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.

File names and URL are typically case sensitive. Your CSS file is named 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">
</label>
</p>
</div>
Comment on lines +25 to +32
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.

This input cannot yet ensure the user input contains at least two non-space characters.


<!-- 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 on lines +46 to +47
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.

A common convention is to use lowercase letters consistently for the id attribute.


<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 on lines +65 to +67
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 16, 2026

Choose a reason for hiding this comment

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

Indentation is off.

Consider enabling "Format on save/paste" on VSCode or using its "Format Document" feature to keep the code formatted consistently.

Please take a look at this Guide: https://github.com/CodeYourFuture/Module-Onboarding/blob/main/practical_guide.md


<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
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?


<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
Original file line number Diff line number Diff 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