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. (table row) is the container for yet another tag; (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 It is best to think of tables as containing rows and columns - in which case controls the rows and the columns. Everything that is required to be upon one row should be placed within 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

The indenting is done solely to help you understand what is going on. Table Rows and Columns This table has a border and cell padding of 10

Table Data Cells 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 colspan - merges cells horizontally My Example Data Cell 1 Data Cell 2 My Example Data Cell 1 Data Cell 2

Examples Demo examples Lab exercise 1

Forms Forms are one of many ways that users can provide feedback about a site without having to go to the trouble of ing 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: 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 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 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. As the example suggests, these sort of inputs are most often used to pass information to processing scripts.

Buttons 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. This is choice 1. This is choice 2.

Checkbox & File Selection The addition of the “checked” attribute means that the checkbox will initially appear checked rather than blank. Allows users to attach external files when submitting a form

Submit() & Reset() Buttons Sends the form to the form processing application. 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). 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 search?p=football Sends data to the server as a string appended to the URL separated by the ? character. POST 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