devguru xhtml quickref

8/3/2019 DevGuru XHTML Quickref

1/175

TAGS

a

abbr

acronym

address

applet

area

b

basebdo

big

blockquote

body

br

button

caption

cite

code

col

colgroup

dddel

dfn

div

dl

DOCTYPE

dt

em

fieldset

form

frame

frameset

h1,h2,h3,h4,h5,h6

head

hrhtml

i

img

input

ins

kbd

label

legend

li

link

map

metanoframes

noscript

object

ol

optgroup

option

p

param

pre

q

samp

script

select

smallspan

strong

style

sub

sup

table

tbody

td

textarea

tfoot

th

theadtitle

tr

tt

ul

var

ATTRIBUTES

accesskey

class

dir

id

lang

style

tabindex

title

EVENTS

onblur

onchange

onclick

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onload

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onreset

onselect

onsubmit

onunload


2/175

XHTML CODING RULES AND SYNTAX

While these coding rules apply to XHTML, it is strongly recommended that you also followhese same rules when coding HTML.

All attributes, events, and tags must be written in lower case

n HTML it did not matter if you coded with a mixture of upper and lower case letters. In fact,

many programmers typically coded HTML in upper case because they felt that it made thecode more readable. Those days are over!

To be correct XHTML, you can only code attributes, events and tags in lower case. This is arequirement because we need our XHTML code to be compatible with XML, and XML iscase sensitive (XML considers and to be different tags).

Wrong:DevGuru

Right:DevGuru

All elements must be closed

n HTML we have many types of tags that need to be closed. The purpose of a close is tosignify that the element stops at that point in the code. For example, consider using the a tago create a link. The closing tag is placed immediately after the link text. If you did notnclude the closing , then the entire rest of the HTML document is considered to be partof the link text (as most programmers have discovered the hard way!).

n truth, HTML is very forgiving when it comes to closing tags. For example, most browserswill successfully display the following code.

Hello world!

n comparison, XHTML is absolutely NOT forgiving. In XHTML, all elements must be closed.(There is one exception, the DOCTYPE DTD element which is discussed below.) You openand close an element by using a pair of tags. The first tag opens the element. The secondag closes the element. In the closing tag, the tag name is preceded with a mandatory slash.

Here are some examples:

DevGuru is great!

DevGuru is great! XHTML rules!

Even tags like hr and br must be closed. You close this type of tag by putting a blank spaceafter the tag name and then a slash. (The blank space is needed for maximum browser


3/175

compatibilty.) Therefore, there is only one tag (i.e., no separate closing tag). Such tags arereferred to as self-closing.

For example:

The value assigned to an attribute must be enclosed in quotes

n truth, HTML does not require that a value assigned to an attribute be enclosed in quotes.However, XHTML is very strict about this. If you forget to enclose in quotes, then XHTML willcompletely ignore the attribute.

Wrong:

Right:

No attribute may be minimized

n HTML the following code is legal. Note that the Checked attribute is not assigned a value.This is called attribute minimization. This attribute will cause the radio button to be checked.

hexidecimal

Having an attribute that does not have a value assigned to it is illegal in XHTML. In otherwords, no attribute minimization. The correct syntax is to assign "checked" as a value tochecked. (In addition, we must also switch to all lower case, enclose values in quotes, andclose the element to be correct XHTML.)

hexidecimal

All elements must be properly nested

Nested elements are contained inside of other elements. Here is an example of anunordered list element that contains nested elements.

XHTML XML XPATH XSL

XSLT

Note how each li element is closed before you start the next li element. Further note the ulelement is not closed until after all of the internal li elements have been closed.

n this next example, we bold and italicize the text DevGuru. We must close the i elementbefore we close the b element.

Wrong:DevGuru


4/175

Right:DevGuru

XHTML documents must be well-formed

At a minimum, an XHTML document must contain html, head, title, and body elements.They must be properly nested and closed. (A frameset tag can be used in place of body.)

Here is a minimal XHTML document.

DevGuruDevGuru is great!

There must be a DOCTYPE declaration

The DOCTYPE tag is used to declare the DTD (Document Type Definition) for an XHTMLdocument. This tag is mandatory and must appear at the top (on the first line) of all XHTMLcode. If the DOCTYPE tag is not present, then it is not XHTML code.

See the DOCTYPE write-up for details.


5/175

TD TAG: DOCTYPE

DOCTYPE ... >

e DOCTYPE tag is used to declare the DTD (Document Type Definition) for an XHTMLcument.

a broader scale, XHTML, like HTML, is a subset of the SGML (Standardized Generalizedarkup Language). SGML, and its various family members, use DTDs to define the context of

e language. The W3C has defined a DTD to be:

"...a collection of declarations that, as a collection, defines the legalstructure, elements, and attributes that are available for use in adocument that complies to the DTD."

ecifically, the XHTML DTD precisely defines the grammar, rules, and syntax that will applya document that has been created using XHTML. To repeat this in a different way, to beid XHTML, the XHTML code that creates the XHTML document must obey all of the

ammar, rules, and syntax in the XHTML DTD.

is tag is mandatory and must appear at the top (on the first line) of all XHTML code. If theOCTYPE DTD tag is not present, then it is not XHTML code.

e exclamation mark (!) is required. This is the only tag in an XHTML document that is notsed. Obey the case and syntax.

rrently, there are three types of DTDs that apply to XHTML: Frameset, Strict, andansitional. You must obey the syntax.

ameset

is is declared when you have partitioned the HTML document into two or more frames (withwithout using Cascading Style Sheets).

ntax:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml-meset.dtd">

rict

is is declared when you use Cascading Style Sheets (CSS) to enhance the appearance andle of your HTML document. In general, you should only use this type of DTD if you arertain that your viewer has access to modern browsers that recognize CSS.

ntax:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml-strict.dtd">

ansitional

is is declared when you are simply using HTML to create the appearance of the web page,her than using Cascading Style Sheets (CSS). This type of DTD would ensure the widestwing audience to your XHTML document.

ntax:


6/175

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">

e basic XHTML document is composed of DOCTYPE, html, head, title, and body tags.te that all tags in XHTML are closed except for the DOCTYPE.

de:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" "DTD/xhtml-nsitional.dtd">

tml>ead>tle>DevGuruhead>ody>vGuru is great!r />

mg src="images/xhtmlvalid.gif" />body>html>

tput:

vGuru is great!


7/175

