Tài liệu HTML & CSS: The Complete Reference- P7 doc

280
P a r t I : C o r e M a r k u p

280
P a r t I : C o r e M a r k u p
Standard Syntax
<input
accept="MIME types"
accesskey="character"
align="bottom | left | middle | right | top" (transitional only)
alt="text"
checked="checked"
class="class name(s)"
dir="ltr | rtl"
disabled="disabled"
id="unique alphanumeric identifier"
lang="language code"
maxlength="maximum field size"
name="field name"
readonly="readonly"
size="field size"
style="style information"
tabindex="number"
title="advisory text"
type="button | checkbox | file | hidden | image |
password | radio | reset | submit | text"
usemap="URL of map file"
value="field value">
Attributes Introduced by HTML5
autocomplete="on | off"
autofocus="autofocus"
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
form="id of related form element"
formaction="URL of form action"
formenctype="MIME type of form encoding"
formmethod="get | post | put | delete"
formnovalidate="true | false"
formtarget="name of target frame, region, or window"
height="pixels"
hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
list="id of datalist element to get suggestions from"
max="maximum value (number)"
min="minimum value (number)"
multiple="true | false"
pattern="validation pattern as regular expression"
placeholder="placeholder text"
required="required"
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
281
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
281
PART I
spellcheck="true | false"
step="float"
type= older type values from above| color | date | datetime |
datetime-local | email | list | number | month | range |
tel | time | url | search | week
width="pixels"
Attributes Defined by Internet Explorer
autocomplete="off | on" (5) (password, text types only)
dynsrc="URL of movie" (3) (image type only)
language="javascript | jscript | vbs | vbscript" (4)
disabled="false | true" (4) (all types except for hidden)
hidefocus="true | false" (5.5)
height="pixels" (3) (image type only)
hspace="pixels or percentage" (3)
loop="number" (4) (image type only)
lowsrc="URL of low-resolution image" (4) (image type only)
unselectable="off | on" (5.5)
vspace="pixels or percentage" (3) (image type only)
width="pixels" (3) (image type only)
Standard Event Attributes
onchange, onclick, ondblclick, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Events Defined by Internet Explorer
onactivate, onafterupdate (checkbox, hidden, password, radio, text),
onbeforeactivate
(all types except hidden), onbeforecut (all types except hidden),
onbeforedeactivate, onbeforeeditfocus, onbeforepaste
(all types except hidden),
onbeforeupdate (checkbox, hidden, password, radio, text), onblur
(all types
except hidden),
oncontextmenu (all types except hidden), oncontrolselect, oncut
(all types except hidden), ondeactivate, ondrag (all types except hidden), ondragend
(all types except hidden), ondragenter (all types except hidden), ondragleave (all
types except hidden),
ondragover (all types except hidden), ondragstart (all types
except hidden),
ondrop (all types except hidden), onerrorupdate (checkbox,
hidden, password, radio, text), onfilterchange
(all types except hidden),
onfocus, onfocusin
(all types except hidden), onfocusout (all types except hidden),
onhelp
(all types except hidden), onlosecapture, onmouseenter (all types except
hidden),
onmouseleave (all types except hidden), onmousewheel (all types except
hidden),
onmove, onmoveend, onmovestart, onpaste (all types except hidden),
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

282
P a r t I : C o r e M a r k u p

