-
-
Notifications
You must be signed in to change notification settings - Fork 428
Glasgow | 26-ITP-Jan | Chibuikem Okwu | Sprint 2 | Form-Controls #1105
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
86cdaba
0a860ad
08d1ccf
20ebe4b
ef5fe86
240fa53
241ff66
9c14c86
8d80cf8
64614d8
32bfc00
03c7c80
0e93312
f1ebda5
2e2afb8
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 |
|---|---|---|
| @@ -1,27 +1,100 @@ | ||
| <!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" /> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>T-Shirt Order Form</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Product Pick</h1> | ||
| <h1>T-Shirt Sales form</h1> | ||
| <p>Please confirm your details and choose your preferred colour and size.</p> | ||
| </header> | ||
| <main> | ||
| <form> | ||
| <!-- write your html here--> | ||
| <!-- | ||
| try writing out the requirements first as comments | ||
| this will also help you fill in your PR message later--> | ||
| <form aria-label="T-shirt order form"> | ||
| <br> | ||
| <!-- Customer Name --> | ||
| <div> | ||
| <label for="name">Full Name:</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| minlength="2" | ||
| required | ||
| aria-required="true" | ||
| placeholder="Enter your full name" | ||
| /> | ||
| </div> | ||
| <br> | ||
| <!-- Customer Email --> | ||
|
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. Could you shift comment to the same indentation as div tag below? Such tags should be on the same level of indentation as it shows us which tag they relate to |
||
| <div> | ||
| <label for="email">Email Address:</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| required | ||
| aria-required="true" | ||
| placeholder="Enter your email address" | ||
| /> | ||
| </div> | ||
| <br> | ||
| <!-- T-shirt Colour --> | ||
|
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. The same comment indentation |
||
| <div> | ||
| <label for="colour">T-shirt Colour:</label> | ||
| <select id="colour" name="colour" required aria-required="true"> | ||
| <option value="">Select a colour</option> | ||
| <option value="black">Black</option> | ||
| <option value="white">White</option> | ||
| <option value="blue">Blue</option> | ||
| </select> | ||
| </div> | ||
| <br> | ||
| <!-- T-shirt Size --> | ||
|
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. The same comment indentation |
||
| <fieldset> | ||
| <legend>T-shirt Size:</legend> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="xs" name="size" value="XS" required /> | ||
| <label for="xs">XS</label> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="s" name="size" value="S" /> | ||
| <label for="s">S</label> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="m" name="size" value="M" /> | ||
| <label for="m">M</label> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="l" name="size" value="L" /> | ||
| <label for="l">L</label> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="xl" name="size" value="XL" /> | ||
| <label for="xl">XL</label> | ||
| </div> | ||
| <br> | ||
| <div> | ||
| <input type="radio" id="xxl" name="size" value="XXL" /> | ||
| <label for="xxl">XXL</label> | ||
| </div> | ||
| <br> | ||
| </fieldset> | ||
|
|
||
| <br> | ||
| <!-- Submit Button --> | ||
|
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. The same comment indentation |
||
| <button type="submit">Submit Order</button> | ||
| </form> | ||
| </main> | ||
| <br> | ||
| <footer> | ||
| <!-- change to your name--> | ||
| <p>By HOMEWORK SOLUTION</p> | ||
| <p>© 2025 Chibuikem Okwu. All rights reserved.</p> | ||
|
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. the copyright symbol should have ";", i.e. © |
||
| </footer> | ||
| </body> | ||
| </html> | ||
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.
Could you tell please, why do we need aria-required as we have required already?