Welcome to the DevGuru XHTML Quick Reference guide. This is a handy 180 pagereference source that defines and explains all of the tags, events, and associated attributeshat compose XHTML (eXtensible Hyper Text Markup Language, version 1.0. This Quick

Reference also includes useful, real world, working examples of code for each tag. Inaddition, there are write-ups, with code examples, for the 17 events and another 7 attributeshat are commonly available to many tags.

To understand the future importance of XHTML, you first need to understand the currentmportance of HTML.

HTML is one of the most widely used computer languages in the world. The popularity ofHTML is due to the fact that it is the coding technology used to publish content on the WorldWide Web (also referred to as the Internet or Web). Programmers quickly discovered thatHTML is a user friendly language and is very easy to learn. This ease of coding significantlyaided in the proliferation of Web sites. The latest version of HTML is 4.01 which is defined byhe standard published on 24 December 1999 by the World Wide Web Consortium (W3C).

n the foreseeable future, HTML will continue to serve as the basic structure for the Internet,but it is doubtful that there will be any newer versions or significant changes beyond HTMLversion 4.01. It is probably fair to predict that the future of HTML is XHTML and a search of

he literature will reveal that XHTML is regularly referred to as the the next generation ofHTML.

The history of XHTML is very simple; it is derived directly from HTML version 4.01 and isdesigned to be used with XML. Indeed, XHTML is part of a whole new suite of "X"echnologies, with acronyms such as XML, XPATH, XSL, and XSLT, that are destined to

have a profound effect on the Internet.

This is a new technology. On 26 January 2000, the W3C issued the recommendation forXHTML version 1.0. It is also a rapidly evolving technology. The recommendation for version

1.1, which is a module-based concept for XHTML, has already been published.

There are a few fundamental differences between HTML and XHTML that will profoundlyeffect how you code with XHTML. While HTML is a loose and forgiving language, XHTMLwill quickly remind you of a strict English teacher who demands firm adherence to the rulesof grammar. Fortunately, the syntax and coding rules are very straightforward, easy tomplement, and make common sense. The real purpose of these rules is to allow a seamlessntegration of XHTML with XML and other related "X" technologies.

q All attributes, events, and tags must be written in lower case.q All elements must be closed.q The value assigned to an attribute must be enclosed in quotes.q No attribute may be minimized.q All elements must be properly nested.q XHTML documents must be well-formed.q There must be a DOCTYPE declaration.

Click here for an explanation of the above rules.
http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml1/


8/175

Quick Reference Library

XHTML Quick Reference

Copyright 1999-2002 by Infinite Software Solutions, Inc. All rights reserved.

Trademark Information.


9/175

AG: a

> ...

e tag is called the anchor tag and it is most commonly used with the href attribute toeate a hypertext link (usually referred to as just a link). By simply clicking on the link with aouse or using a keyboard command, you can travel from one page to another page on theme web site or a different one. By default, the new page is normally displayed in the samendow or frame, unless you specify otherwise using the target attribute.

te that links cannot be nested. An ... element cannot contain other a elements.

u can insert characters, images, line breaks (
or
), and text between the openingd closing a tags. It is recommended that you should not insert Cascading Style Sheets codeany other HTML tags between the opening and closing tags. Rather, place all such tagstside of the a element.
e separate closing tag is mandatory.

tributes and Events

cesskey class dir id lang onblur onclick ondblclick onfocus

keydown onkeypress onkeyup onmousedown onmousemove onmouseout

mouseover onmouseup tabindex title

arsete charset attribute is used to specify the character encoding used on the page that is theget of the link. Character encoding defines how a sequence of bytes is to be converted intoaracters for display.

ords

e coords attribute is currently not supported by most browsers. It is used to define an areanfluence around the a tag.

efe href attribute is used to specify the target URL address for a link.

eflange hreflang attribute can only be used when the href attribute is also being used. It specifies

e language of the page that is the target of the link.

mee name attribute is a string of characters that is used to label an element with a name. Theme must be unique to that document and cannot be reused. The name can be the target of ak.

e rel attribute is currently not fully supported by most browsers. It is a space-separated list ofe or more values that specify the relationship from the source page to the target for a link.me of the proposed values are, appendix, bookmark, chapter, contents, copyright,

ossery, help, index, next, prev, section, stylesheets, and subsection.

ve rev attribute is currently not fully supported by most browsers. It is a space-separated list


10/175

one or more values that specify the relationship from the target page to the source for a link.rhaps the most useful value is relation.

apee shape attribute is currently not supported by most browsers. It is used to define an area ofuence around the a tag.

get - not allowed in Strict XHTMLe target attribute specifies the name of the frame or window in which the target page should

pear when a link is clicked. The four reserved names are_blank, _parent, _self, and_top.

pee type attribute specifies the content type of the target page of a link. It has a MIMEcoding type value.

is example demonstrates the code for creating a link. The target attribute is used to opene linked document in a new window.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-

nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML a Tag Examplehead>ody>href="http://www.devguru.com" target="_blank"> DevGuru

body>html>


11/175

TTRIBUTE: accesskey

cesskey="character"

e accesskey attribute allows you to designate a character on the keyboard that whenessed, along with the alt or meta key, will bring focus to an HTML element. By focus, weean that the cursor will go to that element (for example, a link or an input box in a form).

e character can be any single character on the keyboard, including upper and lower case

phabets, numbers, symbols, or punctuation marks. You cannot repeat a character since eachcesskey must uniquely identify an element.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML accesskey attribute examplehead>

ody>orm>multaneously press the alt and 1 buttons and the cursor goes to the First Name input box.r />multaneously press the alt and 7 buttons and the cursor goes to the Last Name input box.r />multaneously press the alt and r buttons and the cursor goes to the Maiden Name input box.r />r />r />st Name: (accesskey = 1)r />

nput type="text" name="firstlname" size="30" accesskey="1" />r />st Name: (accesskey = 7)br>nput type="text" name="lastname" size="30" accesskey="7" />r />

aiden Name: (accesskey = r)r />

nput type="text" name="maidenname" size="30" accesskey="r" />orm>

body>

html>


12/175

TTRIBUTE: class

ass="name"

e class attribute is used to assign the name of a style sheet class to a tag.

r example, all of the code samples on the DevGuru site are in blue colored text. This is doneenclosing the code sample inside a pair of span tag elements and designating a class ofODE". In turn, the "CODE" class has been assigned a text color of blue in the style sheets(a .css file) that is located in the Include/ directory on the DevGuru web site. Therefore,y one file is needed to define the appearance of the entire site.

ere are four attributes common to most tags: class, id, style, and title.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>

tle>DevGuru XHTML class Attribute Examplehead>ody>pan class="CODE">e code example is blue.

span>body>html>

tput:e code example is blue.


13/175


14/175

TTRIBUTE: id

="name"

e id attribute is used to assign a identifier value to a tag. Each id must be unique within thecument and each element can only have one id.

XHTML, the id attribute has essentially replaced the use of the name attribute. The value ofe id must start with an alphabetic letter or an underscore. The rest of the value can containy alpha/numeric chacracter.

cause it is unique, the value of the id can be the target of a URL or used to define a stylee.


de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">

tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML id attribute Examplehead>ody>href="#ckbx2">Go to Check Box Two/>

nput type="checkbox" id="ckbx1" /> Check Box One/>

nput type="checkbox" id="ckbx2" /> Check Box Twoid="_mytext">w now purple cow?

p>body>html>

tput:e use of id does not effect the output in any manner.


15/175

TTRIBUTE: lang

ng="languagecode"

e lang attribute is used to define the base language to be used for displaying text andaracters on a Web site. This allows an internationalization of HTML for a very large numberanguages.

e languages are designated by a two letter code, such as "en" for English or "el" for Greek.e or more hypenated values can be tacked on to the initial two letter code to specify regionalethentic variations, such as "en-us" for U.S. English.

te that .html texts that contain foreign languages that use special characters will have to beved as a Unicode file, rather than as an ANSI file, in order for the characters to be properlyplayed. Please be aware that some browsers may not be capable of correctly displaying aicode file.


nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML lang Attribute Examplehead>ody>pan lang="el">place text of foreign language here ...span>body>html>


16/175

VENT: onblur

blur="action"

e onblurs event occurs when the element that is in focus, loses that focus. You use them, in blur, to signify that an element does not have focus. Since only one element can be in

cus at one time, all other elements are in blur.

focus, we mean that the cursor is at that element. For example, if the element was an input

xt box in a form, the cursor would appear inside the element and you could type and enterta into the box.

ese six events are useful when dealing with forms and form elements:

onblur - runs a script when the element loses focus.onchange - runs a script when the element changes.onfocus - runs a script when the element gets the focus.onreset - runs a script when the form is reset.onselect - runs a script when the element is selected.onsubmit- runs a script when the form is submitted.

this example, alert messages advise which element is in focus and which has lost focus.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onfocus and onblur Examplehead>

ody>orm>ck back and forth between input text windows One and Two.r />ert messages will state who is in focus and who has lost focus (become blur).r />

e:nput onfocus="JavaScript:alert('One is in focus')"blur="JavaScript:alert('One has lost focus')" />r />

wo:nput onfocus="JavaScript:alert('Two is in focus')"blur="JavaScript:alert('Two has lost focus')" />

orm>body>html>


17/175

VENT: onclick

click="action"

e onclick event is associated with the single click of a mouse on a selected HTML tagement). Whenever you single click the element, the script code of the onclick is executed.is script can also call functions or subroutines which contain code that you want to run when

