SENG1050 Chap.5 HTML Forms, Tables and CSS Layout
HTML Forms, Tables and CSS Layout
This chapter follows the Week 5 lecture, the last week inside the quiz's range.
It covers the semantic structural elements that outline a page, how forms collect data through named controls, labels and grouped radio buttons, the difference between GET and POST, how tables are structured and how cells span, the purpose and position of a CSS reset, and how normal flow, display, the position values, float, clear and flexbox arrange content.
The matching lab builds a long labelled form, a data table with a caption and spans, and several layout patterns such as a sticky navigation bar.
What this chapter covers
- 01
Header, nav, main and footer
- 02
Section, article and aside
- 03
Form controls and labels
- 04
Radio buttons, checkboxes and menus
- 05
GET versus POST
- 06
Table parts, colspan and rowspan
- 07
CSS reset and its link order
- 08
Positioning, float and flexbox
Worked example · free
Outline a page with semantic structural elements
- 1The banner goes in header and the menu bar in nav, because it is a major block of navigation links.
- 1The two stories are self-contained, so each is an article, both inside a single main; the related links are tangential, so they go in aside.
- 1The copyright strip goes in footer. Only one visible main is allowed on the page.
Key terms
- Structural element
- A structural element is a semantic HTML element, such as header or nav, that labels a region of the page by its role.
- Form control
- A form control is an input element such as a text box, checkbox, radio button or menu whose named value is sent with the form.
- Form action
- The form action is the URL of the server-side program that receives and processes the submitted data.
- Rowspan
- Rowspan is a table-cell attribute that stretches the cell down across several rows.
- CSS reset
- A CSS reset is a style sheet linked first to override differing browser defaults.
- Sticky positioning
- Sticky positioning keeps an element in normal flow until a scroll threshold, then holds it in place.
- Flexbox
- Flexbox is a layout mode, set with display: flex, that arranges child elements along a row or column.
- Normal flow
- Normal flow is the default layout, where block boxes stack and inline boxes run along a line.
- Fieldset
- A fieldset groups related form controls, with a legend element naming the group.
HTML Forms, Tables and CSS Layout FAQ
When should a form use GET and when POST?
GET appends the data to the URL as name and value pairs, so it suits searches and filters that may be bookmarked or shared, but never passwords or other sensitive data. POST sends the data in the request body, with no practical size limit, and suits logins, payments and changes to stored data.
Why do radio buttons in a group share the same name?
The shared name tells the browser the buttons belong to one group, so only one can be selected and only that button's value is sent to the server under the group name. Checkboxes can share a name too, but they allow several values at once.
Why must the CSS reset be linked before my own style sheet?
Rules of equal specificity from external sheets are applied in order, and the later one wins. Linking the reset first lets it clear browser defaults, and your own sheet, linked after it, then sets the styles you actually want.
How do colspan and rowspan change the number of cells in a row?
A cell with colspan stretches across that many columns, so the row needs fewer cells. A cell with rowspan reaches down into later rows, so each of those rows needs one fewer cell in that position. Count cells row by row to check.
What is the difference between absolute and fixed positioning?
Both remove the element from normal flow and leave no gap. An absolutely positioned element is placed against its nearest positioned ancestor, while a fixed element is placed against the browser window, so it stays in view as the page scrolls.
Exam move
Write one complete form by hand that uses every common control: text, number, radio group, checkbox, select, textarea and a submit button, each with a label and a name. Then write a three-column table with a spanning header and a rowspan cell, counting cells row by row. Finish by matching each position value to a page element you have seen behave that way.
Then explain in two sentences when a form should use GET and when it should use POST, with one example of each.
Working through HTML Forms, Tables and CSS Layout in SENG1050? Sia is AskSia’s AI Computer Science tutor — ask any SENG1050 HTML Forms, Tables and CSS Layout question and get a clear, step-by-step explanation grounded in how SENG1050 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
