You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.8 KiB
HTML
130 lines
2.8 KiB
HTML
10 months ago
|
<!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>
|