Tables in HTML

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms,
form fields, other tables, etc. -- into rows and columns of cells. Each table may have an associated
caption that provides a short description of the table's purpose. A longer description may also be
provided for the benefit of people using speech or Braille-based user agents. A table is divided into
rows, and each row is divided into cells. Table cells may either contain "header" information (TH
element) or "data" (TD element). At present, common table HTML elements and attributes are:

HTML Table Elements Description

<TABLE>...</TABLE> The Table delimiter.

<TR ...>...</TR> Used to specify number of rows in a table.

<TD ...>...</TD> Specifies table data cells

<TH ...>...</TH> Table Header cell

<CAPTION ...>...</CAPTION> Specifies the table Caption.

<THEAD>...</THEAD> Specifies the Table head.

<TBODY>...</TBODY> Specifies the Table body.

<TFOOT>...</TFOOT> Specifies the Table footer.

<TABLE>...</TABLE>

This is the main wrapper for all the other table elements, and other table elements will be ignored if
they aren't wrapped inside of a <TABLE>...</TABLE> element. The <TABLE> element has the
following attributes:

<TABLE>...</TABLE> Description
Attributes

BACKGROUND Specifies a background image for the table. If used in the <TABLE>
element, the image in question will be tiled behind all of the table cells.

BGCOLOR="#rrggbb|colo Specifies the background color of the table to be specified, using either
r name" the specified color names, or a rrggbb hex triplet.

ALIGN="left|right" It allows a table to be aligned to the left or right of the page, allowing text
to flow around the table.

BORDER Control and set the borders to be displayed for the table

BORDERCOLOR="#rrg sets the border color of the table, using either the specified color names,
gbb|color name" or a rrggbb hex triplet. It is necessary for the BORDER attribute to be
 present in the main <TABLE> element for border coloring to work.

CELLPADDING=value Specifies the amount of white space between the borders of the table cell
and the actual cell data.

FRAME Specifies the appearance of the Table frame. It requires the BORDER
attribute to be set and affects the display of the table borders. It can
accept any of the following values:

void This removes all the external borders

above This displays external borders at the top of the table only

below This displays external borders at the bottom of the table only

hsides This displays external borders at the horizontal sides of the table.-
at the top and bottom of the table

lhs This displays external borders at the left hand edges of the table
only

rhs This displays external borders at the right hand edges of the table
only

vsides This displays external borders at both left and right hand edges of
the table

box This displays a box around the table (that is, top, bottom, left and
right hand sides)

RULES Specifies the appearance of the Table dividing lines. It requires the
BORDER value to be set and may only be used in tables where the
<THEAD>, <TBODY> and <TFOOT> sections have been set. It affects
the display of the internal table borders ("rules"). It can accept the
following values:

none This removes all the internal rules

basic This displays horizontal borders between the <THEAD>,

<TBODY> and <TFOOT> sections

rows This displays horizontal borders between all rows

cols This displays horizontal borders between all columns

 all This displays all the internal rules.

<TR ...>...</TR>

This stands for table row. The number of rows in a table is exactly specified by how many <TR>
elements are contained within it. The <TR> element can have the following attributes.

<TR>...</TR> Attributes Description

BGCOLOR="#rrggbb|color Specifies the background color of the table row to be specified, using
name" either the specified color names, or a rrggbb hex triplet.

ALIGN="left|center|right" Specifies whether text inside the table cell(s) is aligned to the left, right
or center of the cell.

VALIGN="top|middle|botto controls whether text inside the table cell(s) is aligned to the top,
m|baseline" bottom, or vertically centered within the cell.

BORDERCOLOR="#rrgg sets the border color of the table row, using either the specified color
bb|color name" names, or a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE> element for border
coloring to work.

<TD ...>...</TD>

This stands for table data, and specifies a standard table data cell. Table data cells must only appear
within table rows. Each row need not have the same number of cells specified as short rows will be
padded with blank cells on the right. A cell can contain any of the HTML elements normally present in
the body of an HTML document. Internet Explorer will allows the use of <TD></TD> to specify a blank
cell, that will be rendered with a border (providing a border has been set). Other browsers will require
some character within a data cell for it to be rendered with a border. <TD ...>...</TD> can accept the
following attributes.

