Web Development Study Guide: Online Lessons 5–6

How to use this guide

Use this guide after reading Lessons 5 and 6 and completing the labs. Practice reading short pieces of table and form code and predicting exactly what the browser shows or sends. Build a small table and a small form yourself, submit the form to a test engine, and compare the name=value results with what you typed.

The ideas that connect Lessons 5–6

Lesson 5 organizes information a page displays; Lesson 6 collects information from the people who use the page. Both lessons depend on the same habits:

Choose the element that matches the content: a table for data in rows and columns, a form field that matches the kind of answer you need.
HTML builds the structure; CSS handles the appearance. Presentational HTML attributes such as border on a table are deprecated.
Attributes carry meaning: colspan and rowspan change a table’s grid, while name, value, type, method, and action decide what a form sends and where.
Keep it simple. Plain tables and short, clearly labeled forms are easier to use, easier to maintain, and better for search engines.

Lesson 5 — HTML Tables

When to use a table

A table presents information that naturally belongs in rows and columns: schedules, price lists, grades, and directories. Tables add styling control and semantic meaning that the <pre> tag cannot provide.

Do not use tables to lay out a page. The W3C recommends HTML5 structure elements (<header>, <nav>, <section>, <article>, <aside>, <footer>) for page structure. Layout tables are hard to update, confuse screen readers, do not adapt to small screens, and may lower a page’s search ranking. Use data tables tastefully and sparingly.

The table structure tags

Tag	Description	Required?
`<table>...</table>`	Contains all other table elements	Required
`<caption>...</caption>`	Adds a title, which appears above the table by default	Optional
`<tr>...</tr>`	Contains all data for a table row	Required
`<th>...</th>`	Header cell; typically designates cells in the top row or left column	Optional
`<td>...</td>`	Designates table cell contents (table data)	Required

The required tags are <table>, <tr>, and <td>. The caption is the table element that appears apart from the table itself, above the grid by default. Place <caption> first inside <table>, and put every cell inside a <tr>.

<table>
  <caption>
    Table Elements
  </caption>
  <tr>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>13.95</td>
    <td>72</td>
  </tr>
</table>

By default, a table has no visible border. Header cells (<th>) are bold and centered; data cells (<td>) are normal weight and left-aligned. Both are vertically centered. Align content consistently within each column; numbers are commonly right-aligned.

CSS properties for table elements

The old HTML border attribute (<table border="1">) is deprecated in HTML5 and fails validation. Style tables with CSS instead. The same properties work on table, tr, th, and td; the selector decides where the style applies.

Property	Description
`border`	Determines the style of the border: width, line style, and color, such as `1px solid gray`
`border-collapse`	Combines the borders of adjacent cells into a single border instead of separating them (`collapse`)
`border-spacing`	Determines the amount of space between the borders of adjacent cells
`padding`	Determines the amount of space between cell data and the cell border
`width`	Determines how far the table or cell will extend horizontally across the page
`text-align`	Determines line justification: aligns content horizontally (`left`, `center`, `right`, `justify`)
`vertical-align`	Determined by the relative placement between the top and bottom margins: aligns content vertically (`top`, `middle`, `bottom`)
`background-color`	Fills the table, a row, or a cell with a color name or hex code
`height`	Sets the height of the table or a row; among cells in one row, the largest height wins

Values to remember:

border-spacing and padding are specified in pixels in this course, such as border-spacing: 6px; and padding: 15px;.
width can be specified in pixels or as a percentage. A percentage (such as width: 90%;) adapts to the screen, so it is the better practice for tables that must fit every device.

Keep the most-confused pair straight: padding is inside a cell; border-spacing is between cells. Border-spacing has no visible effect once borders are collapsed.

table {
  border-collapse: collapse;
  width: 90%;
}

th,
td {
  border: 1px solid gray;
  padding: 15px;
}

text-align: center centers content inside cells; it does not move the table. To center the whole table on the page, give it automatic left and right margins:

table.center {
  margin-left: auto;
  margin-right: auto;
}

Spanning columns and rows

