|
All of the form controls I will be discussing use the input tag with a required type
attribute. The type attribute is required because it tells the browser what type of
from control you want to create at that point. Due to this I will describe each of
the form input controls in this lesson with the type required to create it.
<input type="button">
This tag is used to create a button that when
clicked will cause the browser to run a script function (probably JavaScript). This
input has a name and a value attribute. The value attribute tells the button what
function to use when it is clicked.
<input type="checkbox">
This tag creates a single checkbox. When the
form is submitted all of the on (checked) checkboxes submit values to the server.
This input has three attributes named checked, name and value. The checked attribute
is either present or not, if it is present the checkbox is checked by default, but it
can still be unchecked. The value attribute holds can be set to the value you would
like to have sent to the browser when that checkbox is checked. The default for value
is "on".
<input type="file">
This tag creates a file input box. These inputs
are used to allow the end-user to submit a file of a specified MIME type to the server.
This input has two attributes; accept and name. The accept attribute allows the
programmer to enter a list of comma-separated MIME types that the server will accept
the user to submit.
<input type="image">
This tag creates a simple submit button but allows
the programmer to provide an alternate image to act as the button. This element has
align, alt, name and src attributes. The align attribute accepts the values top,
middle or bottom which specify where the button should be placed in respect to its
surrounding text. The alt attribute is used to provide alternate text to be displayed
in case the image cannot be displayed for some reason. The src attribute accepts a URL
which tells the browser which image to use.
<input type="password">
This tag creates a text input which will not
show the actual characters entered into it, but rather asterisks or bullets typically.
This does not actually encrypt the data entered, but only prevents it from being read
by people that may catch a glimpse of the users monitor while they are entering it.
This element has maxlength, name, size, and value attributes. The maxlength attribute
allows the programmer to select the maximum number of characters to accept. The size
attribute specifies the length of the password textbox in number of characters to be
visible at any one time. The value attribute specifies the initial value of the
password textbox.
<input type="radio">
This tag creates a single radio button. To create
multiple radio buttons in a single group you repeat this input for as many items as you
have in that group and you assign each radio button the same name. When multiple radio
buttons appear in a single group, only one can be checked at any given time and all
others are unchecked. If you select one item from a group and another item was already
checked then the first one is automatically unchecked. This element has checked, name,
and value attributes. The value attribute specifies what value to send to the server if
that radio is selected when the form is submitted. The checked attribute is either
present or not present and works the same way as the checked attribute of the checkbox
works. It allows the programmer to specify a default selected radio.
<input type="reset">
This tag creates a button, which when clicked clears
the form and resets all inputs to their default values. This element has a value
attribute which accepts a text value to be displayed as the button label. The default
value is "Reset".
<input type="submit">
This tag creates a button, which when pressed sends
all of the forms values to the server for processing by the application which the
programmer specified in the form tag. This element has name and value attributes. The
value attribute accepts a text value to be displayed as the buttons label. The default
value is "Submit".
<input type="text">
This tag creates a simple textbox for accepting
strings of text from the user. This element has the same attributes as the password
element; maxlength, name, size and value. Please refer back to <input type="password">
for information on these attributes. Unlike the password input of course, this
input will allow you to see the actual character input into the textbox.
<option>
The option tag is used to describe each item within a select
element. This tag has label, selected and value attributes. The label attribute is
poorly supported so we will not discuss it here. The selected attribute accepts no
values and makes that item selected by default. The value attribute accepts a text
string that will be used in place of the contents of the option tag contents. The
option tags end tag is optional.
<select>
This element is used to display the options that we just went
over in a scrolling list format. You can list as many options as you want between the
opening and closing select tags. This element has multiple, name, and size attributes.
The multiple element accepts no value and specifies rather or not more than one options
can be selected at one time. The size attribute specifies the number of lines that
should be visible at one time. When multiple is not present the default size is 1.
When the size is set to 1 then the scrolling list becomes a dropdown menu.
<textarea>
This tag can be used to create larger textboxes then the
simple text control described a moment ago. The advantage of this element is that
the programmer gets to choose the number of columns and rows and rather or not the
textarea should allow word wrapping. The attributes of this element are cols, name,
rows and wrap. The cols attribute specifies the width of the textarea in number of
characters. The rows attribute specifies the number of rows tall the textarea should
be in number of characters. The wrap attribute accept off, virtual, and physical.
With the value of off there is no word wrapping. With the value of virtual the text
is wrapped across the textarea, but the line breaks are not sent to the server. With
the value of physical the text is wrapped and the line breaks are sent to the server.
Example:
Please look over the example and experiment with the different controls
on the formatted page. Feel free to reuse the code on the source page and make your own
controls.
View Source
View Formatted Page |
