Scribd
Upload
31 views

The Input Element in HTML

The document summarizes the INPUT element in HTML, which defines form controls like text fields, checkboxes, and buttons. It lists the different types of controls that can be created using INPUT like text, password, checkbox, radio, submit, image, hidden, and file. It provides details on attributes for each control type and examples of forms containing different INPUT elements.

Uploaded by

Dave Aguila
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
31 views

The Input Element in HTML

The document summarizes the INPUT element in HTML, which defines form controls like text fields, checkboxes, and buttons. It lists the different types of controls that can be created using INPUT like text, password, checkbox, radio, submit, image, hidden, and file. It provides details on attributes for each control type and examples of forms containing different INPUT elements.

Uploaded by

Dave Aguila
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

17.

4 The INPUT element


<!ENTITY % InputType
"(TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
FILE | HIDDEN | IMAGE | BUTTON)"
>
<!-- attribute name required
<!ELEMENT INPUT - O EMPTY
<!ATTLIST INPUT
%attrs;
type
%InputType;
name
CDATA
value
CDATA
checkboxes -checked
(checked)
disabled
(disabled)
readonly
(readonly)
size
CDATA
maxlength
NUMBER
src
%URI;
alt
CDATA
usemap
%URI;
ismap
(ismap)
tabindex
NUMBER
accesskey
%Character;
onfocus
%Script;
onblur
%Script;
onselect
%Script;
onchange
%Script;
accept
%ContentTypes;
->

for all but submit and reset -->


-- form control -->
TEXT
#IMPLIED
#IMPLIED

-----

%coreattrs, %i18n, %events -what kind of widget is needed -submit as part of form -Specify for radio buttons and

#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED
#IMPLIED

-----------------

for radio buttons and check boxes -unavailable in this context -for text and passwd -specific to each type of field -max chars for text fields -for fields with images -short description -use client-side image map -use server-side image map -position in tabbing order -accessibility key character -the element got the focus -the element lost the focus -some text was selected -the element value was changed -list of MIME types for file upload

Start tag: required, End tag: forbidden


Attribute definitions
type = text|password|checkbox|radio|submit|reset|file|
hidden|image|button [CI]
This attribute specifies the type of control to create. The default value for
this attribute is "text".
name = cdata [CI]
This attribute assigns the control name.
value = cdata [CA]
This attribute specifies the initial value of the control. It is optional except
when the type attribute has the value "radio" or "checkbox".
size = cdata [CN]

This attribute tells the user agent the initial width of the control. The
width is given in pixels except when type attribute has the value "text"
or "password". In that case, its value refers to the (integer) number of
characters.
maxlength = number [CN]
When the type attribute has the value "text" or "password", this
attribute specifies the maximum number of characters the user may
enter. This number may exceed the specified size, in which case the
user agent should offer a scrolling mechanism. The default value for this
attribute is an unlimited number.
checked [CI]
When the type attribute has the value "radio" or "checkbox", this
boolean attribute specifies that the button is on. User agents must
ignore this attribute for other control types.
src = uri [CT]
When the type attribute has the value "image", this attribute specifies
the location of the image to be used to decorate the graphical submit
button.
Attributes defined elsewhere

id, class (document-wide identifiers)


lang (language information), dir (text direction)

title (element title)

style (inline style information)

alt (alternate text)

align (alignment)

accept (legal content types for a server)

readonly (read-only input controls)

disabled (disabled input controls)

tabindex (tabbing navigation)

accesskey (access keys)

usemap (client-side image maps)

ismap (server-side image maps)

onfocus, onblur, onselect, onchange, onclick, ondblclick, on


mousedown, onmouseup, onmouseover, onmousemove, onmouseou
t,onkeypress, onkeydown, onkeyup (intrinsic events)

17.4.1 Control types created with INPUT


The control type defined by the INPUT element depends on the value of
the type attribute:
text
Creates a single-line text input control.
password
Like "text", but the input text is rendered in such a way as to hide the
characters (e.g., a series of asterisks). This control type is often used for
sensitive input such as passwords. Note that the current value is the
text entered by the user, not the text rendered by the user agent.
Note. Application designers should note that this mechanism affords
only light security protection. Although the password is masked by
user agents from casual observers, it is transmitted to the server in
clear text, and may be read by anyone with low-level access to the
network.
checkbox
Creates a checkbox.
radio
Creates a radio button.
submit
Creates a submit button.
image
Creates a graphical submit button. The value of the src attribute
specifies the URI of the image that will decorate the button. For
accessibility reasons, authors should provide alternate text for the image
via the alt attribute.
When a pointing device is used to click on the image, the form is
submitted and the click coordinates passed to the server. The x value is
measured in pixels from the left of the image, and the y value
in pixels from the top of the image. The submitted data

includes name.x=x-value and name.y=y-value where "name" is the


value of the name attribute, and x-value and y-value are the x and y
coordinate values, respectively.
If the server takes different actions depending on the location clicked,
users of non-graphical browsers will be disadvantaged. For this reason,
authors should consider alternate approaches:

Use multiple submit buttons (each with its own image) in place of
a single graphical submit button. Authors may use style sheets to
control the positioning of these buttons.
Use a client-side image map together with scripting.

reset
Creates a reset button.
button
Creates a push button. User agents should use the value of
the value attribute as the button's label.
hidden
Creates a hidden control.
file
Creates a file select control. User agents may use the value of
the value attribute as the initial file name.

17.4.2 Examples of forms containing INPUT controls


The following sample HTML fragment defines a simple form that allows the
user to enter a first name, last name, email address, and gender. When the
submit button is activated, the form will be sent to the program specified by
the action attribute.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>

This form might be rendered as follows:

In the section on the LABEL element, we discuss marking up labels such as


"First name".
In this next example, the JavaScript function name verify is triggered when
the "onclick" event occurs:
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<FORM action="..." method="post">
<P>
<INPUT type="button" value="Click Me" onclick="verify()">
</FORM>
</BODY>

Please consult the section on intrinsic events for more information about
scripting and events.
The following example shows how the contents of a user-specified file may be
submitted with a form. The user is prompted for his or her name and a list of
file names whose contents should be submitted with the form. By specifying
the enctype value of "multipart/form-data", each file's contents will be
packaged for submission in a separate section of a multipart document.
<FORM action="http://server.dom/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="name_of_sender">
What files are you sending? <INPUT type="file" name="name_of_files">
</P>
</FORM>

You might also like