282
P a r t I : C o r e M a r k u p
onpropertychange, onreadystatechange, onresize (button, file, image,
password, reset, submit, text), onresizeend, onresizestart, onselectstart
(all types except hidden), ontimeerror
Element-Specific Attributes
accept This attribute is used to list the MIME types accepted for file uploads when using a
file upload control (<input type="file">).
align With image form controls (type="image"), this attribute aligns the image with
respect to surrounding text. The HTML 4.01 transitional specification defines bottom, left,
middle, right, and top as allowable values. Netscape and Microsoft browsers might also
allow the use of attribute values such as absbottom or absmiddle. Like other presentation-
specific aspects of HTML, the align attribute is dropped under the strict HTML 4.01
specification.
alt This attribute is used to display an alternative description of image buttons for text-
only browsers. The meaning of alt for forms of <input> beyond type="input" is not
defined.
autocomplete This Microsoft-specific attribute is used to indicate whether or not the form
field should be automatically filled in. The default value is no. HTML5 also supports this
attribute.
autofocus This HTML5 Boolean attribute is used to indicate that the user agent should
immediately focus this form item once its containing window object (usually the document)
is made active. It only takes an attribute value of autofocus when using the XML-style
syntax for HTML5. It is not defined for <input type="hidden">.
checked The checked attribute should be used only for check box (type="checkbox")
and radio (type="radio") form controls. The presence of this attribute indicates that the
control should be displayed in its checked state.
disabled This attribute is used to turn off a form control. Elements will not be submitted,
nor will they receive any focus from the keyboard or mouse. Disabled form controls will not
be part of the tabbing order. The browser also might gray out the form that is disabled, to
indicate to the user that the form control is inactive. This attribute requires no value.
dynsrc In the Microsoft implementation, this attribute indicates the URL of a movie file and
is used instead of the src attribute for <input type="image">.
form This HTML5 attribute should be set to a string that corresponds to the id of the form
element that an interactive control such as a button is associated with. This allows form
elements in one form to trigger actions in others.
formaction This HTML5 attribute specifies a URL to target when the button is clicked,
similar to the use of the
action attribute on a form element.
formenctype This attribute indicates how form data should be encoded before being sent to
the server. The default is application/x-www-form-urlencoded. This encoding replaces
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
283
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
283
PART I
blank characters in the data with a plus character (+) and all other nonprinting characters
with a percent sign (
%) followed by the character’s ASCII HEX representation. The
multipart/form-data option does not perform character conversion and transfers the
information as a compound MIME document. This must be used when using <input-
type="file">
. It also might be possible to use another encoding, such as text/plain
with a mailed form, but in general you should be cautious about changing the
enctype.
formmethod This HTML5 attribute indicates how form information should be transferred
to the server using a particular HTTP method. A get value in the attribute indicates that
form data should be appended to the URL specified by the action attribute thus creating a
query string. This approach is quite simple but imposes a size limitation that is difficult to
gauge (may be as low as 2 kilobytes in real situations). A value of post for this attribute
transfers the data of the form in the message body using the HTTP POST method, which
imposes no data size limitation. Browsers may allow for other HTTP methods like delete
or put, as suggested by the HTML5 specification, but so far such usage is rare. The POST
method must be used when file attachments are used in a form.
formnovalidate This HTML5 Boolean attribute is used to indicate a form should not be
validated during submission. It is false by default but may be controlled either on the
button directly or on a containing or related form. Initially this was simply known as
novalidate.
formtarget This HTML5 attribute is set to the name of a window or frame that the button
will target the result of action; in other words, where the result should appear. This action is
similar to the target attribute on <a> and <form> tags. Initially, this attribute was simply
target in early drafts of HTML5.
height Defined under HTML5, though commonly supported in older browsers, this
attribute is used to size an input element particularly when images are used as in <input
type="image">
. CSS properties are preferred.
hspace This Internet Explorer–specific attribute indicates the horizontal space, in pixels,
between the image and surrounding text when using <input type="image">.
list The HTML5 list attribute is used to set the id of a datalist element used to
provide a predefined list of options suggested to the user for entry.
loop In the Microsoft implementation, this attribute is used with <input type="image">
and the dynsrc attribute to cause a movie to loop. Its value is either a numeric loop count
or the keyword infinite. Later versions of Internet Explorer suggest using –1 to indicate
infinite.
lowsrc This Microsoft-supported attribute contains the URL of an image to be initially
loaded when using <input type="image">. Typically, the lowsrc image is a low-
resolution or black-and-white image that provides a quick preview of the image to follow.
Once the primary image is loaded, it replaces the lowsrc image.
max This HTML5 attribute should be set to a numeric value that is the high range allowed
in the form control. The min attribute sets the low range.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