<TD>...</TD> Attributes Description

BACKGROUND Internet Explorer supports the placing of images inside the <TD>
element. If used in the <TD> element, the image in question will be
tiled behind the particular data cell.

BGCOLOR="#rrggbb|color Specifies the background color of the data cell to be specified, using
name" either the specified color names, or a rrggbb hex triplet.
ALIGN="left|center|right Specifies whether text inside the table cell(s) is aligned to the left, right
" or center of the cell.

VALIGN="top|middle|botto controls whether text inside the table cell(s) is aligned to the top,
m|baseline" bottom, or vertically centered within the cell.

BORDERCOLOR="#rrgg sets the border color of the data cell, using either the specified color
bb|color name" names, or a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE> element for border
coloring to work.

ROWSPAN="value" This attribute can appear in any table cell (<TH> or <TD>) and specifies
how many rows of the table this cell should span. The default
ROWSPAN for any cell is 1.

COLSPAN="value" This attribute can appear in any table cell (<TH> or <TD>) and it
specifies how many columns of the table this cell should span. The
default COLSPAN for any cell is 1.

<TH ...>...</TH>

This stands for table header. Header cells are identical to data cells in all respects, with the exception
that header cells are in a bold font, and have a = center default ALIGN. <TH ...>...</TH> can contain
the following attributes.

<TH>...</TH> Attributes Description

BACKGROUND Internet Explorer supports the placing of images inside the <TH>
element. If used in the <TH> element, the image in question will be
tiled behind the particular data cell.

BGCOLOR="#rrggbb|color Specifies the background color of the header cell to be specified, using
name" either the specified color names, or a rrggbb hex triplet.

ALIGN="left|center|right" Specifies whether text inside the table cell(s) is aligned to the left, right
or center of the cell.

VALIGN="top|middle|botto controls whether text inside the table cell(s) is aligned to the top,
m|baseline" bottom, or vertically centered within the cell.

BORDERCOLOR="#rrggb sets the border color of the header cell, using either the specified color
b|color name" names, or a rrggbb hex triplet. It is necessary for the BORDER attribute
to be present in the main <TABLE> element for border coloring to
work.

ROWSPAN="value" This attribute can appear in any table cell (<TH> or <TD>) and specifies
how many rows of the table this cell should span. The default
ROWSPAN for any cell is 1.
COLSPAN="value" This attribute can appear in any table cell (<TH> or <TD>) and it
specifies how many columns of the table this cell should span. The
default COLSPAN for any cell is 1.

<CAPTION ...>...</CAPTION>

This represents the caption for a table. <CAPTION> elements should appear inside the <TABLE> but
not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top
but can be explicitly set to ALIGN=bottom. Like table cells, any document body HTML can appear in a
caption. Captions are, by default horizontally centered with respect to the table, and they may have
their lines broken to fit within the width of the table. The <CAPTION> element can accept the
following attributes.

<CAPTION Description
...>...</CAPTION> Attributes

ALIGN="top|bottom|left|cente Specifies whether the caption appears above or below the table,
r|right" using the top and bottom values, defaulting to top.

VALIGN="top|bottom" Specifies whether the caption text should be displayed at the top or
bottom of the table.

<THEAD>...</THEAD>

This element, which is Internet Explorer specific, is used to specify the head section of the table. It is
somewhat analogous to the <HEAD> element. It does directly affect the rendering of the table on the
screen, but is required if you want RULES to be set in the <TABLE> .

<TBODY>...</TBODY>

This element, which is Internet Explorer specific, is used to specify the body section of the table. It is
somewhat analogous to the <BODY> element. It does directly affect the rendering of the table on the
screen, but is required if you want RULES to be set in the <TABLE> .

<TFOOT>...</TFOOT>

This element, which is Internet Explorer specific, is used to specify the footer section of the table. It
does directly affect the rendering of the table on the screen, but is required if you want RULES to be
set in the <TABLE>.
Creating a Table

<html>

<body>

Code <h4>Table headers:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>
 </tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

Table headers:

Result Name Telephone Telephone

Bill Gates 555 77 854 555 77 855