e single click occurs.

e similar ondblclick event is associated with the double click of a mouse.

this example, every time you single click on the button element, one line of JavaScript codeexecuted which causes an alert box to be displayed with a message.


tle>DevGuru XHTML onclick Tag Examplehead>ody>

nput type="button" onclick="JavaScript: alert( 'onclick event' )" value="Click On This Button"

body>html>


18/175

VENT: ondblclick

dblclick="action"

e ondblclick event is associated with the double click of a mouse on a selected HTMLement. Whenever you double click the element, the script code of the ondblclick isecuted. This script can also call functions or subroutines which contain code that you want ton when the double click occurs.

e similar onclick event is associated with the single click of a mouse.

this example, every time you double click the button element, one line of JavaScript code isecuted which causes an alert box to be displayed with a message.


tle>DevGuru XHTML ondblclick Tag Examplehead>ody>

nput type="button" ondblclick="JavaScript: alert( 'ondblclick event' )" value="Double Clicke!" />body>html>


19/175

VENT: onfocus

focus="action"

e onfocus event occurs when the element come into focus. By focus, we mean that thersor is at that element. For example, if the element was an input text box in a form, thersor would appear inside the element and you could type and enter data into the box.



this example, alert messages advise which element is in focus and which has lost focus.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onfocus and onblur Examplehead>ody>orm>ck back and forth between input text windows One and Two.r />

ert messages will state who is in focus and who has lost focus (become blur).r />

e:nput onfocus="JavaScript:alert('One is in focus')"blur="JavaScript:alert('One has lost focus')" />r />

wo:nput onfocus="JavaScript:alert('Two is in focus')"blur="JavaScript:alert('Two has lost focus')" />

orm>body>html>


20/175

VENT: onkeydown

keydown="action"

e onkeydown event is associated with pressing down a key on the keyboard while theouse is inside a selected HTML tag (element). In other words, the key down event occurredile the HTML element was in focus. Whenever you press down the key, the script code of

e onkeydown is executed. This script can also call functions or subroutines which containde that you want to run when this event occurs. For example, if you only want numbers to betered, you could capture the value of the key and take appropriate action if a non-numericy was pressed.

e similar onkeyup event is associated with the release of a key after it was pressed down,d the onkeypress event is associated with the pressing of a key.

this example, place the mouse inside the textarea element and type in a word. Every timeu press a key down, one line of JavaScript code is executed which causes an alert box to beplayed with a message. Note how the alert comes up before the character is displayedide the textarea.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onkeydown Tag Examplehead>ody>extarea onkeydown="javascript: alert('A key was pressed down')" >extarea>

body>

html>


21/175


22/175

VENT: onkeyup

keyup="action"

e onkeyup event is associated with releasing up a key on the keyboard while the mouse iside a selected HTML tag (element). In other words, the key up event occurred while the

TML element was in focus. Whenever you release the key, the script code of the onkeyup isecuted. This script can also call functions or subroutines which contain code that you want ton when this event occurs. For example, if you only want numbers to be entered, you couldpture the value of the key and take appropriate action if a non-numeric key was pressed.

e similar onkeydown event is associated with the pressing down of a key, and thekeypress event is associated with the pressing of a key.

this example, place the mouse inside the textarea element and type in a word. Every timeu release a key, one line of JavaScript code is executed which causes an alert box to beplayed with a message. Note how the alert comes up after the character is displayed inside

e textarea.

de:

xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onkeyup Tag Examplehead>ody>extarea onkeyup="javascript: alert('A key was released up')">extarea>

body>html>


23/175


24/175

VENT: onmousemove

mousemove="action"

e onmousemove event is associated with moving the mouse around while inside a selectedTML tag (element). In other words, the mouse move event occurred while the HTML elements in focus. Every time you move the mouse around the element, the script code of themousemove is executed. This script can also call functions or subroutines that contain code

at you want to run when this event occurs.

e five mouse events are: onmousedown, onmousemove, onmouseout, onmouseover,d onmouseup.

this example, simply move the mouse inside on the button element.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">

ead>tle>DevGuru XHTML onmousemove Tag Examplehead>ody>

nput type="button" onmousemove="JavaScript: alert( 'onmousemove event' )" value="Movee Mouse Inside This Button!" />

body>html>


25/175

VENT: onmouseout

mouseout="action"

