Session 2

Tables and forms in HTML

Adapted by Sophie Peter from original document by Charlie Foulkes

Tables• The original purpose of tables was to display

data in neatly organised rows and columns. However, for web designers, they are the best layout device for ensuring consistent browser interpretation of pages. It takes a bit of lateral thinking to use them effectively, especially when used for controlling highly graphic sites, although quite often you can get your graphic software to chop up pictures and write the HTML code for displaying them.

Table Rows and Table Data Cells• Of course, it’s not enough to tell the browser

that a table merely exists - the rows and cells of that table must then be defined, and the content inserted between the tags.<tr> (table row) is the container for yet another tag; <td> (table data) which is basically the container for text and/or images which you want to put in the table. These tags must be nested within each other to work properly.

Table Rows <tr>

• It is best to think of tables as containing rows and columns - in which case <tr> controls the rows and <td> the columns. Everything that is required to be upon one row should be placed within <tr></tr> tags.

• bgcolor=#FFCCFF Setting a background colour for a row will override any the background colour set for the table as a whole.

Table Rows and Columns

<tr>

<tr>

</tr>

</tr>

<td></td>

<td></td>

<td></td>

<td></td>

The indenting is done solely to

help you understand what

is going on.

The indenting is done solely to

help you understand what

is going on.

Table Rows and Columns

<table border="10" cellpadding="10"> <tr> <td>This table</td> <td>has a border</td> </tr> <tr> <td>and cell</td> <td>padding of 10</td> </tr></table>

Table Data Cells <td>Has the following attributes:• align=“left” or “center” or “right”

aligns text within the cells horizontally, default = left.• valign=“top” or “middle” or “bottom”

aligns text vertically, default = middle.• rowspan=n or colspan=n specifies the number of

rows or columns the cell should span (see over).• bgcolor=#?????? background=“URL” specifies

a colour or background image for the cell.

• nowrap switches off text wrapping.• height, width set as pixels or

percentages.

Table Data Cells <td>

colspan - merges cells horizontally

<table>

<tr>

<td colspan=2>My Example</td>

</tr>

<tr>

<td>Data Cell 1</td>

<td>Data Cell 2</td>

</tr>

</table>

My Example

Data Cell 1

Data Cell 2

Examples

• Demo examples• Lab exercise 1

Forms<form></form>• Forms are one of many ways that users can

provide feedback about a site without having to go to the trouble of emailing to you. They can be used to request further information (perhaps by snail-mail), as the basis for JavaScript programs or ordering goods online.

(Example)

Forms• Each form has elements such as text boxes

and buttons which allow the user to input information in some way. Hence the tag that is used to insert them:

<input type=“button” name=“myButton” value=“Click me!”>

It is necessary to name these elements so that they can be identified in the code. To attach an event to a particular

button the browser needs to know which button it is, especially if there is more than one button on the web page.

Text Boxes

<input type=“text” name=“myText”

maxlength=30

Sets the number of characters which can be input.

size=40

Sets the size of the text box to be displayed.

value=“Enter text here!”>

Sets the default text which appears in the text box.

Text Areas

<textarea rows=5 cols=40></textarea> • Creates a text box which can display more than

one line of text with or without scroll bars. The number of lines is specified by the cols and rows attributes.

• A number of different options are offered for wrapping text within the text area:

wrap=“virtual | soft | physical | hard”

Password Boxes & Hidden Inputs

<input type=“password” name=“passBox”>• Provides a text box whose input text is converted to

asterisks (*) nb this does not encrypt or protect the data being sent in any way.

<input type=“hidden” name=“info” value=“useful-to-CGI-program”>

• As the example suggests, these sort of inputs are most often used to pass information to processing scripts.

Buttons<input type=“button” name=“myButton” value=“Click me!”>

• It is not only necessary to name form elements (such as buttons) for use in JavaScript code, but in order to pass the value for each element to the form-processing application.

• The value attribute here is used to determine what text appears upon the button itself.

Radio Buttons• To create a group of radio buttons where only one

can be selected all the buttons must have the same name. The value attribute does not specify the text to the right of the button, but the value sent to the form processing application when the form is submitted.

<input type="radio" name="myRadio" value="Choice 1" checked>This is choice 1. <br><input type="radio" name="myRadio" value="Choice 2">This is choice 2.

Checkbox & File Selection<input type=“checkbox” name=“myCheck” checked>

• The addition of the “checked” attribute means that the checkbox will initially appear checked rather than blank.

<input type=“file” name=“fileBox”>• Allows users to attach external files when

submitting a form

Submit() & Reset() Buttons<input type=“submit” value=“Click here to submit form.”>

Sends the form to the form processing application.

<input type=“reset” value=“Click to clear the form.”>

Clears the form and resets elements to default values.

• The value attribute allows you to specify an alternative to the text - Submit or Reset - that appears on the buttons by default.

Getting at the Data• When the data from each form element is

‘Submitted’ the data is sent as a “name=value” pair (value being whatever the user has entered).

<input type=“text” name=“record”><input type=“text” name=“artiste”>

If a user enters their favourite record into the text box (e.g. “I Should Coco”) the data output will equal:

record=I+Should+Coco&artiste=Supergrass odd characters, such as new line, are often expressed in peculiar terms, like %20.

Form - Actions & Methods

<form action=“/cgi-bin/formail.pl”

method=GET or POST>• action points to the web address of the program

used for deciphering the form data, in this case a Perl script.

• method specifies the way in which the data is sent to the web server. Most scripts will expect the data to be sent via the POST method, but instructions that come with the script will make it clear.

Form - GET and POST

GET http://search.yahoo.com/bin/

search?p=football

Sends data to the server as a string appended to the URL separated by the ? character.

POST http://www.blah.com/cgi-bin/formail.pl HTTP 1.0…[headers] record=I+Should+Coco&artiste=Supergrass

The web server responds to the POST command by getting ready to receive data, which is transmitted as a separate HTTP message. This method is preferred by the WC3 and is better for sending large amounts of data.

Examples

• Demo examples• Lab exercise 2