Vertical headers:

First Name: Bill Gates

Telephone: 555 77 854

Telephone: 555 77 855

Creating a table with caption

<html>

<body>

Code <table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>
 </tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

</body>

</html>

Result

Creating different table borders

<html>

<body>

Code <h4>With a normal border:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>
</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a thick border:</h4>

<table border="8">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With a very thick border:</h4>

<table border="15">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>
 </tr>

</table>

</body>

</html>

With a normal border:

Result First Row

Second Row

With a thick border:

First Row

Second Row

With a very thick border:

First Row

Second Row

Cellpadding and Cellspacing

The space between cells in a table is controlled by the cellspacing attribute for <table>. The value is
measured in pixels or percentage values. When using tables for layout, cells should jut up next to each other,
so this attribute is often set to 0, as in previous examples. However, it is possible to give space between cells
by setting this attribute to a positive integer or percentage value. Similarly, the padding between cell walls
and the content they surround is controlled by the cellpadding attribute, which is also often set to 0 in tables
used for layout. The two approaches are illustrated by this markup:

<table border="1" cellspacing="15" cellpadding="40">

<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
</tr>
</table>

<br /><br />

<table border="1" cellspacing="0" cellpadding="0">

<tr>
<td>Element 1</td>
<td>Element 2</td>
 <td>Element 3</td>
</tr>
</table>

Defining table cells that span more than one row or one column

<html>
<body>

Code <h4>Cell that spans two columns:</h4>

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>
Cell that spans two columns:

Result Name Telephone

Bill Gates 555 77 854 555 77 855

Cell that spans two rows:

First Name: Bill Gates

555 77 854
Telephone:
555 77 855
Displaying elements inside other elements

<html>
<body>

<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
Code
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

Result

Using cellpadding to create more white space between the cell content and its borders

<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
 <td>First</td>
<td>Row</td>
Code </tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

Without cellpadding:

Result First Row

Second Row

With cellpadding:

First Row

Second Row
Lists

HTML supports several mechanisms for specifying lists of information. In HTML there are 3 different types
of lists, all of which may be nested. If used they should be present in the <BODY> of an HTML document.
Common HTML list elements are:

HTML List Elements Description

<UL> unordered list; bullets
<OL> ordered list; numbers
<DL> definition list; dictionary

<OL>...</OL>
The Ordered List element is used to present a numbered list of items, sorted by sequence or order of
importance and is typically rendered as a numbered list. An ordered list must begin with the <OL> element.
Place the <LI> (list item) tag between your opening <OL> and closing </OL> tags to create list items. As
example,

Code Result

<h4 align="center">Goals</h4> Goals

<ol>
<li>Find a Job</li> 1. Find a Job
<li>Get Money</li> 2. Get Money
<li>Move Out</li> 3. Move Out
</ol>

The average ordered list counts 1, 2, 3, ... and so on. Instead of generic numbers you can replace them
with Roman numberals or letters, both capital and lower-case. The TYPE attribute allows authors to
specify whether the list items should be marked with:

Type attribute values Description

<OL TYPE=a> Small letters. For example a, b, c ...

< OL TYPE =A> Capital letters. For example A, B, C ...

< OL TYPE =i> Small roman numerals. For example i, ii, iii ...

< OL TYPE =I> Large roman numerals. For example I, II, III ...

< OL TYPE =1> The default numbers. For example 1, 2, 3 ...

For lists that wish to start at values other than 1 the new attribute START is available. START is always
specified in the default numbers and will be converted based on TYPE before display. Thus START=5
would display either an 'E', 'e', 'V', 'v', or '5' based on the TYPE attribute. For examples,

Code Result

<h4 align="center">Goals</h4> Goals

<ol start="4" >
<li>Buy Food</li> 4. Find a Job
<li>Enroll in College</li> 5. Get Money
<li>Get a Degree</li> 6. Move Out
</ol>

<UL>...</UL>
The Unordered List element is used to present a list of items which is typically separated by white space
and/or marked by bullets. The bullet itself comes in three flavors: squares, discs, and circles. The default
bullet displayed by most web browsers is the traditional full disc. An unordered list must begin with the
<UL> element, which is immediately followed by a <LI> (list item) element:

