Do-It-Yourself Tutorial

Basic Forms and Tables


Section 1 : Basic Forms

1-1 and 1-2 The anatomy of a Form

<FORM METHOD="POST" ACTION="MAILTO:email@host.com">
This is where your elements in your form would be.
<INPUT TYPE="checkbox" NAME="cats" CHECKED> cats
<INPUT TYPE="checkbox" NAME="dogs"> dogs
<INPUT TYPE="submit" VALUE="SUBMIT IT">
</FORM>

Example:


A simple form

cats
dogs



1-3 Submit Button

<FORM METHOD="POST" ACTION="MAILTO:email@host.com">
<INPUT TYPE="submit" VALUE="SUBMIT IT">
</FORM>

Example:



1-4 Text Input Fields

Regular text field:

<FORM METHOD="POST" ACTION="MAILTO:email@host.com">
<INPUT TYPE="text" NAME="myText1" SIZE="50" MAXLENGTH="50">
</FORM>

Text field with password:

<FORM METHOD="POST" ACTION="MAILTO:email@host.com">
<INPUT TYPE="password" NAME="myText2" SIZE="10">
</FORM>

Example:

With Maxlengh at 50:


With with password:



1-5 Radio Buttons

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<INPUT TYPE="radio" NAME="theType" VALUE="yes" CHECKED> Yes
<INPUT TYPE="radio" NAME="theType" VALUE="no"> No
<INPUT TYPE="radio" NAME="theType" VALUE="maybe"> Maybe

</FORM>

Example:


Yes
No
Maybe


1-6 Checkboxes

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<INPUT TYPE="checkbox" NAME="cat" VALUE="chosen" CHECKED> cat
<INPUT TYPE="checkbox" NAME="dog" VALUE="chosen"> dog
<INPUT TYPE="checkbox" NAME="duck" VALUE="chosen"> duck

</FORM>

Example:

Cat
Dog
Duck


1-7 Images

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<INPUT TYPE="image" SRC="submit_image.gif" BORDER="0">
</FORM>

Example:


1-8 Reset

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<INPUT TYPE="reset" VALUE="RESET">
</FORM>

Example:

Cat
Dog
Duck


1-9 Selections

Pop-up box Selections:

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<SELECT NAME="colors">
<OPTION VALUE="red">red
<OPTION VALUE="green">green
<OPTION VALUE="blue" SELECTED>blue
<OPTION VALUE="violet">purple
</SELECT>

</FORM>

Example:

Multiple Selections:

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<SELECT NAME="shopping" MULTIPLE SIZE="3">
<OPTION VALUE="oranges">oranges
<OPTION VALUE="lunch bags">lunch bags
<OPTION VALUE="tuna" SELECTED>tuna
<OPTION VALUE="milk">milk
<OPTION VALUE="vaccuum bags">vaccuum bags
</SELECT>

</FORM>

Example:


1-10 Text Areas

<FORM METHOD="POST" ACTION="MAILTO:youremail@yourhost.com">
<TEXTAREA NAME="bodytext" ROWS="10" COLS="100" WRAP="HARD">
Default text goes here. (Optional)
</TEXTAREA>
</FORM> Example:


Section 2 : Tables

2-3 Table tag, Rows and Cells

<TABLE BORDER="1">
<TR>
<TD>
Table Content 1
</TD>
<TD>
Table Content 2
</TD>
</TR>
<TR>
<TD>
Table Content 3
</TD>
<TD>
Table Content 4
</TD>
</TR>
</TABLE>

Example:

Table Content 1 Table Content 2
Table Content 3 Table Content 4


2-4 Table Headings

<TABLE BORDER="1">
<TR>
<TH>
Heading 1
</TH>
<TH>
Heading 2
</TH>
</TR>
<TR>
<TD>
Table Content 1
</TD>
<TD>
Table Content 2
</TD>
</TR>
</TABLE>

Example:

Heading 1 Heading 2
Table Content 1 Table Content 2

Heading along the left edge of the table:

<TABLE BORDER="1">
<TR>
<TH>
Heading 1
</TH>
<TD>
Table Content 1
</TD>
</TR>
<TR>
<TH>
Heading 2
</TH>
<TD>
Table Content 2
</TD>
</TR>
</TABLE>

Example:

Heading 1 Table Content 1
Heading 2 Table Content 2


2-5 Empty Cells

An empty cell:

<TABLE BORDER="1">
<TR>
<TD>
</TD>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content

Force an empty cell:

<TABLE BORDER="1">
<TR>
<TD>
<BR>
</TD>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:


Table Content Table Content


2-6 Captions

<TABLE BORDER="1">
<CAPTION ALIGN="TOP">
The Caption of your table
</CAPTION>
<TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

The Caption of the Table
Table Content Table Content Table Content

Caption aligned at the bottom <CAPTION ALIGN="BOTTOM"></CAPTION>:

The Caption of the Table
Table Content Table Content Table Content


2-7 Table Alignment

<TABLE BORDER="1" ALIGN="RIGHT">
<TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>
Text that will wrap around the table. Text that will wrap around the table. Text that will wrap around the table. Text that will wrap around the table.

Example:

Table Content Table Content Table Content
Text that will wrap around the table. Text that will wrap around the table. Text that will wrap around the table. Text that will wrap around the table.


2-8 Cell Alignment

<TABLE BORDER="1">
<TR ALIGN="LEFT" VALIGN="TOP">
<TD ALIGN="RIGHT" VALIGN="BOTTOM">
Table Content
</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content Table Content Table Content Table Content Table
Content


2-9 Cells that span multiple Rows or Columns

<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">
</TH>
</TR>
<TR>
<TH ROWSPAN="2">
First Heading
</TH>
<TH>
Second Heading
</TH>
</TR>
<TR>
<TD>
data
</TD>
</TR>
</TABLE>

Example:

Main Heading
First Heading Second Heading
data


2-11 Table and Column Widths

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD WIDTH="100">
Table Content
</TD>
<TD WIDTH="300">
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content

Table and columns by percentage:

<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="25%">
Table Content
</TD>
<TD WIDTH="75%">
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content


2-12 Border Widths

<TABLE BORDER="0">
<TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content
Table Content Table Content

Table with a 5 pixel border:

Table Content Table Content
Table Content Table Content


2-13 Cell spacing

<TABLE BORDER CELLSPACING="10">
<TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content
Table Content Table Content


2-14 Cell padding

<TABLE BORDER CELLPADDING="10">
<TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content
Table Content Table Content


2-14 Color in Tables

<TABLE BORDER BGCOLOR="GREY">
<TR BGCOLOR="#66CCCC">
<TD BGCOLOR="#CCCCCC">
Table Content
</TD>
<TD BGCOLOR="#669933">
Table Content
</TD>
</TR>
<TD>
Table Content
</TD>
<TD>
Table Content
</TD>
</TR>
</TABLE>

Example:

Table Content Table Content
Table Content Table Content