| TEXT -
creates a single-line textbox of a length you choose. The following example is a textbox
with a MAXLENGTH of 10, so go ahead try and enter more than 10 characters in the output: First Name: <INPUT TYPE="TEXT" NAME="fname" SIZE="40" MAXLENGTH="10"> This is what the output will look like in your browser: First Name: A return data example would look as follows: fname=XXXXXXXXXX where X equals user input All possible attributes for this input would be: SIZE = Characters
shown. |
| PASSWORD
- this is identical to the TEXT option except that it responds to typed
letters with bullet or a similar scheme to keep the words from being read. A sample
password box could be the following: Enter Password: <INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25"> This is what the output will look like in your browser: Enter Password: A return data example would look as follows: password=XXXXXXXXXX where X equals user input All possible attributes for this input would be: SIZE = Characters
shown. |
CHECKBOX -
this value for TYPE will be used when there are two or more possible
answers for a given choice. You can also determine whether or not a checkbox will already
be checked, by using the attribute CHECKED. Note however that even though
you have different descriptions for each checkbox, the VALUE for each
checkbox in that group must be the same. Here's an example of adding checkboxes to a form:
This is what the output will look like in your browser: Type of computer(s) you own: Note however that if you wanted the buttons below each other and not next to each other, just add the <BR> tag at the end of each button definition. The user can choose one or all of the options. Their choices will be returned, meaning if they choose nothing, nothing will be returned. So in this case if all the options were selected, the following would would be an example of what the return data would look like:
All possible attributes for this input would be:
|
RADIO - like CHECKBOX,
RADIO is designed to offer the user choices from pre-determined options.
Unlike CHECKBOX, however, RADIO is designed to accept
only one response from among its options. RADIO requires that you use the
VALUE attribute, and that the NAME attribute be the same
for all of the <INPUT> tags that are intended for the same group. VALUE
on the other hand, should be different for each choice. For Check Boxes the NAME
changes and the VALUE stays the same and with Radio Buttons, the VALUE
changes but the NAME stays the same. Look at the following example:
This is what the output will look like in your browser: What type of Web browser do you use most often? Note however that if you wanted the buttons below each other and not next to each other, just add the <BR> tag at the end of each button definition. Depending on the option selected, the return data example would look as follows: browser=N or browser=I or browser=W All possible attributes for this input would be:
|
| HIDDEN
- This input type allows the designer to place fields in his form which can not be seen by
the user. In other words it does not show on the form. This is mostly used if you have to
send default information with your form, which you don't want the user to change. An
example would be, if you had more than one form on your Web page, you would define a
hidden input for each form specifying a unique name for each form, that way one can figure
out which form the user submitted. Look at the following example: <INPUT TYPE="HIDDEN" NAME="hidden1" VALUE="address form"> This is what the output will look like in your browser (Note you are suppose to see nothing):
A return data example would look as follows: hidden1=address form All possible attributes for this input would be: NAME = Name of
the field. |
| RESET -
creates a push button, named with the VALUE attribute, that resets all of
the elements in that particular form (being all the inputs between the <FORM></FORM> tags) to their default
values, erasing anything that the user has entered. An example would be the following,
note however if you do not specify the VALUE attribute, the button will
read Reset: <INPUT TYPE="RESET" NAME="button1" VALUE="Reset the Form"> This is what the output will look like in your browser:
All possible attributes for this input would be: NAME = Name of
the button. |
| SUBMIT - the
only purpose of the SUBMIT type is to send off all the other form
information that had been entered by the user to the Web server or execute the action
specified within the ACTION attribute. A submit button is simply a button
that, once clicked, starts the action mentioned in the above section, either being: send
the content of the form to the CGI program or perform the action specified, for example, MAILTO:.
And this is how you define it, note however if you do not specify the VALUE
attribute, the button will read Submit: <INPUT TYPE="SUBMIT" NAME="button2" VALUE="Send it in"> This is what the output will look like in your browser:
All possible attributes for this input would be: NAME = Name of
the button. You can also make a simple button that just takes the user to another page or URL. To accomplish this you leave out the METHOD attribute and only define the ACTION attribute when defining the form. The ACTION attribute's value will be a URL or HTML file name, the user will be taken to the page specified when clicking on submit button. Consider the following:
This is what the output will look like in your browser, to come back to this page when you've finished looking at the result, click the Back button of your browser: |
| IMAGE
- You can make an image a submit button, and this is how you define it: <INPUT TYPE="IMAGE" SRC="button.gif" NAME="ibutton" WIDTH="94" HEIGHT="26" ALT="Submit Form" BORDER="0"> Note that the IMAGE input type is, by default a SUBMIT button only. You can't make a RESET image button. This is what the output will look like in your browser:
All possible attributes for this input would be:
|
| FILE
- With the File Upload input your visitors can send you a file right off their hard drive.
When using this input type, you must set ENCTYPE equal to multipart/form-data
in your <FORM></FORM> tags. Also be aware that the occasional older browser doesn't
support this type of input and that when this input is used in a MAILTO:
form, the results can sometimes be unpredictable. Take note however that this input type
does not actually upload the file to the server, all it does is point to the directory of
where the file to be uploaded can be found on the users' computer. This is how you will
define it: <INPUT TYPE="FILE" NAME="upload"> This is what the output will look like in your browser: Once the user clicks on the browse button and is using any version of Windows, the following window will pop up:
With this window the user will select the file they want to use for whatever purpose. The directory structure of the selected file with the file name will be displayed in the text field next to the browse button once the user selects the Open button of the Choose file window. All possible attributes for this input would be: NAME = Name of the field. |