Code Result
<h4 align="center">Shopping List</h4> Shopping List
<ul>
<li>Milk</li>  Milk
<li>Toilet Paper</li>  Toilet Paper
<li>Cereal</li>  Cereal
<li>Bread</li>
 Bread
</ul>

The TYPE attribute can be used in the <UL> element to specify bullet type:

Type attribute values Description

<UL TYPE= disc>  Milk

 Toilet Paper
 Cereal
< UL TYPE = circle> o Milk
o Toilet Paper
o Cereal
< UL TYPE = square >  Milk
 Toilet Paper
 Cereal

To give even more flexibility to lists, the TYPE attribute to the <LI> element is also allowed. It takes
the same values as <UL> and it changes the list type for that item, and all subsequent items. The
TYPE attribute when used in the <UL> and <LI> elements is supported by Netscape only.

< DL>...</DL>
Definition lists are typically rendered by browsers, with the definition term <DT> flush left in the
display window with the definition data <DD> rendered in a separate paragraph, indented after the
definition term.

<DL> - defines the start of the list

<DT> - definition term

<DD> - defining definition

Single occurrences of a <DT> element without a subsequent <DD> element are allowed and have the same
significance as if the <DD> element had been present with no text. The opening list element must be <DL>
and must be immediately followed by the first term (<DT>).
 Code Result
<dl> Fromage
French word for cheese.
<dt><b>Fromage</b></dt>
Voiture
<dd>French word for cheese.</dd> French word for car.

<dt><b>Voiture</b></dt>

<dd>French word for car.</dd>

</dl>

Examples

Demonstrating different types of ordered lists

<html>
<body>

Code <h4>Numbered list:</h4>

<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
 </ol>

</body>
</html>
Result Numbered list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Letters list:

A. Apples
B. Bananas
C. Lemons
D. Oranges

Lowercase letters list:

a. Apples
b. Bananas
c. Lemons
d. Oranges

Roman numbers list:

I. Apples
II. Bananas
III. Lemons
IV. Oranges

Lowercase Roman numbers list:

i. Apples
ii. Bananas
iii. Lemons
iv. Oranges

Demonstration of nesting lists

<html>
<body>

<h4>A nested List:</h4>

<ul>
<li>Coffee</li>
<li>Tea
Code
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
 <li>Milk</li>
</ul>

</body>
</html>

A nested List:
Result
 Coffee
 Tea
o Black tea
o Green tea
 Milk

Demonstration of more complicated nesting lists

<html>
<body>

<h4>A nested List:</h4>

<ul>
<li>Coffee</li>
<li>Tea
Code
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

A nested List:
Result  Coffee
 Tea
o Black tea
o Green tea
 China
 Africa
 Milk
HTML Iframes

An iframe is used to display a web page within a web page.

Syntax for adding an iframe:

<iframe src="URL"></iframe>

The URL points to the location of the separate page.

Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

<!DOCTYPE html>

<html>

<body>

Code <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Result
Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.

Set the attribute value to "0" to remove the border:

<!DOCTYPE html>

<html>

<body>

Code <iframe src="demo_iframe.htm" frameborder="0"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Result
Forms in HTML

HTML Forms are used to select different kinds of user input and to pass data to a server. A form can contain
input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label elements. A form will take input from the viewer and
depending on your needs; you may store that data into a file, place an order, gather user statistics, register the
person to your web forum, or maybe subscribe them to your weekly newsletter. The following elements are
used to create forms:

HTML List Elements Description

<FORM>...</FORM> A form within a document

<input ...>...</input> One input field

<OPTION> One option within a Select element

<SELECT>...<SELECT> A selection from a finite set of options

<TEXTAREA ...>...</TEXTAREA> A multi line input field

<FORM>...</FORM>

The <FORM> element is used to delimit a data input form. There can be several forms in a single document,
but the <FORM> element cannot be nested.

<FORM ACTION="_URL_" METHOD="GET|POST" EncTYPE="MIME type">

Form attributes

1. The ACTION attribute is a URL specifying the location to which the contents of the form data fields are
submitted to elicit a response. The way data is submitted varies with the access protocol of the URL to
which the form data is sent and with the values of the METHOD and EncTYPE attributes.

