HTML Forms & Tables | Ian’s blog

type

status

date

slug

summary

Displaying Data with `<table>`

In the past, tables were often used for page layout. This is an outdated and bad practice. Today, tables have one clear purpose: to display tabular data, like a spreadsheet, a price list, or a schedule.

Let's look at the basic structure of a table:

Here’s the breakdown of these tags:

<table>: The container for the entire table.

<caption>: A title or caption for the table. It's great for accessibility and context.

<thead>: The table header section. It's used to group header content.

<tbody>: The main body of the table. This is where your rows of data go.

<tfoot>: The table footer section, perfect for summaries.

<tr>: A table row.

<th>: A table header cell. The text is typically bold and centered by default. It defines a header for a column or row.

<td>: A table data cell. This is where your actual data lives.

Merging Cells with `colspan` and `rowspan`

Sometimes you need a cell to span across multiple columns or rows.

colspan="2": Makes a cell span across two columns.

rowspan="2": Makes a cell span across two rows.

In this example, the "Contact" header spans over two columns.

Interacting with Users via `<form>`

Forms are the primary way you collect information from users. Whether it's a search bar, a login screen, or a contact page, forms are everywhere.

The <form> element is a container for different types of input elements. Two key attributes are:

action: The URL where the form data should be sent when submitted.

method: The HTTP method to use. The most common are GET (for retrieving data, like a search) and POST (for sending data to be processed, like a registration).

The Versatile `<input>` Element

Lists are perfect for grouping related items.

The <input> tag is the workhorse of HTML forms. Its behavior is determined by its type attribute.

type="text": A single-line text field.

type="password": A text field that masks the input.

type="email": A field for email addresses that browsers can validate.

type="submit": A button that submits the form.

type="reset": A button that resets the form to its initial values.

Making Choices with Radio Buttons and Checkboxes

Radio Buttons (type="radio"): Allow a user to select only ONE option from a limited set. All radio buttons in a group must have the same name attribute.

Checkboxes (type="checkbox"): Allow a user to select ZERO or MORE options.

The All-Important `<label>`

Notice the <label> tag in the example above. It is essential for accessibility. It connects the text description to the form control. Clicking on the label will focus or activate the input, which is a huge usability win. The for attribute of the label should match the id of the input.

Other Essential Form Controls

<textarea>: For multi-line text input, like a comment box.

<select>: A dropdown list.

<option>: An individual item within the <select> list.

<fieldset> & <legend>: Used to group related elements in a form, with <legend> providing a caption for the group.

A Note on HTML5 Inputs and Validation

HTML5 introduced many new input types (date, number, color, range) and built-in form validation. You can make an input field mandatory simply by adding the required attribute.

If a user tries to submit the form with this field empty, the browser will show an error message

Summary and Your Next Challenge!

You've now learned how to both display structured data and collect it from users—two massive steps in your web development journey!

Tables (<table>) are for displaying tabular data, using <tr>, <th>, and <td> to build the structure.

Forms (<form>) are for collecting user input with controls like <input>, <textarea>, and <select>.

Labels (<label>) are crucial for making your forms accessible and user-friendly.

Your Challenge: Create a "User Registration" page. You don't need to make it functional; just build the HTML structure. The form should include:

A fieldset for "Personal Details" containing:

First Name (text input)

Last Name (text input)

Email Address (email input)

Password (password input)

A fieldset for "Preferences" containing:

A choice between a "Free" and "Premium" account using radio buttons.

A dropdown list to select their favorite programming language (e.g., HTML, CSS, JavaScript).

A multi-line text area for a short bio.

A "Terms and Conditions" checkbox that must be checked (required).

A "Register" submit button.

This challenge will put everything you've learned in this post to the test.

Displaying Data with <table>

Merging Cells with colspan and rowspan

Interacting with Users via <form>

The Versatile <input> Element