Tables and Forms (9-2-2026) | CIS311

Overview

Kenan Casey explains semantic HTML for data tables and user forms, then demonstrates CSS techniques such as `border-collapse`, hover and focus states, and styling form controls. He covers accessible labels, specialized input types, and browser-native behaviors, then assigns a GitHub Pages project to replace generic `div` and text-input markup with appropriate semantic elements and styled controls.

Key takeaways

Semantic table markup distinguishes header cells from data cells; `<th>` and `<thead>` communicate structure, while `border-collapse: collapse` creates a connected grid instead of separated cell borders.
A working form relies on the `<form>` element’s `action` and `method`, plus a `name` on each submitted field; `type="submit"` invokes that standard submission behavior without custom JavaScript.
An input’s `name` identifies submitted data to the server, while its `id` can connect a `<label for="…">` and let client-side JavaScript target the control.
Radio buttons form a mutually exclusive group when they share a `name`; checkboxes allow multiple choices, and properly associated labels make both easier to understand and operate.
Native HTML input types can provide useful behavior without custom code: `email` validation, file selection, date and color pickers, and mobile numeric keyboards for telephone fields.
The homework applies semantic HTML and appropriate form controls to a GitHub project, preserving CSS class hooks and publishing the finished work through GitHub Pages.

Chapters

0:00 Table Semantics and CSS for Cleaner Data Grids

Use `<table>`, `<tr>`, and `<td>` for tabular data; mark heading cells with `<th>` and preferably group them in `<thead>` for semantic meaning.
Apply `border-collapse: collapse` to a table to remove gaps between cell borders; use `border-spacing` when separated cells are intentional.
Set table width or height as needed, align cell contents with `text-align` and `vertical-align`, and use `tr:hover` to highlight the row under the pointer.

5:10 Form Actions, Input Names, and Basic Text Fields

Wrap user-input controls in a `<form>`; its `action` identifies the server route that receives data, while `method` selects `get` or `post`—Kenan Casey says `post` is the usual choice.
An `<input type="text">` creates a text box, while `type="password"` masks the characters displayed without changing the submitted value.
A submit input sends the form to its configured action using its method without requiring custom JavaScript.
Give working form fields a `name` so the server can identify submitted values; use an `id` for browser-side JavaScript and a `placeholder` for brief guidance.

11:57 Styling Inputs, Focus States, and Resizable Text Areas

Use familiar CSS such as `width`, `padding`, `margin`, `border`, and `border-radius` to make form fields more comfortable and visually consistent.
Style `input:hover` to indicate interactivity and provide an `input:focus` state so users can identify the field currently receiving their input.
Use `<textarea>` for paragraph-length entries; browsers such as Chrome may let users resize it, so a `max-width: 100%` can help keep it within its parent.
Add a focus style to text areas too; text typed into the element is actual content, unlike a placeholder that disappears when the user starts typing.

16:36 Select Menus, Radio Groups, and Accessible Labels

Build a dropdown with `<select>` and `<option>`; an option’s visible text can differ from its `value`, which is the value submitted to the server.
Native dropdown appearance and opened menus vary across macOS, iPhone, and Android; retaining familiar operating-system behavior can support usability.
Radio inputs allow one choice from a set; give every option the same `name` and distinct `value` attributes to make the choices mutually exclusive.
Associate each `<label for="…">` with the matching input `id` to clarify controls for screen-reader users and make labels easier to target in styling.

23:36 Checkboxes, Buttons, and Semantic Form Grouping

Use `type="checkbox"` for selections that can be combined; make the label clickable and use a pointer cursor to provide a larger, easier target.
Target specific controls with attribute selectors such as `input[type="radio"]`, rather than styling every input identically.
A general `<button>` can trigger an action inside or outside a form; `<optgroup>` can organize related options within a `<select>`.
Use `<fieldset>` to group related form controls and `<legend>` to name the group; `<textarea>` also supports `rows` and `cols` attributes.

27:57 Specialized Input Types for Validation and Device Convenience

Choose input types that match the data: `email` provides browser validation, `file` enables uploads, and `color` opens a color picker.
Date, time, and month inputs can use operating-system controls, while `tel` may show a numeric keypad on mobile devices.
Other built-in choices include `range` sliders and hidden inputs; a reset button can erase entered data and may create a frustrating accidental-use experience.
Purpose-specific controls guide users toward correctly formatted data and improve convenience across different devices.

31:04 Homework 2: Repair Semantic HTML and Improve Form Controls

For homework 2, replace inappropriate generic `div` elements with semantic elements such as `<header>`, and change text-only inputs to suitable controls such as dropdowns or email fields.
Keep existing CSS classes where possible so the stylesheet continues to work after the HTML elements are corrected.
Improve the form’s appearance with more usable control styling, especially adequate padding; form-field styling is a priority even if other page styling remains mostly unchanged.
Fork Kenan Casey’s GitHub repository, make and commit changes, push them, and enable GitHub Pages to publish the updated site.

Summary, takeaways, and chapters were generated by AI from the video's transcript and may contain errors. The video belongs to its creator, Kenan Casey.