HTML and CSS Reference
In-Depth Information
Autocomplete
A fairly simple but important form attribute is
autocomplete
. It has two states,
on
and
off
, and it defaults to
on
. Basically, if you do not want autocomplete, just set it to
off
.
Otherwise, it's the default state of forms. Sometimes autocomplete can be a bother; if so, just
add the following line:
<
form
autocomplete=
”off”
>
With the state set to of , a reused word will not pop up. For example, if you change your
e-mail address, your old address may show up automatically in e-mail address boxes if the
autocomplete
is not set to
off
.
Name and target
h e
name
attribute is one of the most important attributes of a form because it's used in the
DOM to identify it. As a property of the document object, it can be referenced either as an
array element, such as
forms[0]
, or by name. Organizationally, it's far easier to reference a
form and its children by a name.
In addition to a
name
attribute, forms have a global attribute,
id
. Both attributes have names.
In the DOM, the reference is to the
name
attribute. However, within a single Web document
(page), other elements can identify the form with a reference to the form
id
. What's more, a
new feature of HTML5 is that the form child can exist outside the
<form>
container and
have a form attribute linking it to any form in the page. For example, the following text input
element is part of the form with the
id
of
ralph
.
288
<
input
type
=
text
form=ralph
name
=hometown>
h e text input element can be anywhere on the page, and that means designers don't have to
put all the input in one place. Try the following script (
FormID.html
in this chapter's folder
at
www.wiley.com/go/smashinghtml5
) and test it with Opera (which has implemented
this new feature).
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
script
type
=
”text/javascript”
>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
favorite = document.formName.favURL.value;
personName=document.formName.person.value;
message=personName + “'s favorite Web site is “ +favorite;
document.formName.output.value=message;
}
</
script
>
<
style
type
=
”text/css”
>