HTML: Tables and Forms

Objectives

• Use tables to structure a webpage

• Use forms to collect user input– Method:Get, Post– Input– Select– Textarea

In Class

• Keep 2 browser windows open.

• Try examples as we go along.

• Save notepad as html to desktop.

• (Double) click to see.

Tables

• To structure the page

• To arrange the elements on a page

• Contain rows of data cells

Defining a Table Structure

• The first step to creating a table is to specify the table structure:– the number of rows and columns– the location of column headings– the placement of a table caption

• Once the table structure is in place, you can start entering data into the table

<table>, <tr>, and <td> Tags

• Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure

• Each row of the table is indicated using a two-sided <tr> (for table row)

• Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells

Simple Table

<table> <tr>

<td> First Cell </td><td> Second Cell </td>

</tr> <tr>

<td> Third Cell </td><td> Fourth Cell </td>

</tr></table>– This creates a table with two rows and two columns

Simple Table

• Two rows and two columns

two rows

Headings

• HTML provides the <th> tag for table headings

• Text formatted with the <th> tag is centered within the cell and displayed in a boldface font

• The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

Table Caption

• The syntax for creating a caption is: <caption align=“alignment”>caption text</caption>– alignment indicates the caption placement

– a value of “bottom” centers the caption below the table

– a value of “top” or “center” (newer) centers the caption above the table

– a value of “left” or “right” (newer) place the caption above the table to the left or right

Table

• <table>...</table> enclose a table

– <tr>...</tr> enclose a table row.• <td>...</td> enclose a table data or cell.• <th>...</th> enclose a table header. It’s a

cell whose default is bold and centered. – <caption> ... </caption> enclose a caption

Cell spacing

• The cellspacing attribute controls the amount of space inserted between table cells

• <table cellspacing=“value”> … </table>– value is the width of the interior borders in

pixels– the default cell spacing is 2 pixels

Cell spacing

Cell Padding

• The cellpadding attribute controls the space within the cells

• <table cellpadding=“value”> … </table>– value is the distance from the table text

to the cell border, as measured in pixels

– the default cell padding value is 1 pixel

Cell Padding

Background Color

• You may specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells:<table bgcolor=“color”>

<tr bgcolor=“color”>

<td bgcolor=“color”>

<th bgcolor=“color”>– color is either a color name or hexadecimal

color value (to be discussed)

Attributes

• width – width of table in pixels or % of the browser window

• height – height of the table in pixels or % of the browser window

• cellpadding –the space between the cell border and the contents in pixels

• cellspacing – specifies the space between cells in pixels

Attributes

• align – left, center, right

• bgcolor – Background color of table

• border –– The width is in pixels. – The default is zero, or no border. – Including the border attribute without a value

produces a 1 pixel border.

• See syllabus

Attributes <tr>

• align

• bgcolor

Cell Width

• To set the width of an individual cell, add the width attribute to either the <td> or <th> tags

• The syntax is: width=“value”–value can be expressed either in pixels or

as a percentage of the table width

– a width value of 30% displays a cell that is 30% of the total width of the table

Cell Height

• The height attribute can be used in the <td> or <th> tags to set the height of individual cells

• The height attribute is expressed either in pixels or as a percentage of the height of the table

• If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text

Spanning Rows and Columns

• To merge several cells into one, you need to create a spanning cell

• A spanning cell is a cell that occupies more than one row or column in a table

• Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag.

• The syntax for these attributes is: <td rowspan=“value” colspan=“value”> … </td>– value is the number of rows or columns that the

cell spans in the table

Spanning Rows and Columns

• When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row

• When a cell spans several rows, the rows below the spanning cell must also be adjusted

Spanning Rows and Columns

• This cell spans three columns

This cell spans three

rows

Row-Spanning Cell

•

HTML code

resulting table

four table cells in the

first row

only three table cells are

required for the second and third rows

Aligning Contents

