<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML Table and Forms</title> </head> <body> <header> <h1>HTML Tables and Forms</h1> </header> <div id="main"> <div id="section"> <h2>HTML Entities</h2> <p> <em>Reserved characters in HTML (e.g < or > charcters that can mix up with HTML code). </em> </p> <table border="1"> <thead> <tr> <th colspan="2">Emtity</th> <th>Description</th> </thead> </tr> <tbody> <tr> <td><</td> <td>lt;</td> <td>less than </td> </tr> <td><</td> <td>gt;</td> <td>grater than </td> <tr> <td>₱</td> <td>#8369</td> <td>peso sign</td> </tr> <tr> <td>&</td> <td>amp</td> <td>ampersand</td> </tr> <tr> <td>"</td> <td>quot</td> <td>double quotation mark</td> </tr> <tr> <td>'</td> <td>apos</td> <td>single quotation mark (apostrophe)</td> </tr> <tr> <td>ñ</td> <td>nilde</td> <td> lower Tilde</td> </tr> <tr> <td>Ñ</td> <td>Ntilde</td> <td>Upper Tilde </td> </tr> </tbody> <footer> <tr> <th colspan="3">List of HTML Entities</th> </tr> </footer> </thead> </table> </div> </div> <div id="section2"> <h2>HTML FORM</h2> <p> <em>Input elements that make up a form.</em> </p> <form action="https://google.com"><label for="fullName">Full Name:<br> <input type="text" name="FullName" id="FullName" required autocomplete /><br> <label for="Birthdate">Birt date:</label><br> <input type="date" name="Birthdate" id="Birthdate" required /> <br> <label for="age">Age:</label><br> <input type="number" name="age" id="age" required /> <br> <label for="gender">Gender:</label><br> <select name="gender id="gender"> <option></option> <option value="Male">Male</option> <option value="Female">Female</option> <option value="I rather not say. ">I rather not say.</option> </select><br> <label for="notes">Notes:</label><br> <textarea name="notes" id="notes" rows="5"></textarea> <br> <label>New User:</label><br> <input type="radio" name="newuser" id="user-type1" value="Yes" /> <label for="user-type1">Yes</label><br> <input type="radio" name="newuser" id="user-type2" value="no" /> <label for="user-type2">No</label><br> <br><br> <label>Role:</label><br> <input type="checkbox" name="role1" id="role1" value="developer" /> <label for="role1">Developer</label><br> <input type="checkbox" name="role2" id="role2" value="student" /> <label for="role2">Student</label><br> <input type="checkbox" name="role3" id="role3" value="manager" /> <label for="role3">Manager</label><br> <button type="submit">submit</button> <button type="reset">Reset</button> </form> </div> </body> </html>