284
P a r t I : C o r e M a r k u p

284
P a r t I : C o r e M a r k u p
maxlength This attribute indicates the maximum content length that can be entered in a
text form control (type="text"). The maximum number of characters allowed differs from
the visible dimension of the form control, which is set with the size attribute.
min This HTML5 attribute should be set to a numeric value that is the low range allowed
in the form control. The max attribute sets the high range.
multiple This HTML5 Boolean attribute, when set to true, indicates that multiple values
are allowed for the field.
name This attribute allows a form control to be assigned a name to set as the name/value
pair value sent to the server. Traditionally, this value was also used for reference by a
scripting language, but using the id value is more appropriate. However, given that
browsers sometimes favor the older syntax, both may often be used and set to the same
value, with some limitations, particularly with radio buttons.
pattern This HTML5 attribute specifies a regular expression against which the field should
be validated. The title attribute should be provided when this attribute is used, to give an
indication of what is an acceptable pattern and what isn’t.
placeholder This HTML5 attribute specifies a short bit of text that is used to help the user
figure out what type of information to fill in for a form control. Likely, the text will be
placed in the field and cleared upon focus.
readonly This attribute prevents the form control’s value from being changed. Form
controls with this attribute set might receive focus from the user but not permit the user to
modify the value. Because it receives focus, a readonly form control will be part of the
form’s tabbing order. The control’s value will be sent on form submission. This attribute can
be used only with <input> when type is set to text or password. The attribute also is
used with the textarea element.
required The presence of this HTML5 Boolean attribute indicates that the form field must
be set in order for form submission to proceed. User agents that understand this should set
the CSS pseudo-class :invalid when the field goes into error.
size This attribute indicates the visible dimension, in characters, of a text form control
(type="text"). This differs from the maximum length of content, which can be entered in a
form control set by the maxlength attribute.
src This attribute is used with image form controls (type="image") to specify the URL of
the image file to load.
step This HTML5 attribute defines the step in which values can take; for example, by twos
(2, 4, 6…) or tens (10, 20, 30…). It is generally used in range controls.
tabindex This attribute takes a numeric value that indicates the position of the form control
in the tabbing index for the form. Tabbing proceeds from the lowest positive tabindex
value to the highest. Negative values for tabindex will leave the form control out of the
tabbing order. When tabbing is not explicitly set, the browser tabs through items in the
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
285
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
285
PART I
order they are encountered. Disabled form fields will not be part of the tabbing index,
although read-only controls will be.
type This attribute specifies the type of the form control. A value of button indicates a
general-purpose button with no well-defined meaning. However, an action can be
associated with the button by using an event handler attribute, such as onclick. A value of
checkbox indicates a check box control. Check box form controls have a checked and
unchecked setting, but even if these controls are grouped together, they allow a user to
select multiple check boxes simultaneously. In contrast, a value of
radio indicates a radio
button control. When grouped, radio buttons allow only one of the many choices to be
selected at a given time.
A form control type of hidden indicates a field that is not visible to the viewer but is
used to store information. A hidden form control often is used to preserve state information
between pages.
A value of file for the type attribute indicates a control that allows the viewer to
upload a file to a server. The filename can be entered in a displayed field, or a user agent
might provide a special browse button that allows the user to locate the file. A value of
image indicates a graphic image form control that a user can click on to invoke an
associated action. (Most browsers allow the use of img-associated attributes such as height,
width, hspace, vspace, and alt when the type value is set to image.) A value of
password for the type attribute indicates a password entry field. A password field will not
display text entered as it is typed; it might instead show a series of dots. Note that
password-entered data is not transferred to the server in any secure fashion. A value of
reset for the type attribute is used to insert a button that resets all controls within a form
to their default values. A value of submit inserts a special submission button that, when
clicked, sends the contents of the form to the location indicated by the action attribute of
the enclosing <form> tag. Lastly, a value of text (the default) for the type attribute
indicates a single-line text input field.
HTML5 expands greatly on this attribute’s possible values, specifying search, url,
email, tel, datetime, date, month, week, time, datetime-local, number, range, and
color as well. Likely there will be others. Many of these ideas derived from the Web
Forms 2.0 specification, which Opera implements partially. WebKit also implements a select
number of these form field types. Likely other browsers will quickly follow suit.
usemap This HTML 4.0 attribute is used to indicate the map file to be associated with an
image when the form control is set with
type="image". The value of the attribute should
be a URL of a map file but generally will be in the form of a URL fragment referencing a
map file within the current file.
value This attribute has two different uses, depending on the value for the type attribute.
With data-entry controls (type="text" and type="password"), this attribute is used to
set the default value for the control. When used with check box or radio button form
controls, this attribute specifies the return value for the control. If it is not set for these fields,
a default value of on will be submitted when the control is activated.
vspace This Internet Explorer–specific attribute indicates the vertical space, in pixels,
between the image and surrounding text when using <input type="image">.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