2. The METHOD attribute specifies a method of accessing the URL specified in the ACTION attribute.
Generally, the method will be either GET or POST.
a. The GET method is ideal for form submission where the use of the form data does not require external
processing.
b. The POST method should be used where the form is used to provide information for example, that
updates a database.

3. The EncTYPE attribute specifies the media type used to encode the form data. The default EncTYPE is
the MIME type application/x-www-form-urlencoded.

<input>

The most important form element is the input element. The <input> element represents a field whose
contents may be edited or activated by the user. Attributes of the <input> element are listed in the following
sections.

The NAME attribute assigns a name to the given field so that author may reference it later. The NAME
attribute is required for most input types and is normally used to provide a unique identifier for a field, or for
a logically related group of fields.
The CHECKED attribute can be used with a TYPE= CHECKBOX or TYPE=RADIO setting, this
indicates that the checkbox or radio button is selected.

The MAXLENGTH attribute is used with TYPE=TEXT setting, this indicates the maximum number of
characters that can be entered into a text field. This can be greater than specified by the SIZE attribute, in
which case the field will scroll appropriately. The default number of characters is unlimited.

The SIZE attribute specifies the size or precision of the field according to its type. For example, to
specify a field with a visible width of 24 characters:

<input type=”text” SIZE="24" />

The TYPE attribute determines what kind of input field it will be. Defaults value is free text. Several types of
fields can be defined with the type attribute:

TEXT

<input type="text" /> defines a one-line input field that a user can enter text into:

Code
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Result

First name:

Last name:

The TEXT field should be used in conjunction with the SIZE and MAXLENGTH attributes to set the
maximum amount of text that can be entered. Explicit VALUE and NAME attributes are also required.

PASSWORD
<input type="password" /> defines a password field. PASSWORD is the same as the TEXT attribute,
except that text is not displayed as it is entered.

Code
<form>
Password: <input type="password" name="pwd" />
</form>

Result

Password:
RADIO
<input type="radio" /> defines a RADIO button. RADIO button is used for attributes that accept a
single value from a set of alternatives. Only the selected radio button in the group generates a
name/value pair in the submitted data. Radio buttons require an explicit VALUE and NAME attribute.

 VALUE - specifies what will be sent if the user chooses this radio button. Only one value will be
sent for a given group of radio buttons (see name for more information).
 NAME - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and
size.

Code
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Result

Male

Female

 Checked is an optional attribute and can be used to specify which options are selected for initial
form display.

CHECKBOX

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a
limited number of choices. The check box's NAME and VALUE attributes behave the same as a radio button.
Also CHECKED is an optional attribute.

Code
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

Result

I have a bike

I have a car
BUTTON
This can be used to embed buttons directly into HTML documents that add functionality when used in
conjunction with Visual Basic Script. The NAME attribute is used to give the button a unique name,
which can be used to set its function in the script. The VALUE attribute specifies the text that is
displayed on the button in the document.

SUBMIT BUTTON

<input type="submit" /> defines a SUBMIT button. A SUBMIT button is used to send form data to a
server. The data is sent to the page specified in the form's action attribute. The file defined in the
action attribute usually does something with the received input. The NAME attribute is used to give
the button a unique name. The VALUE attribute specifies the text that is displayed on the button in
the document.

Code
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Result

Submit
Username:

HIDDEN

With this input type, no field is presented to the user, but the content of the field is sent with the
submitted form. This value may be used to transmit state information about client/server interaction.

<input type="hidden" name="HiddenField" value="100" />

RESET

RESET is a button that when pressed resets the form's fields to their specified initial values. The label
to be displayed on the button may be specified just as for the SUBMIT button.
<OPTION>

The <OPTION> element can only occur within a <SELECT> element. <SELECT> is the list itself and each
<OPTION> is an available choice for the user. <OPTION> can take following attributes:

The SELECTED attribute indicates that this option is initially selected.

The VALUE attribute indicates the value to be returned if this option is chosen. The returned value
defaults to the contents of the <OPTION> element.

The contents of the <OPTION> element are presented to the user to represent the option. It is used as a
returned value if the VALUE attribute is not present.

