HTML Tables and Forms Review

Today, I reviewed the HTML Tables and Forms section of the Responsive Web Design certification on freeCodeCamp. After this review, I will take a quiz, followed by the certification project: Building a Survey Form.

This review walks you through everything covered in the section, providing a great opportunity to revisit any concepts that might still feel unclear.

HTML Form Elements and Attributes

An HTML form element is used to create a form that allows users to input data. The action attribute of the form specifies the URL to which the form data should be sent when submitted, while the method attribute determines the HTTP method - such as GET or POST - that will be used to transmit the data. Together, these elements define how user input is collected and processed on a web page. See an example below:

<form method="value-goes-here" action="url-goes-here">
  <!-- inputs go inside here -->
</form>

The HTML input element creates fields for user data. Type sets the kind of input, placeholder shows a hint, value sets a default, and name identifies the field for submission. Size, min/max, minlength/maxlength control input limits. Required makes it mandatory, and disabled or readonly prevent changes. This is shown in the following example:

<!-- Text input -->
<input 
  type="text"
  id="name"
  name="name"
  placeholder="e.g. Quincy Larson" 
  size="20"
  minlength="5"
  maxlength="30"
  required
/>

<!-- Number input -->
<input 
  type="number"
  id="quantity"
  name="quantity"
  min="2"
  max="10"
  disabled
/>

<!-- Button -->
<input type="button" value="Show Alert" />

Following this, the review examined the label element and its associated attributes, then proceeded to do the same for the button element.

The section ended by going over the fieldset and legend elements, with the fieldset grouping related inputs together and the legend providing a caption that explains the purpose of the group. An example of their usage is shown below:

<!-- Radio group -->
<fieldset>
  <legend>Was this your first time at our hotel?</legend>

  <label for="yes-option">Yes</label>
  <input id="yes-option" type="radio" name="hotel-stay" value="yes" />

  <label for="no-option">No</label>
  <input id="no-option" type="radio" name="hotel-stay" value="no" />
</fieldset>

<!-- Checkbox group -->
<fieldset>
  <legend>
    Why did you choose to stay at our hotel? (Check all that apply)
  </legend>

  <label for="location">Location</label>
  <input type="checkbox" id="location" name="location" value="location" />

  <label for="price">Price</label>
  <input type="checkbox" id="price" name="price" value="price" />
</fieldset>

Working with HTML Table Elements and Attributes

The table element is used to create an HTML table, with the caption element adding a title. The table's content is organized using thead, tbody, and tfoot to group the header, body, and footer sections. Rows are created with the tr element, while th and td define header and data cells. The colspan attribute can be used to make a cell span multiple columns, allowing for more flexible layouts. This can be seen in the example provided:

<table>
  <caption>Exam Grades</caption>

  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Grade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Davis</td>
      <td>Alex</td>
      <td>54</td>
    </tr>

    <tr>
      <td>Doe</td>
      <td>Samantha</td>
      <td>92</td>
    </tr>

    <tr>
      <td>Rodriguez</td>
      <td>Marcus</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Average Grade</td>
      <td>78</td>
    </tr>
  </tfoot>
</table>

Working with HTML Tools

HTML provides several tools to aid developers. An HTML validator checks code syntax for validity, a DOM inspector lets you examine and modify a page’s HTML structure, and DevTools - a set of browser-built developer tools - helps debug, profile, and analyze web pages efficiently. While yesterday's theory lessons explored these tools, I still appreciated the review.

That concludes this review of HTML tables and forms and moves us on to the quiz stage. The next post in this series will likely focus on the certification project - the previously mentioned Build a Survey Form. Until then, keep coding!

Comments

[Dominik Michelitsch]

Great recap! It’s always good to refresh the basics of HTML tables and forms.

​Especially elements like

and , or the correct structure of tables with and , are often overlooked but are essential for semantic HTML and accessibility.

​Good luck with the upcoming certification project 'Building a Survey Form'! Looking forward to seeing how you apply what you've learned.

[Richard Pascoe]

Cheers, Dominik. Appreciate it! Must catch-up on your posts too!