-
-
Notifications
You must be signed in to change notification settings - Fork 488
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.
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
base: main
Are you sure you want to change the base?
Changes from all commits
8e42931
4ea3905
37ba83c
ae6e173
a4dbbe1
770726e
33d6910
53f0989
0728ba1
8576e9d
15bf3af
a851094
efae5ad
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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" /> | ||
| </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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. A common convention is to use lowercase letters consistently for the |
||
|
|
||
| <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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why introduce |
||
|
|
||
| <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> | ||
| 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;} |
There was a problem hiding this comment.
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.