colspan and rowspan are HTML attributes of <th> and <td>. They specify the number of columns or rows that a single table cell occupies.

<tr>
  <th colspan="3">Site Development Associate</th>
</tr>

This heading is located in one cell that spans three columns of the table. It is not “in the third column,” and the number is not a width in inches or percent.

<tr>
  <th rowspan="5">Site Development Associate</th>
</tr>

This row heading is located in one cell that vertically spans five rows of the table, counting the row where it starts.

When a cell spans, remove the cells it covers. A colspan="2" header replaces two header cells, and rows under a rowspan cell have one fewer cell. Forgetting to remove the covered cell makes a cell stick out of the grid.

Responsive tables

Bootstrap is a free, open-source front-end framework of HTML and CSS design templates. Wrapping a table in <div class="table-responsive"> lets a wide table scroll inside its own box on a small screen instead of forcing the whole page to scroll sideways. Responsive design means a site works properly on every screen size and resolution.

Lesson 5 terms to know

table, caption, tr, th, td, header cell, data cell, border, border-collapse, border-spacing, padding, width, height, background-color, text-align, vertical-align, colspan, rowspan, deprecated, margin-left: auto, layout table, HTML5 structure elements, Bootstrap, table-responsive, responsive design

Lesson 6 — Web Forms

How a form reaches the server

A Web form collects input from users. The form alone does nothing useful; something on the server must process the data. The elements necessary for client-server communication are:

Web browser — displays the form and sends the data.
Web form — the fields the user fills in.
Web server — receives the request (for example, IIS, Tomcat, or Apache).
Server-side script or CGI script — processes the data on the server.

A server-side script stays on the server and processes form input there. Modern server-side languages that handle form input include PHP, ASP (ASP.NET), and Java.
A client-side script is code embedded in an HTML page and downloaded by the user to help process Web form input, such as JavaScript.
The Common Gateway Interface (CGI) is the long-standing standard that lets a Web server pass form data to a program. CGI scripts have traditionally been written in Perl.

Do not confuse the categories: IIS, Tomcat, and Apache are Web servers; Linux/UNIX, Mac, and Windows are operating systems; PHP, ASP, and Java are scripting and programming languages.

Submit, reset, and raw text strings

Submitting the form uploads the data from all fields to the receiving server, where it is processed by the script specified in the <form> tag’s action attribute.
Resetting the form clears the data and redisplays every field with its default value.

When you submit, the browser sends the form’s contents as a raw text string of name=value pairs:

Name=Dimitri+Pappas&Email=student50@class.com&AddToList=yes

The name attribute of each field supplies the name half; the user’s entry or the field’s value supplies the value half.
Ampersands (&) delimit the name=value pairs.
Plus signs (+) replace spaces.
An empty text box sends its name with nothing after the equal sign, such as Email=.

On the Web server, a server-side script parses the raw text string and formats it into a human-readable format:

Name:          Dimitri Pappas
Email:         student50@class.com
Mailing List:  Yes

A script can then store the data, search a database, send a response to the user, or transmit the data by email, FTP, HTTP, or HTTPS. PHP’s mail() function is a common way to email form results.

The `<form>` tag

<form>...</form> is the container for every field. Always include the closing tag.

<form method="post" action="http://www.anyserver.com/cgi-bin/scriptfile">
  ...
</form>

Attribute or value	Description
`method`	Specifies the manner in which the browser will send form data to a Web server
`action`	Specifies the name and location of the CGI or other server-side script used to process the form
`get`	Appends the form data to the URL for use in a query string; the default method
`post`	Sends the data in the body of the request; allows sending more characters and is more secure than `get`

post keeps data out of the URL, but it does not encrypt the data. Only HTTPS encrypts form data in transit, so use post over HTTPS for anything sensitive.

The three field tags

Tag	Creates
`<input>`	Text boxes, password fields, checkboxes, radio buttons, file upload, the Submit and Reset buttons, and the HTML5 number, date, time, and range fields
`<select>`	Single-option and multiple-option lists from which users choose items; contains `<option>` elements
`<textarea>`	A scrolling text field into which users can enter multiple lines of text