e onmouseout event is associated with moving the mouse out of a selected HTML tagement). In other words, the mouse out event occurred while the HTML element was in focus.ery time you move the mouse out of the element, the script code of the onmouseout isecuted. This script can also call functions or subroutines which contain code that you want ton when this event occurs.


this example, simply place the mouse inside the button element and then move it out. Ason as you move out, an alert appears with a message.


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onmouseout Tag Examplehead>ody>

nput type="button" onmouseout="JavaScript: alert( 'onmouseout event' )" value="Move Theouse Out Of This Button!" />body>html>


26/175

VENT: onmouseover

mouseover="action"

e onmouseover event is associated with moving the mouse over a selected HTML tagement). In other words, the mouse over event occurred while the HTML element was incus. Every time you move the mouse over the element, the script code of the onmouseoverexecuted. This script can also call functions or subroutines which contain code that you wantrun when this event occurs.


this example, simply move the mouse over on the button element. As soon as you moveer, an alert is displayed with a message.


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onmouseover Tag Examplehead>ody>

nput type="button" onmouseover="JavaScript: alert( 'onmouseover event' )" value="Movee Mouse Over This Button!" />

body>html>


27/175

ORE ATTRIBUTE: onmouseup

mouseup="action"

e onmouseup event is associated with the releasing up portion of a click of the mouse whileide a selected HTML tag (element). In other words, the mouse up event occurred while the

TML element was in focus. Every time you release the mouse up, while in the element, theript code of the onmouseup is executed. This script can also call functions or subroutinesich contain code that you want to run when this event occurs.


this example, simply place the mouse inside the button element, click down, then release. As soon as you release up, an alert appears with a message.


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onmouseup Tag Examplehead>ody>

nput type="button" onmouseup="JavaScript: alert( 'onmouseup event' )" value="Click Andlease The Mouse While Inside This Button!" />

body>html>


28/175

TTRIBUTE: tabindex

bindex="number"

e tabindex attribute specifies an integer that defines the rank in the tabbing order for theecified element when you use the keyboard to navigate (tab through) a page.

e lower the integer, the higher the ranking in the tabbing order. A higher rank is tabbed tofore a lower rank. The integer cannot be negative or zero.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML tabindex Attribute Examplehead>ody>orm>

ace the cursor in the top input window.r />en type the tab button on the keyboard.r />te that after the "First Name" we jump over "Last Name" to "Maiden Name".r />er "Maiden Name" we return up to "Last Name".r />r />r />st Name: (tabindex = 1)r />

nput type="text" name="firstlname" size="30" tabindex="1" />r />st Name: (tabindex = 3)br>nput type="text" name="lastname" size="30" tabindex="3" />r />

aiden Name: (tabindex = 2)r />

nput type="text" name="maidenname" size="30" tabindex="2" />orm>

body>

html>


29/175

TTRIBUTE: title

e="string"

e title attribute is used to assign a name to a tag. This name can be any string of characterswords. Further, you can use the HTML character entities in the name. For example, youuld use which will cause a line break (just like the br tag) in the name.

you wish, you can reuse the same title values repeatedly inside an HTML document, or youuld have each value be unique. In contrast, the id attribute requires that each id value mustunique.

not confuse this attribute with the title tag which is used to assign a title to a webcument.

e title attribute is used by ToolTips on Internet Explorer to create a small window thattomatically displays the text in the title when you run the mouse over a hyperlink or aapped hyperlink image. This can be done with both the a and area tags. By default, thisndow is only displayed for about ten seconds. (This concept can also be applied to Netscapeusing JavaScript functions. Please read the Knowledge Base article for details.)


ouse over the link displayed in the output.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML title Attribute Example

head>ody>ease refer to the DevGuru Knowledge Base article:r />href="/features/knowledge_base/a100216.html"

e="ToolTips are really neat!">00216: Adding ToolTips to your HTML pages.

a>body>html>

tput:ease refer to the DevGuru Knowledge Base article:00216: Adding ToolTips to your HTML pages.

another example, consider the situation where you have a large number of tables or tableside of tables. By placing a title in both the opening and closing table tags, it becomes muchsier to identify and keep track of the start and stop of individual tables inside your code.

de:able title="PhoneNumbers">table entries ...
http://features/knowledge_base/a100216.htmlhttp://features/knowledge_base/a100216.html


30/175

able title="PhoneNumbers">


31/175

AG: abbr

bbr> ...

e abbr tag is used to signify that the enclosed text is an abbreviation of a longer word orrase.


tributes and Events

ass dir id lang onclick ondblclick onkeydown onkeypress onkeyup

mousedown onmousemove onmouseout onmouseover onmouseup style

e


ead>tle>DevGuru XHTML abbr Tag Examplehead>ody>bbr>lb is an abbreviation for poundbody>html>

tput:s an abbreviation for pound


32/175

TTRIBUTE: style

yle="string"

e style attribute is used to assign style sheet properties to the specific element containinge attribute.

not confuse this attribute with the style tag which is used to create document-level styleeet rules. It is referred to as document-level because the style rules will apply to the entire

TML page. In contrast, the style attribute behaves similarly to an inline style rule and onlyects a small portion the HTML document.


this example, the text enclosed by the span tags will be brown, size 24px and in Times font.


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML style Attribute Examplehead>ody>pan style="color: brown; font-size: 24px; font-family: times;">hen in the course of human events...span>body>html>

tput:

When in the course of human events...


33/175

AG: acronym

cronym> ...

e acronym tag is used to signify that the enclosed text is an acronym which is a special typeabbreviation formed by using the first letter in each word of a phrase.


tributes and Events



e


ead>tle>DevGuru XHTML acronym Tag Examplehead>ody>cronym>MIME means Multipurpose Internet Mail Extensionbody>html>

tput:ME means Multipurpose Internet Mail Extension


34/175

AG: address

ddress> ...

e address tag is used to signify that the enclosed text is an address. Most browsers displaye address in a special manner, such as in italics. However, you can use style sheets to altere appearance as you see fit. The text between the address tags can contain any HTML tag.


tributes and Events



e


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML address Tag Examplehead>ody>ddress>vGuru
06 Kingston Pike
oxville, TN 37919

address>body>

html>

tput:vGuru06 Kingston Pikeoxville, TN 37919


35/175

AG: applet

pplet> ...

e applet tag is used to download and execute a Java applet. The applet is treated like anage and is rendered into the flow of the text without a line break. You can define the size ofe region (the applet window) in which the applet will appear. By using the attributes forplet, style sheets code, and other HTML tags, you can create a presentation andpearance for the applet in the text flow to suit your needs.

va applets can be very slow to load and may not display in many browsers.

any Java applets require that document-specific parameters be provided to control theecution. You can use the param tag, inserted between the opening and closing applet tags,define these parameters.