<SELECT ...>...</SELECT>

The <SELECT> element allows the user to choose one of a set of alternatives described by textual labels.
Every alternative is represented by the <OPTION> element. Attributes used with the <SELECT> are listed in
the following sections.

The MULTIPLE attribute is needed when users are allowed to make several selections, for example
<SELECT MULTIPLE>.

The NAME attribute specifies the name that will submitted as a name/value pair.

The SIZE attribute specifies the number of visible items. If this is greater than one, then the resulting
form control will be a list.

The SELECT element is typically rendered as a pull down or pop-up list.

Code
<form method="post" action="mailto:[email protected]">
Education?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Email Yourself">
</select>
</form>
Result

Some High School Email Yourself

Education?

<TEXTAREA>...</TEXTAREA>

The <TEXTAREA> element lets users enter more than one line of text. Forums and the like use text
areas to post what you type onto their site using scripts. For this form, the text area is used as a way
to write comments to somebody.
Any text included up to the end element (</TEXTAREA>) is used to initialize the field's value. This end
element is always required even if the field is initially blank. When submitting a form, lines in a TEXTAREA
should be terminated using CR/LF.

ROWS and COLUMNS need to be specified as attributes to the <TEXTAREA> tag.

ROWS are roughly 12pixels high, the same as in word programs.

The value of the COLUMNS reflects how many characters wide the text area will be.

The example below shows a text area 5 rows tall and 20 characters wide.

Code
<form method="post" action="mailto:[email protected]">
<textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
</textarea>
<input type="submit" value="Email Yourself">
</form>

Result

Another attribute to be aware of is the WRAF. Wrap has 3 values.

 WRAP=
o "OFF"
o "VIRTUAL"
o "PHYSICAL"

<TEXTAREA WRAP=OFF> The default setting. Wrapping doesn't happen. One

ongoing line. Lines are sent exactly as typed.
<TEXTAREA WRAP=VIRTUAL> The display word-wraps, but long lines are sent as one line
without new-lines. That is, the viewer will see the words
wrapping as they type their comments, but when the page
is submitted to you, the web host, the document sent will
not have wrapping words.
<TEXTAREA WRAP=PHYSICAL> The display word-wraps, and the text is transmitted at
all wrap points.The text will appear both to you, the web
host, and the viewer including any page breaks and
additional spaces that may be inputed. The words come
as they are.
Examples

Creating a drop-down list with a pre-selected value

<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
Code
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
Result

Creating a multi-line text input control. In a text-area the user can write an unlimited number of
characters

<html>
<body>

<p> This example cannot be edited because our editor uses a textarea for input, and your
browser does not allow a textarea inside a textarea. </p>

<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Code
</body>
</html>

Result

Creating a button

<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>
Code
</body>
</html>
Result

Sending an e-mail from a form

<html>
<body>

<h3>Send e-mail to [email protected]:</h3>

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">

Name:<br />
Code
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>
</body>
</html>
Result

Another type of drop down list

<html>
<body>
<form method="post" action="mailto:[email protected]">
Musical Taste
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
Code
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select>
 <input type="submit" value="Email Yourself">
</form>
</body>
</html>
Musical Taste
Emo
Metal/Rock
Hip Hop
Email Yourself
Ska
Result

Creating a form with checkboxes and a submit button

<html>

<body>

<form name="input" action="html_form_action.php" method="get">

Code <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />

<input type="checkbox" name="vehicle" value="Car" /> I have a car

<br /><br />

<input type="submit" value="Submit" />

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.php".</p>

</body>

</html>

Result
I have a bike

I have a car

Submit

If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".
HTML Multimedia

Multimedia on the web is sound, music, videos, and animations. Modern web browsers have support
for many multimedia formats.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more. Modern Web pages
have often embedded multimedia elements, and modern browsers have support for various
multimedia formats.

Multimedia Formats

Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the type of a file is to look at the file extension. When a browser
sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates
an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions
like .gif, .png and .jpg.

Multimedia files also have their own formats with different extensions like: .swf, .wav, .mp3, and
.mp4.

HTML - The <object> Element

