📓 HTML forms and tables

Posted by Admin Last Updated on Saturday, 15 February 2025 Under Class - 10 Computer Science

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>




See Topics - Class - 10 - Computer Science - Read in Hindi Download in Word