With <input>, you designate the form field type by assigning a value to the type attribute. The name attribute labels each field’s data in the results.

Form field reference

Field	Description	Code
Text box	A text field into which a user can enter characters	`<input type="text">`
Password field	A text box that visually masks entered characters as filled circles	`<input type="password">`
Radio buttons	Round option buttons in a group of two or more mutually exclusive options	`<input type="radio">`
Checkboxes	Square boxes in a group of two or more non-exclusive options	`<input type="checkbox">`
Single-option select list	A drop-down list of two or more options from which a single selection can be made	`<select>`
Multiple-option select list	An exposed list of two or more options, optionally scrollable, from which a user can make more than one selection	`<select multiple="multiple">`
Text area	A scrolling text field into which the user can enter multiple lines of text	`<textarea>`
File upload	A button and field that let users navigate to and select a local file for uploading	`<input type="file">`
Submit button	A button that, when clicked, causes the form’s action statement to process	`<input type="submit">`
Reset button	A button that clears all form data and sets all fields back to their default values	`<input type="reset">`

Text boxes

<input
  type="text"
  name="City"
  value="Booneville"
  size="30"
  maxlength="40"
  placeholder="Your city"
/>

value places default text inside the text box.
size sets the display width in characters.
maxlength sets the maximum number of characters a user can enter.
placeholder shows a hint that disappears when the user types and is not submitted.

File upload

<input type="file" name="File" />

This creates a Browse (or Choose File) button so users can select and upload files to your site.

Radio buttons and checkboxes

<input type="radio" name="AddToList" value="yes" checked="checked" /> Yes
<input type="radio" name="AddToList" value="no" /> No

Radio buttons are exclusive because every button in the group shares the same name attribute. Each button has its own value.
checked="checked" designates the preselected option.
Checkboxes allow any number of choices. Give checkboxes separate names to record each choice as its own field, or a shared name to treat them as one grouped field. The type keyword is checkbox, one word.

Select lists

<select name="timeofday" multiple="multiple" size="4">
  <option>Morning</option>
  <option>Afternoon</option>
  <option>Evening</option>
  <option value="Remove">Never</option>
</select>

multiple="multiple" allows users to choose more than one option (Ctrl+click or Cmd+click).
size controls the number of items that appear in the scrolling list box. If you omit size, the number of items shown by default depends on the browser.
An <option> submits its visible text unless it has a value, which is sent instead.

Scrolling text area

<textarea name="comments" cols="30" rows="3"></textarea>

cols specifies the width in characters.
rows specifies the number of visible lines.
Text placed between the tags appears as default text.

HTML5 input types

<input type="number" name="age" min="15" max="65" />
<input type="date" name="date" />
<input type="range" name="rating" min="1" max="10" value="5" />

number accepts numbers within min and max, with optional step and a default value.
date, time, and datetime-local show a picker in supporting browsers.
range shows a slider for an approximate value; the default range is 0–100.
email checks for a valid email address.

CAPTCHAs and SEO

A CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) is a challenge that separates people from automated bots to stop spam submissions. Text, image, and audio versions exist; audio CAPTCHAs support users who are blind or have low vision. Google’s reCAPTCHA moved from typed words toward analyzing user behavior.

Search engine optimization (SEO) means designing pages so search engines rank them highly. For forms:

Create as simple a form as possible; extra fields can lower the score.
A CAPTCHA can lower the score because bots stop there.
Use informative, descriptive labels for fields.
Provide a clear call to action, alt text for images, text navigation, responsive design, and cross-links to important pages.

Lesson 6 terms to know

Web form, Web server, server-side script, client-side script, CGI, Perl, PHP, ASP.NET, raw text string, name=value pair, ampersand, parse, submit, reset, form, method, action, get, post, HTTPS, input, type, name, value, size, maxlength, placeholder, text box, password field, radio button, checked, checkbox, file upload, select, option, multiple, textarea, cols, rows, number, date, range, CAPTCHA, reCAPTCHA, SEO