• By default, cell text is placed in the middle of a cell, aligned with the cell’s left edge

• You can specify a different horizontal alignment for a <td> or <th> element

align=“position”

position is left, center or right

Attributes <td>

• align – Horizontal alignment• valign – Vertical alignment (top, middle,

bottom)• width – Width of cell in pixels or

percentage of table width• height – Height of cell in pixels or

percentage of table height

Attributes <td>

• colspan – Makes cell take up space of one or more cells

• rowspan – Makes cell take up space of one or more rows

• bgcolor

Placeholder

• Insert a no-breaking space in the empty cell.<tr> <td>Row1 Col1</td> <td>Row2 Col2</td></tr><tr> <td> &nbsp; </td> <td>Row2 Col2</td></tr>

Nested Tables

• Tables can be created within the cell of another table.

• Carefully work on one table at a time.

Examples and homework

• See simple_calculator.html

• See table_example.html

• See form_border.html

• Do table assignment

HTML Forms

• http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html

• Summary of HTML tags for forms and examples of simple forms

• www.webcom.com/html/tutor/forms

• Forms tutorial

HTML Forms

• HTML Forms were the first way for users to interact with the Web– controls (inputs)– form submission– form processing

• Forms collect user input

• <form>…</form> encloses a form

CGI

• Common Gateway Interface

• Programs that let HTML pages (on server) interact with the viewers (clients) via HTTP.

• Programs can send specific information.

• Programs get information from users.

• Written in C/C++, Java, Perl, UNIX scripts.

• Executed on the server

Forms

• E-commerce• Feedback (surveys)• Searching

• Faster • More accurate• Cheaper• Virus free

• GET -- this is the default method and causes the fill-out form contents to be appended to the URL.

• POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

• ENCTYPE specifies the encoding for the fill-out form contents. This attribute applies only if METHOD is set to POST

Form Attributes

• Name

• Method– get -- this is the default method and causes

the fill-out form contents to be appended to the URL. Use only when submit has no effect. e.g. pure query.

– post -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

Form Attributes

• Action : – The URL to which the data is sent (may be

local) or– mailto: so the data just gets sent in an email.

• Enctype: the encoding for the fill-out form contents. This attribute applies only if the method is post.

Form Examples

<form name=“data” method=“post” action=“http://www.site.com/cgi-bin/myprog”>

<form method=“get” action=“/cgi-bin/myprog”>

<form method=post enctype=“text/plain” action=“mailto:me@site.com”>

<input type="text" name=“user" size="25"><br/><input type="submit" value="submit"><input type="reset" value="reset">

</form>

Form Contents

• A Form may contain anything except another Form.

• Interface elements (controls):– input tags– select tags– textarea tags

Input AttributesThe attributes to INPUT are as follows: TYPE must be one of:

"text" (text entry field; this is the default) "password" (text entry field; entered characters are represented as asterisks) "checkbox" (a single toggle button; on or off) "radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior) "submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server) "reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)

NAME is the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field. This must be present for all types but "submit" and "reset", as it is used when putting together the query string that gets sent to the remote server when the filled-out form is submitted.

VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset", VALUE can be used to specify the label for the pushbutton.

CHECKED specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.

SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE=width,height; e.g. SIZE=60,12. Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available.

MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that). If this is not present, the default will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

Input: type attribute

• <input type=“submit”> (submits data)• <input type=“reset”> (resets to defaults)• <input type=“button”> (user defined)• <input type=“text”>

– <input type=“password”> (asterisks)• <input type=“checkbox”> (toggle)• <input type=“radio”> (toggle-only one)• <input type=“hidden”> (isn’t displayed)

Input: type attribute

• Default is “text”

Other Input Attributes

• name

• value

• checked

• size

• maxlength

Submit Button

• When a user clicks on a submit button the browser submits the contents of all other fields to a web server using the method and action attributes.

• <input type=submit value=“Send now">

• May have multiple submit buttons on a page (with different values).

