|
|
|
|
|
|
Use tables to structure a webpage |
|
Use forms to collect user input |
|
Method:Get, Post |
|
Input |
|
Select |
|
Textarea |
|
|
|
|
Keep 2 browser windows open. |
|
Try examples as we go along. |
|
Save notepad as html to desktop. |
|
(Double) click to see. |
|
|
|
|
|
|
To structure the page |
|
|
|
To arrange the elements on a page |
|
|
|
Contain rows of data cells |
|
|
|
|
|
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 |
|
|
|
|
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 |
|
|
|
|
|
<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 |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
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> 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 |
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
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) |
|
|
|
|
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 |
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
colspan – Makes cell take up space of one or
more cells |
|
rowspan – Makes cell take up space of one or
more rows |
|
bgcolor |
|
|
|
|
Insert a no-breaking space in the empty cell. |
|
<tr> |
|
<td>Row1 Col1</td> |
|
<td>Row2 Col2</td> |
|
</tr> |
|
<tr> |
|
<td> </td> |
|
<td>Row2 Col2</td> |
|
</tr> |
|
|
|
|
|
|
Tables can be created within the cell of another
table. |
|
Carefully work on one table at a time. |
|
|
|
|
See simple_calculator.html |
|
See table_example.html |
|
See form_border.html |
|
Do table assignment |
|
|
|
|
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 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 |
|
|
|
|
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 |
|
|
|
|
|
|
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 |
|
|
|
|
|
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. |
|
|
|
|
|
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
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> |
|
|
|
|
|
A Form may contain anything except another Form. |
|
Interface elements (controls): |
|
input
tags |
|
select
tags |
|
textarea
tags |
|
|
|
|
|
The 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=“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) |
|
|
|
|
|
|
|
|
name |
|
value |
|
checked |
|
size |
|
maxlength |
|
|
|
|
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” |
|
|
|
|
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"> |
|
|
|
|
|
|
“push button” |
|
User defined |
|
Discussed with JavaScript |
|
|
|
|
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”. |
|
|
|
|
<input type=“text” |
|
name=“pizza” |
|
size=“10” |
|
maxlength=“20” |
|
value=“pepperoni”> |
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
Text appears as asterisks on screen. |
|
Why? |
|
|
|
|
<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 |
|
|
|
|
“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. |
|
|
|
|
<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 |
|
|
|
|
“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. |
|
|
|
|
Menu |
|
Dropdown list |
|
Scrolling list |
|
|
|
|
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 NAME="a-menu"> |
|
<OPTION> Pick option. |
|
<OPTION> First option. |
|
<OPTION> Second option. |
|
</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. |
|
|
|
|
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. |
|
|
|
|
|
|
<strong>Color</strong>
<select name=“color”>
<option value=“red”>Red
<option value=“green”>Green
<option value=“yellow”>Yellow
<option value=“Blue”>Blue
</select> |
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
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." |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<form method=post action=… > |
|
|
|
please enter your address :<br/> |
|
<textarea name=address cols=40 rows=5> |
|
</textarea> <br/> |
|
<input type=submit value=submit> |
|
</form> |
|
|
|
|
|
|
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> |
|
|
|
|
|
|
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 border example |
|
|
|
|
|
|
|
|
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 |
|
Notes