e applet tag was officially deprecated effective with HTML version 4.0. It was replaced withe object tag. However, this tag in such extensive use on the Internet that it has beensurrected.

e closing tag is mandatory.

ore Attributes

ass id style title

tributes

gne align attribute is used to position the applet window with respect to any surrounding text,ages, or other applets.

e alt attribute provides a text message that will be displayed (in place of the applet) onowsers that cannot display an applet.

chivee archive attribute is a comma-separated list of URLs of Java classes that must be pre-

aded into the local user cache before the applet can be displayed.

dee code attribute is mandatory and specifies the relative URL of the Java class (a .class type) that must be executed to display the applet. Specifically, the URL is relative to the applet

se URL (otherwise the applet will not load).

debasee codebase attribute is used to specify the URL of the directory where the Java class is

ored. If the directory is different from where the HTML code is stored, you must use thisribute.

ighte height attribute is used to set the vertical extent of the applet in pixels.

pace
http://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_class.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_id.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_style.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_title.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_title.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_style.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_id.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/html_core_class.html


36/175

e hspace attribute is used to add additional blank space in pixels to each side of the applet.

ayscripte mayscript attribute is only recognized by Netscape. It permits the applet to accessvaScript code.

mee name attribute is used to assign a unique string of characters as the name of the applet.

jecte object attribute is not supported by most browsers. It is the name of a resource where arialized version of the applet is stored. Do not confuse this attribute with the object tag.

pacee vspace attribute is used to add additional blank space in pixels both above and below theplet.

dthe width attribute is used to set the horizontal extent of the applet in pixels.

is example displays a Java applet clock.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML applet Tag Examplehead>ody>pplet codebase="clock/classes/" code="JavaClock.class" width="150" height="150">

aram name="timezone" value="eastern" />applet>body>html>


37/175

AG: area

rea> ...

e area tag is used (along with the tag) to create a client-side image map which isided into two or more mouse-sensitive regions. When you click on a region in the map, anribute contained in the area tag can direct an action to occur. For example, a hyperlink cancreated in each region using the href attribute. When you click onto a region, the hyperlinkl send you to a target page just like any link. Also, since the map is mouse-sensitive, therious onmouse cursor events can be very useful.

e area tag must be contained inside the map element. The separate closing tag isandatory.

tributes and Events

cesskey class dir id lang onblur onclick ondblclick onfocus


mouseover onmouseup style tabindex title

tributes

ordse coords attribute defines the (x,y) coordinates of each shape in the image map. Theordinates are the x and y offset in pixels from the upper left corner (0,0) of the image. Thember of coordinates you need to provide depends of the shape specified by the shaperibute.

efe href attribute is the URL address for the link. Each area tag in the image map can have ak.

hrefe nohref attribute specifies that the region defined by the area tag cannot be a link.

apee shape attribute defines the geometric shape of the image map. It can be a circle (circle orc), polygon (polygon or poly), or a rectangle (rectangle or rect)

get - not allowed in strict XHTMLe target attribute specifies the name of the frame or window in which the target page shouldpear when a link is clicked. The four reserved names are_blank, _parent, _self, and_top.

e area and map tags are used on the DevGuru site to create image mapped links for theexes to the various Quick References. For example, this is the code used for the ASP Quickference. These links are active and will take you to the ASP indexes.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML area Tag Example


38/175


39/175

AG: b

> ...

e b tag causes the designated text to be displayed in a bold weight. If bold is not availablea particular font, the browser may impose some other physical change to the text, such as

derline.

is can also be done using the style sheets font-weight property.


ore attributes:



e

tributes

ne

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML b Tag Examplehead>ody>

>DevGuru products are great!body>html>

tput:vGuru products are great!


40/175

AG: base

ase />

e base tag is used to define the base URL for the HTML document. This allows the use ofative URL addresses elsewhere in the document. Interestingly, this base URL does not havebe an absolute URL, but rather, it can be a relative URL.

so, when a browser arrives from another site to your site via a link, you can use the target

ribute of this tag to ensure that your site does not appear inside a frame or window of theevious site. In other words, your site will always appear as the top window.

e base tag must be placed between the opening and closing head tags.

is is a self-closing tag. The blank space before the slash (/) is recommended for maximumowser compatibilty.

tributes and Events

ef

e href attribute is mandatory. It is used to define the base URL.

get - not allowed in Strict XHTMLe target attribute specifies the default name of the frame or window in which all of the targetges should appear when a link is clicked on your site. However, this can be overridden by aget attribute that is inside an a tag. The four reserved names are_blank, _parent, _self,d_top.

this example, the link in the body resolves to:p://www.devguru.com/Technologies/HTML/quikref/html_index.html

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML base Tag Examplease href="http://www.devguru.com/">head>ody>href="/Technologies/HTML/quikref/html_index.html">HTML Index

body>

html>

is code directs that your site always appears as the top window.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML base Tag Examplease target="_top">


41/175

head>ody>

body>html>


42/175

AG: bdo

do> ...

e bdo tag is used to change the direction that the text reads, from left to right (the default)er to right to left, or vice versa. The purpose of this tag is to allow HTML to correctly display aeat variety of languages, such as Chinese and Hebrew (which are read right to left), in theme document.


tributes and Events

ass dir id lang style title


ead>tle>DevGuru XHTML bdo Tag Examplehead>ody>do dir="rtl"">ry few browsers support this tag.r />

at siht proppus sresworb wef yreVbdo>body>html>


43/175

AG: big

ig> ...

e big tag causes the designated text to be displayed in a larger font size. The actual amountchange will be determined by the browser. If the text is already at maximum size, thisribute will have no effect.


ore attributes:



e


tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML big Tag Examplehead>ody>mall>think very BIGbody>html>


44/175

AG: blockquote

lockquote> ...

e blockquote tag is used to offset a block of text (a citation) from the rest of the document.e exact appearance will be browser dependent. However, the citation is usually indented onth the right and left margins, may be in italics, and is preceded and followed by paragrapheaks. You will still need to use the br, p, and possibly other HTML tags to effect the textualplay and appearance that you desire. In fact, you can use any other HTML tag inside a

ockquote, including cite and q.

s recommended that you use the blockquote tag for long citations and the cite tag for shortations.


tributes and Events



e

ee cite attribute is used to provide a reference to the URL that is the source of the citation.


tle>DevGuru XHTML blockquote Tag Examplehead>ody>me writers make you think:ockquote cite="http://www.hermanmelville.com">sh not off from that isle,

ou canst never return...
bsp; - Herman Melville
blockquote>body>html>

tput:me writers make you think:

Push not off from that isle,thou canst never return...

- Herman Melville


45/175


46/175

AG: body

ody> ...

e body tag is used to signify the start and stop of the contents of your HTML document. All-formed XHTML document must contain properly nested and closed html, head, title, anddy tags.

