HTML Forms
- Definition: HTML forms are used to collect user input, such as text, numbers, dates, and more.
- Form Structure: A form consists of a form element, which contains one or more input elements, textarea elements, select elements, and button elements.
- Form Attributes:
- action: specifies the URL of the form processor
- method: specifies the HTTP method (GET or POST) to use when submitting the form
- name: specifies the name of the form
- Input Types:
- text: a single-line text input
- password: a password input (masked for security)
- email: an email address input
- number: a numeric input
- checkbox: a checkbox input
- radio: a radio button input
- file: a file upload input
- Form Validation: HTML5 introduces form validation, which allows you to specify rules for form data, such as required fields, email formats, and more.
HTML Tables
- Definition: HTML tables are used to display tabular data, such as lists, schedules, and more.
- Table Structure: A table consists of a table element, which contains one or more tr elements (table rows), each containing one or more td elements (table data) or th elements (table headers).
- Table Attributes:
- border: specifies the border width and style
- cellpadding: specifies the space between cells
- cellspacing: specifies the space between cells
- Table Elements:
- tr: table row
- td: table data
- th: table header
- caption: table caption
- colgroup: table column group
- col: table column
- Table Styles: HTML tables can be styled using CSS, including borders, padding, margins, and more.
Example Code
HTML Form
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
HTML Table
<table border="1" cellpadding="5" cellspacing="0">
<caption>Student Grades</caption>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>John Doe</td>
<td>A</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>B</td>
</tr>
</table>