-
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
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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.
-
8/3/2019 DevGuru XHTML Quickref
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:
-
8/3/2019 DevGuru XHTML Quickref
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!
-
8/3/2019 DevGuru XHTML Quickref
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/3/2019 DevGuru XHTML Quickref
8/175
Quick Reference Library
XHTML Quick Reference
Copyright 1999-2002 by Infinite Software Solutions, Inc. All
rights reserved.
Trademark Information.
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
-
8/3/2019 DevGuru XHTML Quickref
13/175
-
8/3/2019 DevGuru XHTML Quickref
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.
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 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.
-
8/3/2019 DevGuru XHTML Quickref
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.
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 lang
Attribute Examplehead>ody>pan lang="el">place text of
foreign language here ...span>body>html>
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
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 onclick Tag Examplehead>ody>
nput type="button" onclick="JavaScript: alert( 'onclick event'
)" value="Click On This Button"
body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
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 ondblclick Tag Examplehead>ody>
nput type="button" ondblclick="JavaScript: alert( 'ondblclick
event' )" value="Double Clicke!" />body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
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>
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
21/175
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
23/175
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
e five mouse events are: onmousedown, onmousemove, onmouseout,
onmouseover,d onmouseup.
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.
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 onmouseout Tag
Examplehead>ody>
nput type="button" onmouseout="JavaScript: alert( 'onmouseout
event' )" value="Move Theouse Out Of This Button!"
/>body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
e five mouse events are: onmousedown, onmousemove, onmouseout,
onmouseover,d onmouseup.
this example, simply move the mouse over on the button element.
As soon as you moveer, an alert is displayed with a message.
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 onmouseover Tag
Examplehead>ody>
nput type="button" onmouseover="JavaScript: alert( 'onmouseover
event' )" value="Movee Mouse Over This Button!" />
body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
e five mouse events are: onmousedown, onmousemove, onmouseout,
onmouseover,d onmouseup.
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.
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 onmouseup Tag
Examplehead>ody>
nput type="button" onmouseup="JavaScript: alert( 'onmouseup
event' )" value="Click Andlease The Mouse While Inside This
Button!" />
body>html>
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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.)
ere are four attributes common to most tags: class, id, style,
and title.
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
-
8/3/2019 DevGuru XHTML Quickref
30/175
able title="PhoneNumbers">
-
8/3/2019 DevGuru XHTML Quickref
31/175
AG: abbr
bbr> ...
e abbr tag is used to signify that the enclosed text is an
abbreviation of a longer word orrase.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
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 abbr Tag
Examplehead>ody>bbr>lb is an abbreviation for
poundbody>html>
tput:s an abbreviation for pound
-
8/3/2019 DevGuru XHTML Quickref
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.
ere are four attributes common to most tags: class, id, style,
and title.
this example, the text enclosed by the span tags will be brown,
size 24px and in Times font.
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 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...
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
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 acronym Tag
Examplehead>ody>cronym>MIME means Multipurpose Internet
Mail Extensionbody>html>
tput:ME means Multipurpose Internet Mail Extension
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
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 address Tag
Examplehead>ody>ddress>vGuru
06 Kingston Pike
oxville, TN 37919
address>body>
html>
tput:vGuru06 Kingston Pikeoxville, TN 37919
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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
keydown onkeypress onkeyup onmousedown onmousemove
onmouseout
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
-
8/3/2019 DevGuru XHTML Quickref
38/175
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
ore attributes:
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
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!
-
8/3/2019 DevGuru XHTML Quickref
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">
-
8/3/2019 DevGuru XHTML Quickref
41/175
head>ody>
body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang style 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 bdo Tag Examplehead>ody>do
dir="rtl"">ry few browsers support this tag.r />
at siht proppus sresworb wef yreVbdo>body>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
ore attributes:
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
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 big Tag
Examplehead>ody>mall>think very BIGbody>html>
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
ee cite attribute is used to provide a reference to the URL that
is the source of the citation.
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 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
-
8/3/2019 DevGuru XHTML Quickref
45/175
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
-
8/3/2019 DevGuru XHTML Quickref
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.
e separate closing tag is mandatory.
tributes and Events
cesskey class dir id lang ondblur onclick ondblclick onfocus
keydown onkeypress onkeyup onmousedown onmousemove
onmouseout
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.
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">
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
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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 four tags that can be used to build a form are:
tton input select textarea
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
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
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://-/?-
-
8/3/2019 DevGuru XHTML Quickref
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.
-
8/3/2019 DevGuru XHTML Quickref
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.
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>
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>
-
8/3/2019 DevGuru XHTML Quickref
53/175
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
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">
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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 four tags that can be used to build a form are:
tton input select textarea
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
e
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.
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
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).
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
-
8/3/2019 DevGuru XHTML Quickref
60/175
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).
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
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.
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
-
8/3/2019 DevGuru XHTML Quickref
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>
-
8/3/2019 DevGuru XHTML Quickref
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 four tags that can be used to build a form are:
tton input select textarea
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.
e separate closing tag is mandatory.
tributes and Events
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
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.
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.
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
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 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
-
8/3/2019 DevGuru XHTML Quickref
63/175
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 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
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.
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>
-
8/3/2019 DevGuru XHTML Quickref
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.
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, 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>
-
8/3/2019 DevGuru XHTML Quickref
65/175
-
8/3/2019 DevGuru XHTML Quickref
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
ass dir id lang onclick ondblclick onkeydown onkeypress
onkeyup
mousedown onmousemove onmouseout onmouseover onmouseup style
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
-
8/3/2019 DevGuru XHTML Quickref
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.
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> 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>
-
8/3/2019 DevGuru XHTML Quickref
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