Tables and forms in HTML

1
Session 2

• Tables and forms in HTML

• Adapted by Sophie Peter from original document by
  Charlie Foulkes

2
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.

3
Table Rows and Table Data Cells

• Of course, its 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.lttrgt (table
  row) is the container for yet another tag lttdgt
  (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.

4
Table Rows lttrgt

• It is best to think of tables as containing rows
  and columns - in which case lttrgt controls the
  rows and lttdgt the columns. Everything that is
  required to be upon one row should be placed
  within lttrgtlt/trgt tags.
• bgcolorFFCCFF Setting a background colour for
  a row will override any the background colour set
  for the table as a whole.

5
Table Rows and Columns
lttrgt
lt/trgt
lttdgtlt/tdgt
lttdgtlt/tdgt
lttrgt
lt/trgt
lttdgtlt/tdgt
lttdgtlt/tdgt
6
Table Rows and Columns
lttable border"10" cellpadding"10"gt lttrgt
lttdgtThis tablelt/tdgt lttdgthas a borderlt/tdgt
lt/trgt lttrgt lttdgtand celllt/tdgt lttdgtpadding
of 10lt/tdgt lt/trgt lt/tablegt
The indenting is done solely to help you
understand what is going on.
7
Table Data Cells lttdgt

• Has the following attributes
• alignleft or center or right aligns text
  within the cells horizontally, default left.
• valigntop or middle or bottomaligns text
  vertically, default middle.
• rowspann or colspann specifies the number of
  rows or columns the cell should span (see over).
• bgcolor?????? backgroundURL specifies a
  colour or background image for the cell.
• nowrap switches off text wrapping.
• height, width set as pixels or percentages.

8
Table Data Cells lttdgt

• colspan - merges cells horizontally
• lttablegt
• lttrgt
• lttd colspan2gtMy Examplelt/tdgt
• lt/trgt
• lttrgt
• lttdgtData Cell 1lt/tdgt
• lttdgtData Cell 2lt/tdgt
• lt/trgt
• lt/tablegt

9
Examples

• Demo examples
• Lab exercise 1

10
Forms

• ltformgtlt/formgt
• 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)

11
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 themltinput typebutton
  namemyButton valueClick me!gt

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.
12
Text Boxes

• ltinput typetext namemyText
• maxlength30
• Sets the number of characters which can be input.
• size40
• Sets the size of the text box to be displayed.
• valueEnter text here!gt
• Sets the default text which appears in the text
  box.

13
Text Areas

• lttextarea rows5 cols40gtlt/textareagt
• 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 areawrapvirtual
  soft physical hard

14
Password Boxes Hidden Inputs

• ltinput typepassword namepassBoxgt
• 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.
• ltinput typehidden nameinfo
  valueuseful-to-CGI-programgt
• As the example suggests, these sort of inputs are
  most often used to pass information to processing
  scripts.

15
Buttons

• ltinput typebutton namemyButton
  valueClick me!gt
• 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.

16
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.

ltinput type"radio" name"myRadio" value"Choice
1" checkedgtThis is choice 1. ltbrgt ltinput
type"radio" name"myRadio" value"Choice 2"gtThis
is choice 2.
17
Checkbox File Selection

• ltinput typecheckbox namemyCheck checkedgt
• The addition of the checked attribute means
  that the checkbox will initially appear checked
  rather than blank.
• ltinput typefile namefileBoxgt
• Allows users to attach external files when
  submitting a form

18
Submit() Reset() Buttons

• ltinput typesubmit valueClick here to submit
  form.gt
• Sends the form to the form processing
  application.
• ltinput typereset valueClick to clear the
  form.gt
• 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.

19
Getting at the Data

• When the data from each form element is
  Submitted the data is sent as a namevalue
  pair (value being whatever the user has entered).
  ltinput typetext namerecordgtltinput
  typetext nameartistegtIf a user enters
  their favourite record into the text box (e.g. I
  Should Coco) the data output will
  equalrecordIShouldCocoartisteSupergrass
  odd characters, such as new line, are often
  expressed in peculiar terms, like 20.

20
Form - Actions Methods

• ltform action/cgi-bin/formail.pl
• methodGET or POSTgt
• 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.

21
Form - GET and POST

• GET http//search.yahoo.com/bin/
• search?pfootball
• 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.0headers recordIShouldCocoartisteSupergr
  ass
• 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.

22
Examples

• Demo examples
• Lab exercise 2