you are using frames, then you use the frameset tag in place of the body tag.


tributes and Events



e

is example demonstrates the code structure for creating an XHTML document.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML body Examplehead>ody>place document contents between the body tagsbody>

html>


47/175

AG: br

r />

e br tag is used to create a line break and is analogous to a carriage return. The flow of theplay of the text and any images is halted on the current line, and the flow resumes on thext line starting at the left margin.

is is a self-closing tag. The blank space before the slash (/) is recommended for maximum

owser compatibility.

tributes and Events

class style title

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"tp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">

ead>tle>DevGuru XHTML br taghead>ody>

y pseudotrophus "Acei" cichlid came from Lake Malawi in Africa.r />e Showa Koi in my pond came from Japan.

body>html>

tput:y pseudotropheus "Acei" cichlid came from Lake Malawi in Africa.

e Showa Koi in my pond came from Japan.


48/175

AG: button

utton> ...

e button tag is used to create a button form control (field). Control is a technical term thaters to the various elements (buttons, check boxes, radio buttons, text areas) that can beed inside a form to gather information.

e four tags that can be used to build a form are:

tton input select textarea

ecifically, the button tag is used to create a button in a form that can have content, consistan image, and have the illusion of 3-dimensions. The buttons created using the input tag,luding the type="image", cannot have content or display with a 3-D appearance. (Otherwise,

ere is little difference.)

y text or images placed between the opening and closing button tags will be displayed one button. The text can include most HTML tags and they will perform as expected. The oneajor exception is that you cannot display an image map using the map and area tags.

button element should not contain other button tags, nor should it contain fieldset, form,put, label, select, or textarea tags.


tributes and Events

cesskey class dir id lang ondblur onclick ondblclick onfocus


mouseover onmouseup style tabindex title

sablede disabled attribute is a Boolean value that, if present, prevents the button from

nctioning. In some browsers, the button will appear to be greyed out.

mee name attribute is used to assign a unique string of characters as the name of the button.

pee type attribute defines the type of button. The permitted values are button, reset, orbmit.

luee value attribute assigns a value to the button element. This can be changed later usingript code.

hen you click on either button with the mouse, an alert is displayed.

http://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_ondblur.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_ondblur.html


49/175

ead>tle>DevGuru XHTML button Tag Examplehead>ody>orm action="html_button.html" method="get">utton type="button" onclick="JavaScript: alert('Image Button')">

mg src="images/guru.gif">button>/>

utton type="button" onclick="JavaScript: alert('Text Button')">ease Click This Button!button>orm>

body>html>


50/175

AG: input

nput />

e input tag is used to create individual form controls (fields). Control is a technical term thaters to the various elements (buttons, check boxes, radio buttons, text areas) that can beed inside a form to gather information.



e form is the heart of an e-commerce page and the input tag is the heart of a form. Theree ten types of form controls that can be created using the input tag. Appropriately, you muste the type attribute to determine the specific type of the control (field). The types are:

tton

eckbox

den

age

ssword

dio

set

bmit

xt

y number of input tags can be placed anywhere between a pair of opening and closingrm tags to create the desired appearance of the form.

is tag is self-closing tag. The blank space before the slash (/) is recommended for maximumowser compatibilty.

tributes and Events



e

cepte accept attribute is used with the type="file" control to specify what kind of files (including

e path) that can be attached to the form. It is a comma-delimited list. For example:cept="images/*.gif"

cesskey

e accesskey attribute allows you to designate a key on the keyboard that when pressed,ong with the alt or meta key, will bring focus to the input form element.

e alt attribute displays an alternative text for browsers that cannot display an image.

ecked
http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-http://-/?-


51/175

e checked attribute, if present, allows a checkbox or radio button to be preselected (andve a preselected value).

sablede disabled attribute is a Boolean value that, if present, prevents the form control (field) from

nctioning. In some browsers, the control (field) will appear to be greyed out.

mape ismap attribute is a Boolean value that, when present, signifies that the image is being

ed as a mouse-clickable server-side image map.

axlengthe maxlength attribute sets the maximum number of characters that can be entered into ae-line text window.

mee name attribute is a string of characters that is used to label a form control (field) with ame. The name must be unique to that document and cannot be reused.

blur

e onblur event allows the execution of JavaScript code when an element loses focus (forample, the mouse was clicked onto another element or a tab navigation directed the cursorewhere).

change

e onchange event allows the execution of JavaScript code when the form control (field) hasen changed and loses focus.

focus

e onfocus event allows the execution of JavaScript code when an element comes into focusr example, the mouse was clicked onto the element or a tab navigation brought the cursor to

e element).

select

e onselect event allows the execution of JavaScript code when the form control (field) gainscus.

adonlye readonly attribute allows you to display a value in a form control (field) that cannot beanged by the user.

zee size attribute sets the width of a one-line text window by defining how many characters

n fit in the window.

ce src attribute is the URL address or directory/file (path/name) where an image file is being

ored.

bindex

e tabindex attribute specifies an integer that defines the rank in the tabbing order for theecified element when you use the keyboard to navigate (tab through) a page. This attributepoorly supported.


52/175

pee type attribute determines the specific control.

te that by using style sheets you can effect the appearance of the various types of controls.wever, the exact appearance will be browser dependent.

pe="button"

e type="button" control creates a rectangular button that can be clicked when you wish asired action to occur. For example, you could use buttons to navigate through a recordset

ta source being displayed on a web page. (See the RDS objects in the ADO Quickference.) If you want to reset or submit the form, you should use the type="reset" andpe="submit" controls.

value for the name attribute is required. You can use the value attribute to assign a text thatl be displayed on the face of the button. The default color is gray, but that can be changedng style sheets (see example at bottom of page). The text displayed on the button will set

e minimum size, but you can set a different size using style sheets or the size attribute.


nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>

nput type="button" name="btn1" value="click me" />body>html>

pe="checkbox"

e type="checkbox" control creates a small, square button that can be selected orselected by the user with a click of the mouse. When the checkbox is selected, a check markpears within the box.

value for the name attribute is required. You must use the value attribute to assign a valueat is associated with the checkbox. You can also use the checked attribute to precheck theeckbox. When the checkbox has been selected, the value is saved as part of the formormation that is passed to the appropriate file and/or database when the form is submitted.wever, the value for any unselected checkbox is not saved or passed.

de:xml version="1.0" encoding="UTF-8"?>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="checkbox" name="ckbx1" value="true" />orm>

body>


53/175


54/175

ecified image will perform exactly as a submit button, when you click the image, the form isbmitted.

e type="image" also allows you to display a mouse-sensitive image map within a form.his requires that the browser be able to capture and process the X/Y coordinates of theouse.)