• Default value is “Submit Query”

Reset Button

• When user presses the reset the entire form is cleared.

• The displays are reset to the initial values which have been saved.

<input type=reset value="clear form">

Button

• “push button”

• User defined

• Discussed with JavaScript

Text

• Creates a text box into which user types.

• When the form contains only a single text entry field, the form can be submitted by pressing return in the text box as well as by pressing the Submit Query button.

• E.g. Google gives you this hint. Their submit button has the value “Google Search”.

Text

<input type=“text”

name=“pizza”

size=“10”

maxlength=“20”

value=“pepperoni”>

Text

<form method=“post” action=… enctype=…>please enter your name: <input type=“text” name="name"><br>

please enter your age: <input type=“text” name="age"><br>

<input type=“submit” value="submit"><input type=“reset” value=“clear form”></form>

Use Table to Format Form<form method=post action=… ><table><tr> <td>your name: </td> <td><input type=text name=“Name"></td></tr><tr> <td>your age:</td> <td> <input type=text name=“Age"></td></tr><tr> <td><input type=submit value="submit"></td> <td><input type=reset></td></tr></table></form>

Password

• Text appears as asterisks on screen.

• Why?

Checkbox

<input type=“checkbox" name=“extras” value=“radio”>Radio<input type=“checkbox" name=“extras” value=“ac">A/C<input type=“checkbox" name=“extras” value=“gps”>Global Positioning System<input type=“checkbox" name=“extras” value=“leather">Leather seats

Checkbox

• “extras” is the name of the checkbox, and links the group of checkboxes.

• “value” is the text that will be sent if the box has been checked.

• Any number of boxes may be selected.

• They may be initially selected or deselected.

Radio Buttons

<input type=“radio" name=“card” value=“J”>Jack<input type=“radio" name=“card” value=“Q">Queen<input type=“radio" name=“card” value=“K”>King<input type=“radio" name=“card” value=“A">Ace

Radio Buttons

• “card” is the name of the group and links the group of radio buttons. Every button in the group must have the same name.)

• “value” is the text that will be sent to the server if that button is chosen.

• Only one button can be selected—they are mutually exclusive.

Select

• Menu

• Dropdown list

• Scrolling list

Select

• SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed.

• SELECTED attribute specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

Select

<SELECT NAME="a-menu">

<OPTION> Pick option.

<OPTION> First option.

<OPTION> Second option.

</SELECT>

Attributes for Select

• NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form.

• SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.

Attributes for Select

• MULTIPLE, if present, specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

Select

<strong>Color</strong><select name=“color”>

<option value=“red”>Red<option value=“green”>Green<option value=“yellow”>Yellow<option value=“Blue”>Blue

</select>

Textarea

• The textarea tag creates an area where the user can submit multiple lines of text.

• <textarea > …</textarea> attributes:– name– Rows (default is 2)– Cols (width in characters) (default is 20)

Textarea• Has automatic scrollbar; any amount of text can

be entered.

• May have default contents : <textarea name=address cols=40 rows=5>

Default contents go here. </textarea> <br>

• Newlines are respected. There will be a newline both before and after "Default contents go here."

Example

<form method=post action=… >

please enter your address :<br/><textarea name=address cols=40 rows=5>

</textarea> <br/><input type=submit value=submit></form>

Hidden

• Nothing is displayed by the browser.

• Name and value are sent when submitted

• stores info between client/server exchanges that would otherwise be lost

• Not really hidden. Can see it in the source.

<input type=hidden name=sh value = myst>

Examples

• http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/example-1.html

• Can you code these? His source is a nightmare.

• See form group example

• See menus.html ?

Homework

Summary

• Tables (rows of data cells) to arrange elements on a webpage

• Forms to collect user data and send it to server.– Attributes :Method, Action– Input elements – we’ve seen (what are they?):

• Buttons (3)• Texts (2)• Toggles (2)• Hidden (1)

– Textarea– Select