The purpose of the <object> element is to support HTML helpers (plug-ins).

HTML Helpers (Plug-ins)

A helper application is a small computer program that extends the standard functionality of the
browser. Helper applications are also called plug-ins. Plug-ins are often used by browsers to play audio
and video.

Examples of well-known plug-ins are Adobe Flash Player and QuickTime.

Plug-ins can be added to Web pages through the <object> tag or the <embed> tag.

Most plug-ins allows manual (or programmed) control over settings for volume, rewind, forward,
pause, stop, and play.

Example: Adobe Flash Player - Play SWF Video

<!DOCTYPE html>

<html>
 <body>

Code

<object width="400" height="40"

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v
ersion=8,0,0,0">

<param name="SRC" value="bookmark.swf">

<embed src="bookmark.swf" width="400" height="40"></embed>

</object>

</body>

</html>

Result

HTML Audio

Sounds can be played in HTML by many different methods.

Using The <embed> Element

The <embed> tag defines a container for external (non-HTML) content.

The following code fragment should play an MP3 file embedded in a web page:

<!DOCTYPE html>

<html>

<body>

Code

<embed height="50" width="100" src="horse.mp3">

<p>If you cannot hear the sound, your computer or browser doesn't support the sound
 format.</p>

<p>Or, you have your speakers turned off.</p>

</body>

</html>

Result

Attributes:
Following is the list of important attributes for <embed> element.

 align - Determines how to align the object. It takes either center, left or right.
 autostart - Indicates if the media should start automatically. Netscape default is true, Internet
Explorer is false.
 loop - Specifies if the sound should be played continuously (set loop to true), a certain number of
times (a positive value) or not at all (false). This is supported by Netscape only.
 playcount - Specifies the number of times to play the sound. This is alternat option for loop if you
are usiong IE.
 hidden - Defines if the object shows on the page. A false value means no and true means yes.
 height - Height of the object in pixels or en.
 width - Width of the object in pixels or en.
 pluginspage - Specifies the URL to get the plugin software.
 name - A name used to reference the object.
 src - URL of the object to be embedded. This can be any recognizable by the user's browser. It
could be .mid, .wav, .mp3, .avi and so on).
 volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume). This attribute is
supported by Netscape only.

Problems:

 Different browsers support different audio formats

 If a browser does not support the file format, the audio will not play without a plug-in
 If the plug-in is not installed on the users' computer, the audio will not play
 If you convert the file to another format, it will still not play in all browsers

Using the <object> Element

The <object tag> tag can also define a container for external (non-HTML) content.

The following code fragment should play an MP3 file embedded in a web page:

<!DOCTYPE html>

<html>
 <body>

Code

<object height="50" width="100" data="horse.mp3"></object>

<p>If you cannot hear the sound, your computer or browser doesn't support the sound
format.</p>

<p>Or, you have your speakers turned off.</p>

</body>

</html>

Result

Problems:

 Different browsers support different audio formats

 If a browser does not support the file format, the audio will not play without a plug-in
 If the plug-in is not installed on the users' computer, the audio will not play
 If you convert the file to another format, it will still not play in all browsers

HTML Videos

Videos can be played in HTML by many different methods.

The <embed> Element

The purpose of the <embed> tag is to embed multimedia elements in HTML pages.

The following HTML fragment displays a Flash video embedded in a web page:

<!DOCTYPE html>

<html>

<body>

Code

<h2>Playing the Object</h2>

 <embed src="intro.swf" width="200" height="200"><p>If you cannot see this, your
computer doesn't support the format</p>

</body>

</html>

Result

Problems

 If the browser does not support Flash, the video will not play
 iPad and iPhone do not support Flash videos
 If you convert the video to another format, it will still not play in all browsers

Using The <object> Element

The purpose of the <object> tag is to embed multimedia elements in HTML pages. The following HTML
fragment displays a Flash video embedded in a web page:

<!DOCTYPE html>

Code <html>

<body>

<object height="200" width="200" data="intro.swf"></object>

</body>
 </html>

Result

Problems:

 If the browser does not support Flash, the video will not play
 iPad and iPhone do not support Flash videos
 If you convert the video to another format, it will still not play in all browsers