Cape Town | May-ITP-2026 | Enice Mutanda | Sprint 1 | FormControls #1291
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,84 @@ | ||
| <!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"> | ||
| <link rel="stylesheet" href="style.css" > | ||
|
Author
There was a problem hiding this comment. This file is linked to the css file. |
||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Customer Confirmation Form </h1> | ||
| </header> | ||
| <main> | ||
| <form action="results.html" method="GET"> | ||
| <div> | ||
| <label for="name">Customer Name:</label> | ||
|
There was a problem hiding this comment. The formatting standard for HTML elements is to use indentation on children elements. This makes it easier to understand the structure. How can you ensure consistent formatting in your code automatically?
Author
There was a problem hiding this comment. I can use a code formatter such as Prettier. It automatically indents child elements and keeps the HTML structure neat and easy to read whenever I save my file. |
||
| <input type="text" id="name" name="name" required placeholder="two non-space characters."/> | ||
|
There was a problem hiding this comment. How can you ensure that the user needs to input 2 non space characters?
Author
There was a problem hiding this comment. I can use the pattern attribute in side the element to tell the browser what format the user's input must follow. than next to the pattern attribute , i can than use the Title attribute to show a helpful message to tell users what is expect of them There was a problem hiding this comment. The placeholder is nice information for the user. Please also enforce the rules programatically |
||
| </div> | ||
| <div | ||
| <label for="email"> Email:</label> | ||
| <input type="email" id="email" name="email" required placeholder="@gmail.com" /> | ||
| </div> | ||
| <div> | ||
| <label for="Size"> Size: </label> | ||
| <select id="size" name="size"> | ||
| <option value="xsmall">xSmall</option> | ||
| <option value="small">Small</option> | ||
| <option value="medium">Medium</option> | ||
| <option value="large">Large</option> | ||
| <option value="xlarge">xLarge</option> | ||
| <option value="xxlarge">xxLarge</option> | ||
|
|
||
| </select> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="phone"> Phone Number:</label> | ||
| <input type="tel" id="phone" name="phone" required /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="address"> Address: </label> | ||
| <input type="text" id="address" name="address" required /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="color"> Color:</label> | ||
| <select id="color" name="color"> | ||
| <option value="red">yellow</option> | ||
| <option value="blue">black</option> | ||
| <option value="green">Green</option> | ||
| </select> | ||
| </div> | ||
| <div> | ||
| Gender | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="gender">Male</label> | ||
| <input type="radio" for="gender" id="male"></input> | ||
| </div> | ||
| <div> | ||
| <label for="gender">Female</label> | ||
| <input type="radio" for="gender" id="female"></input> | ||
| </div> | ||
| <div> | ||
| <label for="comments">Additional Comments:</label> | ||
| <textarea id="comments" name="comments"></textarea> | ||
| </div> | ||
|
|
||
| <div class="form-button"> | ||
| <button type="submit">Submit</button> | ||
| <button type="reset">Reset</button> | ||
| </div> | ||
| </form> | ||
| </main> | ||
| <footer> | ||
| <!-- ENICE MUTANDA--> | ||
| <p>ENICE MUTANDA</p> | ||
| </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.
Please also fix my comments from the review text itself: #1291 (review)