Manchester | 26-ITP-May | Monsur Abdulrahman | Sprint 1 | Form Control #1270
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,93 @@ | ||
| <!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="form controls" | ||
| content="an exercise on the understanding of form controls" | ||
| /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>T-Shirt Product Pick</h1> | ||
| </header> | ||
|
|
||
| <!-- T-Shirt Information Collection Form Design (Name Email and T-shirt color) --> | ||
| <main> | ||
| <form> | ||
|
|
||
| <div> | ||
| <label for="name">Name</label> | ||
| <input | ||
| type="text" | ||
| name="name" | ||
| id="name" | ||
| minlength="2" | ||
| placeholder="Monsur Abdulrahman" | ||
| required | ||
|
|
||
| /> | ||
| </div> | ||
| <div> | ||
| <label for="email">Email</label> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| id="email" | ||
| placeholder="monsur@gmail.com" | ||
| required | ||
| /> | ||
| </div> | ||
| <div> | ||
| <label for="color">T-Shirt Color</label> | ||
| <select name="color" id="color" required> | ||
| <option value="White">White</option> | ||
| <option value="Green">Green</option> | ||
| <option value="Black">Black</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <!-- T-shirt Size Column --> | ||
|
|
||
| <fieldset> | ||
| <Legend>Size</Legend> | ||
|
|
||
| <div class="size-option"> | ||
|
Comment on lines
+47
to
+59
There was a problem hiding this comment. A note on the different types of form inputs. I would use a radio button if there are only a few options and a dropdown menu if there are a lot of options. (Space is often limited on pages, and this can save some space). So I would switch the types for colors and sizes. (You don't need to change it now. Just something you can consider the next time)
Author
There was a problem hiding this comment. Thank you so much for your feedback and enlightenment on this. I will put that into cognizance next time. I really do appreciate that. |
||
| <label for="xs">XS</label> | ||
| <input type="radio" name="size" id="xs" required /> | ||
| </div> | ||
| <div class="size-option"> | ||
| <label for="s">S</label> | ||
| <input type="radio" name="size" id="s" value="S" /> | ||
| </div> | ||
| <div class="size-option"> | ||
| <label for="m">M</label> | ||
| <input type="radio" name="size" id="m" value="M" /> | ||
| </div> | ||
| <div class="size-option"> | ||
| <label for="l">L</label> | ||
| <input type="radio" name="size" id="l" value="L" /> | ||
| </div> | ||
| <div class="size-option"> | ||
| <label for="xl">XL</label> | ||
| <input type="radio" name="size" id="xl" value="XL" /> | ||
| </div> | ||
| <div class="size-option"> | ||
| <label for="xxl">XXL</label> | ||
| <input type="radio" name="size" id="xxl" value="XXL" /> | ||
| </div> | ||
| </fieldset> | ||
|
Comment on lines
+82
to
+83
There was a problem hiding this comment. The indentation of the children does not use the standards. How can you ensure consistent formatting in your code?
Author
There was a problem hiding this comment. I have removed the div placed before the fieldset, to ensure a consistency in formatting There was a problem hiding this comment. You did not need to remove the div. I was referring to Prettier which you can use to automatically format your code consistently.
Author
There was a problem hiding this comment. Oh! Thank you so much for this. I’ll definitely take that into cognisance thank you so much for taking the time to review and give adequate feedback |
||
|
|
||
| <button type="submit">Submit</button> | ||
| </form> | ||
| </main> | ||
| <footer> | ||
| <!-- Footer --> | ||
| <p>Designed with Love by Monsur Abdulrahman</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
|
|
||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| h1, footer { | ||
| text-align: center; | ||
| } | ||
|
|
||
|
|
||
| main { | ||
| max-width: 400px; | ||
| margin: 50px auto; | ||
| padding: 20px; | ||
| background-color: aliceblue; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 6px; | ||
|
|
||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-bottom: 8px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| input, | ||
| select { | ||
| width: 100%; | ||
| padding: 10px; | ||
| margin-bottom: 20px; | ||
| border: 1px solid green; | ||
| border-radius: 5px; | ||
|
|
||
| } | ||
|
|
||
| fieldset { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| gap: 10px; | ||
| border: 1px solid green; | ||
| padding: 10px; | ||
| margin-bottom: 5px; | ||
|
|
||
|
|
||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
| .size-option { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 5px; | ||
| margin-bottom: 5px; | ||
|
|
||
| } | ||
|
|
||
| input [type="radio"] { | ||
| width: auto; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| button[type="submit"] { | ||
|
|
||
| width: 100%; | ||
| padding: 12px; | ||
| background-color: green; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
|
|
||
| } | ||
|
|
||
| button[type="submit"]:hover { | ||
| background-color: blue; | ||
| } | ||
|
|
||
| footer { | ||
| margin-top: 20px; | ||
| font-size: 0.9em; | ||
|
|
||
| } |
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.
How can you ensure that the name needs to have at least 2 characters?
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.
Thank you so much for your response and feedback, I have ensured the form requires at least 2 characters. I included the 'minlength' attribute and value of '2' to solve the issue.