286
P a r t I : C o r e M a r k u p

286
P a r t I : C o r e M a r k u p
width This attribute, initially supported by many browsers such as Internet Explorer for
image buttons and now defined under HTML5, is used to set the size of the form control, in
pixels. This should be controlled with CSS instead.
Examples
<form action="#" method="get">
<fieldset>
<legend>Basics</legend>
<p>Enter your name: <input type="text" maxlength="35" size="20"><br>
Enter your password: <input type="password" maxlength="35" size="20">
</p>
</fieldset>
<p><label>Which is your favorite food?</label>
<input type="radio" name="favorite" value="Mexican">Mexican
<input type="radio" name="favorite" value="Russian">Russian
<input type="radio" name="favorite" value="Japanese">Japanese
<input type="radio" checked name="favorite" value="Other">Other
</p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
<! HTML5 snippets >
<p><label> Three Letter Acronyms:
<input pattern="[A-Z]{3}" name="threeletter"
title="Enter an upper case three letter combination."/>
</label></p>
<p><label>Name: <input type="text" name="fullname" placeholder="Thomas A.
Powell"></label></p>

<p><input type="range" name="slider"></p>
<p><input type="date" oninput="year.value = valueAsDate.getYear();">
<p>HTML5 finalized in the year <output output="year">&nbsp;</output></p>

<p><label> Favorite Dog: <input list="dogs"></label></p>
<datalist id="dogs">
<option>Angus</option>
<
option>Tucker</option>
<option>Cisco</option>
<option>Sabrina</option>
</datalist>
Compatibility
HTML 2, 3.2, 4, 4.01, 5
XHTML 1.0, 1.1, Basic
Firefox 1+, Internet Explorer 2+,
Netscape 1+, Opera 2.1+, Safari 1+
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
287
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
287
PART I
Notes
• The HTML 2.0 and 3.2 specifications support only the align, checked, maxlength,
name, size, src, type, and value attributes for the input element.
• The HTML 4.01 specification also reserves the use of the
datafld, dataformatas,
and datasrc data-binding attributes. They were not included in the XHTML
specification but are supported by Internet Explorer.
• Use of
autocomplete may have security implications. Use with caution.
• Under the strict HTML and XHTML specifications, the
align attribute is not
allowed.
• As an empty element under XHTML or when using XML-style syntax for HTML5,
a trailing slash is required for this element:
<input />.
• Safari running on the iPhone extends this element with
autocorrect and
autocapitalize attributes. Given the difficulty of filling in forms on small-factor
devices, it is likely there may be other proprietary changes that are device specific.
<ins> (Inserted Text)
This element is used to indicate that text has been added to the document. Inserted text is
generally styled with an underline.
Standard Syntax
<ins
cite="URL"
class="class name(s)"
datetime="date"
dir="ltr | rtl"
id="unique alphanumeric identifier"
lang="language code"
style="style information"
title="advisory text">

