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:
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:
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:
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:
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:
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.
Table Content Table Content Table Content
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