Manchester | 26-ITP-Jan | Liban Jama | Sprint 2 | Form-Controls #1082
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,3 +25,74 @@ <h2>By HOMEWORK SOLUTION</h2> | |
| </footer> | ||
| </body> | ||
| </html> | ||
| <!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" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h1>Product Pick</h1> | ||
| </header> | ||
| <main> | ||
| <form> | ||
| <p> | ||
| <label for="name">Name</label> | ||
| <input type="text" id="name" name="user_name" placeholder="John Smith" required maxlength="18"/> | ||
| </p> | ||
| <p> | ||
| <label for="email">Email</label> | ||
| <input type="email" id="email" name="user_email" placeholder="johnsmith@hotmail.com" required maxlength="32"/> | ||
| </p> | ||
|
Comment on lines
+51
to
+52
There was a problem hiding this comment. what happens when a user enters a@b as email? can we use minlength for validation ? |
||
| <p>Colour</p> | ||
|
|
||
| <label for="red"> | ||
| <input id="red" type="radio" name="colour" value="red" /> | ||
|
There was a problem hiding this comment. when should you use a radio button vs select ? which is more appropriate in this scenario and why ? can you also validate this ? |
||
| Red | ||
| </label><br> | ||
| <br> | ||
|
|
||
| <label for="blue"> | ||
| <input id="blue" type="radio" name="colour" value="blue" /> | ||
| Blue | ||
| </label><br> | ||
| <br> | ||
|
|
||
| <label for="green"> | ||
| <input id="green" type="radio" name="colour" value="green" /> | ||
| Green | ||
| </label> <br> | ||
| <br> | ||
|
|
||
| <p>Size</p> | ||
|
|
||
|
There was a problem hiding this comment. well done for the good work. |
||
| <label for="size">Size</label> | ||
|
There was a problem hiding this comment. can we validate the form element to make sure users select a value? |
||
| <select id="size" name="size"> | ||
| <option value="xs">XS</option> | ||
| <option value="s">S</option> | ||
| <option value="m">M</option> | ||
| <option value="l">L</option> | ||
| <option value="xl">XL</option> | ||
| <option value="xxl">XXL</option> | ||
| </select> | ||
|
|
||
| <section> | ||
| <p> | ||
| <button type="submit">submit</button> | ||
| </p> | ||
| </section> | ||
|
|
||
|
There was a problem hiding this comment. How do we submit the form? is there an element to use to submit the form ? |
||
| </form> | ||
| </main> | ||
| <footer> | ||
| <h2>By LIBAN JAMA</h2> | ||
| </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.
what happens if someone enters only 1 character ? example "w" what is the minimum expected length for name input ? can we use minlength for validation here ?