u must use the src attribute to list the location of the image file. You can use the alt attributeprovide text for browsers that cannot display an image. Some browsers, by default, place a

rder around the image.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>

nput type="image" src="images/submit.gif" onclick="submitform()" name="submitgif" />orm>

body>html>

pe="password"

e type="password" control displays a one line input window which is used to collect assword as a masked text. A masked text means that when the user types in the password,e actual characters being typed do not appear in the window. Rather an asterisk * isplayed in place of each character in the password.

u can use a type="text" control to gather the user name.

e default window size is browser dependent and is usually 20-30 characters in length.wever, you can set the size using style sheets or the size attribute. The maxlength attributen be used to set the maximum number of characters that will be accepted by the controleld).

is is only a semi-secure method for gathering a password. While the password is not visiblescreen, when the form is submitted, the password is passed unencrypted as part of the

ntents of the form.

de:

xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="password" />orm>


55/175

body>html>

pe="radio"

e type="radio" control is used to create a small round circular button with a white centerat can be selected or unselected by the user with a click of the mouse. When the radio buttonselected, a black dot appears in the center of the circle.

e concept is to present the user with a selection of choices, but only to allow one choice to

made, for example, picking the color of a tee-shirt being ordered on a web site from aection of twelve different colors.

ch related group of radio buttons must have the same name. Further, each radio button in aated group must have a different value. When a specific radio button is selected, only thelue for the selected button is passed as part of the contents of the form upon submission.e values for the unselected radio buttons are not passed.

u cannot change the size or color of a radio button. You can use the checked attribute toeselect one of the radio buttons.

de:

xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="radio" name="radio1" value="one" checked="checked" />nput type="radio" name="radio1" value="two" />

nput type="radio" name="radio1" value="three" />nput type="radio" name="radio1" value="four" />orm>

body>html>

pe="reset"

e type="reset" control creates a rectangular button that can be clicked when the user wantsclear all of the fields in a form. The form is redisplayed in its original presentation.

default the reset button is a gray color and has the text "Reset" displayed inside the button.wever, you can change the color using style sheets and you can use the value button to

ovide a different text for the button. The text displayed on the button will set the minimume, but you can set a different size using style sheets or the size attribute.

name is not required, but it is becoming a very common coding practice to give a uniqueme to every control (field) in a form.



56/175

ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="reset" value="Clear The Form" name="reset1" />orm>

body>html>

pe="submit"

e type="submit" control creates a rectangular button that can be clicked when the usernts to submit the contents of a form for processing.

orm can be submitted to the same page or to another URL. This is set inside the form tagusing the action attribute. However, if it is important that certain contents of the form be

ed out correctly, then you could use the onclick core attribute in the submit button to directe submission to a JavaScript function that proofs the contents. Alternatively, you could useonsubmit attribute inside the form tag to direct the submission to the JavaScript function.is is called client-side form verification.

default the submit button is a gray color and has the text "Submit Query" displayed insidee button. However, you can change the color using style sheets and you can use the valuetton to provide a different text for the button. The text displayed on the button will determinee minimum size, but you can set a different size using style sheets or the size attribute.

name is not required, but it is becoming a very common coding practice to give a uniqueme to every control in a form.

you assign a value, when the form is submitted, that value will be passed as part of thentents.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="submit" name="submit" onclick="submitform()" value="Submit" />orm>

body>html>

pe="text"

e type="text" control displays a one-line text input window into which the user can type thequested information (such as an address or phone number). If the requested information willquire more than one line to enter, you should use a textarea tag rather than a type="text"ntrol.

e default window size is browser dependent and is usually 20-30 characters in length. It isongly recommended that you set the size of a text window rather than using the default. This


57/175

l allow you to effect the appearance of the form in a pleasing and useful manner. Further,e appearance of the form will be fairly independent of the browser being used.

e default window size is browser dependent and is usually 20-30 characters in length.wever, you can set the size using style sheets or the size attribute. The maxlength attributen be used to set the maximum number of characters that will be accepted by the controleld). You can use the value attribute to display a text inside the window, but this is optional.

de:

xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Examplehead>ody>orm>nput type="text" name="text1" size="50" />orm>

body>

html>

luee value attribute assigns an initial value, such as a text or number, to a form control (field).is can be changed later using script code.

emapis usemap attribute specifies the name of an image map that you wish to associate with the

ement. This indicates that the image is being used as a mouse-clickable client-side imageap.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML input Tag Example

cript type="text/javascript">nction submitform()lert("Thank You For Submitting The Form") }script>

head>ody>

Y SAMPLE FORM:/>

orm method="post" enctype="multipart/form-data" action="next.asp">

nput type="button" name="btn2" value="click me" style="background-color:yellow;" /> Button/>

nput type="checkbox" name="ckbx2" value="true" /> Check Box/>

nput type="file" name="file2" /> Attach a File


58/175

/>nput type="hidden" name="SocSecNum" value="123-45-6789" />

/>nput type="password" /> Password

/>nput type="radio" name="radio2" value="one" checked="checked" /> First Radio Buttonr />

nput type="radio" name="radio2" value="two" /> Second Radio Buttonr />

nput type="radio" name="radio2" value="three" /> Third Radio Buttonr />nput type="radio" name="radio2" value="four" /> Forth Radio Button

/>nput type="text" name="submit" name="text2" size="50" /> Textr />

nput type="text" name="submit" name="text3" size="25" /> Textr />

nput type="text" name="submit" name="text4" size="2" /> Text/>

nput type="reset" value="Clear The Form" style="color:white; background-color:blue;" />set Button

r />nput type="submit" name="submit" name="submit2" onclick="submitform()"ue="Submit" style="color:white; background-color:red;" />bmit Button Or Use An Image Submit Button

nput type="image" src="images/submit.gif" onclick="submitform()" name="submitgif" />

orm>body>html>


59/175

AG: select

elect> ...

e select tag is used to create a pull-down list form control (field). Control is a technical termat refers to the various elements (buttons, check boxes, radio buttons, text areas) that can beed inside a form to gather information.



e select tag is used to delimit the start and stop of a multiple choice pull-down menu. Thefault for this tag is to create a one-line window with a button on the left side. (Optionally, youn display a multi-line window.) When you single click onto the button with a mouse, the one-e window expands to display a list of items. You can then select one item from the list bymply clicking on the item with the mouse. (Optionally, you can allow more than one item to beected.) Note that the user can select or unselect the item(s) any number of times. When anm(s) is selected, it is added to the contents of the form and when the form is submitted, theected item(s) will be passed along with all of the other contents.

e beauty of the select form control is that it can occupy as little as one line of space on arm, yet allow the user to choose from a very large selection of items. For example, your pull-wn could be a list of all fifty states. As another example, note the pull-down list at the top ofs HTML Quick Reference page. When you select an item, it acts as a link and directs you toother page in this HTML Quick Reference.

