<input>
Available in versions: 2.0, 3.2, 4.0
The <input> tag is used to create individual form controls (fields).
Control is a technical term which refers to the various elements (buttons, check boxes,
radio buttons, text areas) that can be used inside a form to gather information.
The four tags that can be used to build a form are:
button
input
select
textarea
The form is the heart of an e-commerce page and the input tag
is the heart of a form.
There are ten types of form controls that can be created using the input tag.
Appropriately, you must use the type attribute to determine the specific type
of the control (field).
The types are:
button
checkbox
file
hidden
image
password
radio
reset
submit
text
Any number of input tags can be placed anywhere between a pair of opening and closing
form tags to create the desired appearance of the form.
There is no closing tag.
Core Attributes
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
Attributes
accept
The accept attribute is used with the type="file" control to specify
what kind of files (including the path) that can be attached to the form.
It is a comma-delimited list. For example: accept="images/*.gif"
accesskey
The accesskey attribute allows you to designate a key on the keyboard that when pressed,
along with the alt or meta key, will bring focus to the input form element.
This attribute is poorly supported.
align deprecated 4.0
The align attribute is used with a type="image" control to place the image
with respect to any surrounding text.
The permitted values are bottom, left. middle, right, and top.
This attribute is deprecated effective with version 4.0.
However, most browsers continue to recognize this attribute.
You are now to use style sheets.
alt
The alt attribute displays an alternative text for browsers that cannot display
an image.
checked
The checked attribute is a Boolean value that, if present, allows a checkbox
or radio button to be preselected (and have a preselected value).
disabled
The disabled attribute is a Boolean value that, if present, prevents the form
control (field) from functioning.
In some browsers, the control (field) will appear to be greyed out.
ismap
The ismap attribute is a Boolean value that, when present, signifies that the image
is being used as a mouse-clickable server-side image map.
maxlength
The maxlength attribute sets the maximum number of characters that can be
entered into a one-line text window.
name
The name attribute is a string of characters that is used to label a
form control (field) with a name.
The name must be unique to that document and cannot be reused.
onblur
The onblur attribute is an event that allows the execution of JavaScript code
when an element loses focus (for example, the mouse was clicked onto another
element or a tab navigation directed the cursor elsewhere).
onchange
The onchange attribute is an event that allows the execution of JavaScript code
when the form control (field) has been changed and loses focus.
onfocus
The onfocus attribute is an event that allows the execution of JavaScript code
when an element comes into focus (for example, the mouse was clicked onto the
element or a tab navigation brought the cursor to the element).
onselect
The onselect attribute is an event that allows the execution of JavaScript code
when the form control (field) gains focus.
readonly
The readonly attribute allows you to display a value in a form
control (field) that cannot be changed by the user.
size
The size attribute sets the width of a one-line text window by defining how
many characters can fit in the window.
src
The src attribute is the URL address or directory/file (path/name) where
an image file is being stored.
tabindex
The tabindex attribute specifies an integer that defines the rank in the tabbing
order for the specified element when you use the keyboard to navigate (tab through) a page.
This attribute is poorly supported.
type
The type attribute determines the specific control.
Note that by using style sheets you can effect the appearance of the various
types of controls.
However, the exact appearance will be browser dependent.
type="button"
The type="button" control creates a rectangular button that can be clicked when you
wish a desired action to occur.
For example, you could use buttons to navigate through a recordset data source being displayed
on a web page.
(See the RDS objects in the ADO Quick Reference.)
If you want to reset or submit the form, you should use the type="reset"
and type="submit" controls.
A value for the name attribute is required.
You can use the value attribute to assign a text that will be displayed
on the face of the button.
The default color is gray, but that can be changed.
The text displayed on the button will set the minimum size,
but you can set a different size using style sheets or the size attribute.
Code:
<input type="button" name="btn1" value="click me">
Output:
type="checkbox"
The type="checkbox" control creates a small, square button that can be selected or
unselected by the user with a click of the mouse.
When the checkbox is selected, a check mark appears within the box.
A value for the name attribute is required.
You must use the value attribute to assign a value that is associated
with the checkbox.
You can also use the checked attribute to precheck the checkbox.
When the checkbox has been selected, the value is saved as part of the form
information that is passed to the appropriate file and/or database
when the form is submitted.
However, the value for any unselected checkbox is not saved or passed.
Code:
<input type="checkbox" name="ckbx1" value="true">
Output:
type="file"
The type="file" control is used to attach a file to a form.
When the form is submitted, the file is passed along with all the other
contents of the form.
This control displays an input window and a browse button.
By clicking on the browse button, you can search your directories for the desired file.
When you find it, a double mouse click will select the file.
Alternately, you can enter the path and name of the file into the input window.
A value for the name attribute is required.
You do not use the value attribute.
To use the type="file", you must set both the enctype and method
attributes of the form tag exactly as shown in the following code snippet.
Code:
<form method="post" enctype="multipart/form-data" action="next.asp">
...
<input type="file" name="file1">
Output:
type="hidden"
The type="hidden" control is used to add content to the form that cannot be
viewed or changed by the user.
When the form is submitted, the hidden content is passed along with all the other
contents of the form.
The hidden content is essentialy a name/value pair.
You must provide a name using the name attribute.
You also must provide a value.
This value can be any textual or numeric information.
Code:
<input type="hidden" name="SocSecNum" value="123-45-6789">
type="image"
The type="image" control allows you to use a graphic image or a picture as the
equivalent of a type="submit" button.
For example, you could create your own submit gif.
Indeed, the specified image will perform exactly as a submit button, when you click the image,
the form is submitted.
The type="image" also allows you to display a mouse-sensitive image map within a form.
(This requires that the browser be able to capture and process the X/Y coordinates of the mouse.)
You must use the src attribute to list the location of the image file.
You can use the alt attribute to provide text for browsers that cannot display
an image.
Some browsers, by default, place a border around the image.
Code:
<input type="image" name="submitgif"
src="images/submit.gif" onclick="submit()" border="0">
Output:
type="password"
The type="password" control displays a one line input window which is used to
collect a password as a masked text.
A masked text means that when the user types in the password,
the actual characters being typed do not appear in the window.
Rather an asteric * is displayed in place of each character in the password.
You can use a type="text" control to gather the user name.
The default window size is browser dependent and is usually 20-30 characters in length.
However, you can set the size using style sheets or the size attribute.
The maxlength attribute can be used to set the maximum number of characters
that will be accepted by the control (field).
This is only a semi-secure method for gathering a password.
While the password is not visible on screen, when the form is submitted,
the password is passed unencrypted as part of the contents of the form.
Code:
<input type="password">
Output:
type="radio"
The type="radio" control is used to create a small round circular button with a white center
that can be selected or unselected by the user with a click of the mouse.
When the radio button is selected, a black dot appears in the center of the circle.
The concept is to present the user with a selection of choices, but only to allow one choice
to be made, for example, picking the color of a tee-shirt being ordered on a web site from a selection of
twelve different colors.
Each related group of radio buttons must have the same name.
Further, each radio button in a related group must have a different value.
When a specific radio button is selected, only the value for the selected button
is passed as part of the contents of the form upon submission.
The values for the unselected radio buttons are not passed.
You cannot change the size or color of a radio button.
You can use the checked attribute to preselect one of the radio buttons.
Code:
<input type="radio" name="radio1" value="one" checked>
<input type="radio" name="radio1" value="two">
<input type="radio" name="radio1" value="three">
<input type="radio" name="radio1" value="four">
Output:
type="reset"
The type="reset" control creates a rectangular button that can be clicked when the
user wants to clear all of the fields in a form.
The form is redisplayed in its original presentation.
By default the reset button is a gray color and has the text "Reset" displayed inside the button.
However, you can change the color using style sheets and you can use the value button
to provide a different text for the button.
The text displayed on the button will set the minimum size,
but you can set a different size using style sheets or the size attribute.
A name is not required, but it is becoming a very common coding practice
to give a unique name to every control (field) in a form.
Code:
<input type="reset" value="Clear The Form"
name="reset1">
Output:
type="submit"
The type="submit" control creates a rectangular button that can be clicked when the
user wants to submit the contents of a form for processing.
A form can be submitted to the same page or to another URL.
This is set inside the form tag by using the action attribute.
However, if it is important that certain contents of the form be filled out correctly,
then you could use the onclick core attribute in the submit button to direct
the submission to a JavaScript function that proofs the contents.
Alternatively, you could use an onsubmit attribute inside the form tag to direct
the submission to the JavaScript function.
This is called client-side form verification.
By default the submit button is a gray color and has the text "Submit Query"
displayed inside the button.
However, you can change the color using style sheets and you can use the value button
to provide a different text for the button.
The text displayed on the button will determine the minimum size,
but you can set a different size using style sheets or the size attribute.
A name is not required, but it is becoming a very common coding practice
to give a unique name to every control in a form.
If you assign a value, when the form is submitted, that value will be
passed as part of the contents.
Code:
<input type="submit" name="submit" onclick="submitform()"
value="Submit">
Output:
type="text"
The type="text" control displays a one-line text input window into which the
user can type the requested information (such as an address or phone number).
If the requested information will require more than one line to enter,
you should use a textarea tag rather than a type="text" control.
The default window size is browser dependent and is usually 20-30 characters in length.
It is strongly recommended that you set the size of a text window rather than using
the default.
This will allow you to effect the appearance of the form in a pleasing and
useful manner.
Further, the appearance of the form will be fairly independent of the browser
being used.
The default window size is browser dependent and is usually 20-30 characters in length.
However, you can set the size using style sheets or the size attribute.
The maxlength attribute can be used to set the maximum number of characters
that will be accepted by the control (field).
You can use the value attribute to display a text inside the window,
but this is optional.
Code:
<input type="text" name="text1" size="50">
Output:
value
The value attribute assigns an initial value, such as a text or number,
to a form control (field).
This can be changed later using script code.
usemap
The usemap attribute is a Boolean value that, when present, signifies that the
image is being used as a mouse-clickable client-side image map.
Code:
MY SAMPLE FORM:
<p>
<form method="post" enctype="multipart/form-data" action="next.asp">
<input type="button" name="btn2" value="click me" style="background-color:yellow;"> Button
<p>
<input type="checkbox" name="ckbx2" value="true"> Check Box
<p>
<input type="file" name="file2"> Attach a File
<p>
<input type="hidden" name="SocSecNum" value="123-45-6789">
<p>
<input type="password"> Password
<p>
<input type="radio" name="radio2" value="one" checked> First Radio Button
<br>
<input type="radio" name="radio2" value="two"> Second Radio Button
<br>
<input type="radio" name="radio2" value="three"> Third Radio Button
<br>
<input type="radio" name="radio2" value="four"> Forth Radio Button
<p>
<input type="text" name="submit" name="text2" size="50"> Text
<br>
<input type="text" name="submit" name="text3" size="25"> Text
<br>
<input type="text" name="submit" name="text4" size="2"> Text
<p>
<input type="reset" value="Clear The Form" style="color:white; background-color:blue;"> Reset Button
<br>
<input type="submit" name="submit" name="submit2" onclick="submitform()"
value="Submit" style="color:white; background-color:red;">
Submit Button Or Use An Image Submit Button
<input type="image" src="images/submit.gif" onclick="submitform()" name="submitgif"> border="0"
</form>
<script language="JavaScript">
function submitform()
{ alert("Thank You For Submitting The Form") }
</script>
Output:
MY SAMPLE FORM:
Copyright 2000 by Infinite Software
Solutions, Inc.
Trademark Information
|