</ins>
Attributes Introduced by HTML5
accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
spellcheck="true | false"
tabindex="number"
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

288
P a r t I : C o r e M a r k u p

288
P a r t I : C o r e M a r k u p
Attributes Defined by Internet Explorer
accesskey="key" (5.5)
contenteditable=" false | true | inherit " (5.5)
disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number"(5.5)
unselectable="on | off" (5.5)
HTML 4 Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup
HTML5 Event Attributes
onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,
onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,
onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,
onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,
onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,
onsuspend, ontimeupdate, onvolumechange, onwaiting
Events Defined by Internet Explorer
onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, oncontrolselect,
ondeactivate, onfocus, onmove, onmoveend, onmovestart, onreadystatechange,
onresizeend, onresizestart, ontimeerror
NOTE MSDN documentation for this element appears incorrect for event handlers. Not all core
events are listed, but during testing they all worked. Other extended events like onbeforecopy,
oncopy, oncontextmenu, and more were also verified as functional under Internet Explorer 8.
Element-Specific Attributes
cite The value of this attribute is a URL that designates a source document or message for
the information inserted. This attribute is intended to point to information explaining why
the text was changed.
datetime This attribute is used to indicate the date and time the insertion was made. The
value of the attribute is a date in a special format as defined by ISO 8601. The basic date
format is
yyyy-mm-ddthh:mm:ssTZD
where the following is true:
yyyy=four-digit year such as 2010
mm=two-digit month (01=January, 02=February, and so on)
dd=two-digit day of the month (01 through 31)
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
289
C h a p t e r 3 : H T M L a n d X H T M L E l e m e n t R e f e r e n c e
289
PART I
hh=two-digit hour (00 to 23) (24-hour clock not AM or PM)
mm=two-digit minute (00 to 59)
ss=two-digit second (00 to 59)
tzd=time zone designator
The time zone designator is either Z, which indicates Universal Time Coordinate or
coordinated universal time format (UTC), or +hh:mm, which indicates that the time is a local
time that is hh hours and mm minutes ahead of UTC. Alternatively, the format for the time
zone designator could be –hh:mm, which indicates that the local time is behind UTC. Note
that the letter T actually appears in the string, all digits must be used, and
00 values for
minutes and seconds might be required. An example value for the
datetime attribute
might be 2009-10-6T09:15:00-05:00, which corresponds to October 6, 2010, 9:15 A.M.,
U.S. Eastern Standard Time.
Example
<p>We have the lowest prices in the galaxy! <ins cite="http://www
.democompany.com/changes/jan10.html"
date="2010-05-01T09:15:00-05:00">
New rates are effective in 2010.
</ins></p>
Compatibility
HTML 4, 4.01, 5
XHTML 1.0, 1.1
Firefox 1+, Internet Explorer 4+,
Netscape 6+, Opera 4+, Safari 1+
Note
• Browsers can render inserted (<ins>) or deleted (<del>) text in a different style to
show the changes that have been made to the document. Typically, newly inserted
entries are underlined and deletions appear with strikethrough. In theory, a browser
could have a way to show a revision history on a document, but generally this is left
up to scripting or the environment the page is built in.
<isindex> (Index Prompt)
This element indicates that a document has an associated searchable keyword index. When
a browser encounters this element, it inserts a query entry field at that point in the
document. The viewer can enter query terms to perform a search. This element is
deprecated under the strict HTML and XHTML specifications and should not be used.
Standard Syntax (Transitional Only)
<isindex
class="class name(s)"
dir="ltr | rtl"
href="URL" (nonstandard but common)
id="unique alphanumeric identifier"
lang="language code"
prompt="string"
style="style information"
title="advisory text" />
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Xem chi tiết: Tài liệu HTML & CSS: The Complete Reference- P7 doc