u must use the option or the optgroup tags to define each item in the menu.


tributes and Events



e



ultiplee multiple attribute allows the user to choose more than one item in the pull-down. Thefault is to be able to choose only one item.

mee name attribute is a string of characters that is used to label a form control (field) with ame. The name must be unique to that document and cannot be reused.

blur

http://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblurhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblur


60/175

change

e onchange event allows the execution of JavaScript code when the form control (field) hasen changed and loses focus.

focus


e element).

zee size attribute allows the user to have more than one item on display in the pull-downndow. Up and down buttons will allow you to scroll through the list. The default is to displayy one item.

bindex


is is a simple pull-down that allows the choice of one item.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML select Tag Examplehead>ody>

old Fish Typesr />

elect>ption selected>Cometption>Orandaption>Ranchuption>Ryukin

select>body>html>

tput:

re is the code for the pull-down at the top of this page.

de:

elect name="SeeAlsoSelect" onChange=ViewCrossReference(this); style="height: 22px;dth: 240px">ption value="xhtml_form.html" selected>form tagption value="xhtml_input.html">input tagption value="xhtml_button.html">button tagption value="xhtml_optgroup.html">optgroup tagption value="xhtml_option.html">option tag
http://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblurhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblurhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblurhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onblur


61/175

ption value="xhtml_textarea.html">textarea tagselect>href="javascript:ViewCrossReference(document.MainForm.SeeAlsoSelect)" border=0>

mg src="images/go.gif" border="0" height=22 width="20" value="Go">a>

is JavaScript function is placed in the head element.

cript type="text/javascript">nction ViewCrossReference (selSelectObject)

f (selSelectObject.options[selSelectObject.selectedIndex].value != "")

location.href=selSelectObject.options[selSelectObject.selectedIndex].value

script>


62/175

AG: textarea

extarea> ...

e textarea tag is used to create a multi-line text input window form control (field). Control isechnical term that refers to the various elements (buttons, check boxes, radio buttons, texteas) that can be used inside a form to gather information.



e textarea control should be used when the user needs to input more than one line of data.you only expect the user to input a few words, you should use the input tag with type="text"ntrol that creates a one-line text input window.

y text or HTML code that occurs between the opening and closing textarea tags will appearide the textarea window.


tributes and Events



e

cesskey

e accesskey attribute allows you to designate a key on the keyboard that when pressed,ong with the alt or meta key, will bring focus to the textarea element. This attribute is poorlypported.

lse cols attribute sets how many characters will be visible across the width of the textboxndow.



mee name attribute is a string of characters that is used to label a form control (field) with a

me. The name must be unique to that document and cannot be reused.

blur


change

e onchange event allows the execution of JavaScript code when the form field or elements been changed and loses focus.
http://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onchanger.htmlhttp://c%7C/Documents%20and%20Settings/dave/Desktop/qrs/XHTML113/xhtml_event_onchanger.html


63/175

focus


e element).

select

e onselect event allows the execution of JavaScript code when the form field or elementns focus.

adonlye readonly attribute allows you to display a text or value in a form control (field) that cannotchanged by the user.

wse rows attribute sets how many rows will be displayed in the textarea window.

bindex


is example shows two textarea windows, the first is not sized and the second is sized.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-nsitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML textarea Tag Examplehead>ody>

orm action="html_textarea.html" method="post">extarea name="textarea12">e default size is 2 rows, 20 columnsextarea>r />

extarea cols="45" rows="4" name="textarea13>is is 4 rows, 45 columnsextarea>orm>

body>html>


64/175

VENT: onselect

select="action"

e onselect event occurs when a single character in a text is highlighted by using the mousedrag over the character. This is called a select. Whenever the select occurs, the script codesociated with the onselect event is executed. This script can call JavaScript functions thatntain code that you want to run when the select occurs.



this example, every time you use the mouse to highlight the text in the input window, an alert

pears.

de:xml version="1.0" encoding="UTF-8"?>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"tp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">tml xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">ead>tle>DevGuru XHTML onselect Examplehead>ody>orm>

ease use the mouse to highlight the text in the input windowr />te that as soon as you highlight one character, the alert appearsr />

nput type="text" value="DevGuru" id="text1" name="text1"select="JavaScript:alert('Thank you for choosing DevGuru!')" />orm>

body>html>


65/175


66/175

AG: link

nk>

e link tag is used to establish a relationship between the current document and one or moreher related documents. For example, if you have a Cascading Style Sheets .css file thatfines the style for an entire web site, then each file in the site would be linked to the .css fileng the link tag.

is tag can be used more than once (i.e., one link per tag). Each occurrence of this tag mustplaced inside the head element. Remember, a value for the href attribute is required.

is is a self-closing tag. The blank space before the slash (/) is recommended for maximumowser compatibilty.

tributes and Events



e

arsete charset attribute is used to specify the character encoding used on the page that is theget of the link. Character encoding defines how a sequence of bytes is to be converted intoaracters for display.

efe href attribute is a valid URL address for another document. This attribute is required.

eflange hreflang attribute can only be used when the href attribute is also being used. It specifies

e language of the page that is the target of the link.

ediae media attribute specifies which medium the links apply to. Permitted values include: all,ral, braille, handheld, print, projection, screen, tty, and tv.

e rel attribute is currently not fully supported by most browsers. It is a space-separated list ofe or more values that specify the relationship from the source page to the target for a link.me of the proposed values are, appendix, bookmark, chapter, contents, copyright,

ossert, help, index, next, prev, section, stylesheets, and subsection.

ve rev attribute is currently not fully supported by most browsers. It is a space-separated listone or more values that specify the relationship from the target page to the source for a link.rhaps the most useful value is relation.

gete target attribute specifies the name of the frame or window in which the target page shouldpear when a link is clicked. The four reserved names are_blank, _parent, _self, and_top.

pee type attribute specifies the MIME (Multipurpose Internet Mail Extension) type of the linked


67/175

cument. Two permitted type values include: text/css and text/javascript.

is example demonstrates the code for creating two different types of links.


ead>tle> XHTML link Tag Example nk rel="stylesheet" type="text/css" href="include/StylesDefinitions.css" />nk rev="relation" href="http://www.fly-by-day-computing.com" />head>ody>

body>html>


68/175

AG: meta

meta />

e meta tag is primarily used to list information (meta data) about the current HTMLcument. This information can be anything you want users to know about your site includingthor names, keywords, subject matter, and topics of interest. This meta data is usedtensively by the various Internet search engines.

e meta tag can also be used with the http-equiv attribute to simulate HTTP headers.

is tag presents the information as name/content paired values by using the name andntent attributes. You can have more than one meta element per page.

is is a self-closing tag. T