This is the basic construction of an html form:
<FORM> begin a form
<INPUT> ask for infromation in one of seferal different ways, buttons, text, selections.....
<INPUT> ...there can be as many input areas as you wish with many types of input.
</FORM> end a form
Data Formats
First we determine where the information is to be sent and how it is to be encoded. Later I will check out cgi scripts, for now I am going to use the mailto method to E-mail the data to myself and the ENCTYPE="application/x-www-form-urlencoded" method to encript the data. The alternative encription method would be ENCTYPE="text/plain"
Normally when mail is sent in this way, the browser that the user is using tacks on a default subject. Natscape attaches "Form posted from Mozilla". Others may say something like "Gates is the spawn of Satan!". To control what the browser adds as a subject you use: ?subject=Sent from Painter Productions" Here is the code:<FORM METHOD=POST ACTION="mailto:[email protected] ?subject=Sent from Painter Productions" ENCTYPE="application/x-www-form-urlencoded">
<INPUT>
<INPUT>
</FORM>
Text Boxs
The most common TYPE of form <INPUT> is "TEXT". <INPUT TYPE=TEXT>. Since every input needs a name, we will name this first "TEXT" box "Fred". The code and result look like this:
<INPUT TYPE=TEXT NAME="Fred">
If you enter the text "Good Old" the resulting mail will have a content that looks like this: Fred=Good+Old. To assign an initial value to the text box you do this; VALUE="CHERRY". This will cause "CHERRY" to come up in the text box when the page is loaded. It can then be changed by the user. If he does not change it then Fred=CHERRY will be the result of the mail.
Next, we can set the size of the text box with the SIZE command like this: SIZE=30. This produces a TEXT box 30 characters long. We can limit the number of characters that the user may enter with MAXLENGTH=10 . Even though the box is 30 characters long, the user can only enter 10 characters into it.
So here is an example of a TEXT box 30 characters wide called Fred, the default value is Cherry, and the max number of characters that can be entered is 10.<INPUT TYPE=TEXT NAME="Fred" VALUE="Cherry" SIZE=30 MAXLENGTH=10 >
Simular to the TEXT box is the "PASSWORD" box. It is exactly the same except when text is typed in, **** is echoed to the screen. All the same attributes apply and the TYPE=PASSWORD .
Here is an example 2 text boxes and a password box:
<FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE="application/x-www-form-urlencoded">
Enter your name please.
<INPUT TYPE=TEXT NAME="Name" VALUE="Name" SIZE=20 MAXLENGTH=25>
Enter your S.S.# please.
<INPUT TYPE=TEXT NAME="SS#" VALUE="###-##-####" SIZE=11 MAXLENGHT=11>
Enter your password please.
<INPUT TYPE=PASSWORD NAME="Password" VALUE="Password" SIZE=15 MAXLENGTH=15>
<INPUT TYPE=SUBMIT VALUE="Send!">
Radio Buttons allow you to choose one of several options. The format for a Radio Button is:
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE ="Jim" CHECKED> Jim Brown
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE ="Lief" > Lief Naroe
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE ="Erik" > Erik BrennerBreaking this down, we have:
Here is what it will look like:TYPE=RADIO indicates that it is a Radio Button.
NAME="BEST FRIEND" BEST FRIEND is the variable that will contain the VALUE of the selected Radio Button. There will almost always be more than one Radio Button. All Radio Buttons in a particular group should have the same NAME.
VALUE="Jim" If this button is selected, the VALUE of BEST FRIEND will be Jim.
CHECKED If CHECKED is present, then this box will be checked when the buttons are first displayed.
Jim Brown This is not part of the Radio Button itself. It is text that will appear next to the button.
The code that would be returned if Jim was selected would be a name/value pair: BEST FRIEND=Jim
Check boxs allow you to choose one or more options from a list. Here is an example, the code, and an explanation:
<FORM>
Which are women?<BR>
<INPUT TYPE=CHECKBOX NAME="FREIND PAM" VALUE=" YES" CHECKED> Pam <BR>
<INPUT TYPE=CHECKBOX NAME="FRIEND MARTY" VALUE=" YES"> Marty <BR>
<INPUT TYPE=CHECKBOX NAME="FRIEND SKIP" VALUE=" YES"> Skip <BR>
<INPUT TYPE=CHECKBOX NAME="FRIEND SUZAN" VALUE=" YES" CHECKED> Suzan <BR>
</FORM>TYPE=CHECKBOX indicates that this is a checkbox method of input.
NAME="FRIEND PAM" This is the name of the variable that represents this particular checkbox. Notice that each checkbox NAME starts with "FRIEND and ends with a different name. This is because each checkbox must have a different name, but you still need a way to group the results when you get them.
VALUE="YES" If the checkbox is checked, this is the VALUE that will be attached to the NAME and returned to you. If the checkbox is not selected, Nothing will be returned, Neither the NAME or the VALUE.
CHECKED If checked is present in the code, the checkbox will be checked when it is first presented on the screen.
Pam Some text that is next to the checkbox on the screen.
The returned info if Pam and Suzan are checked would be Pam=YES, Suzan=YES, nothing would be returned for Skip and Marty.
Pull Down Lists
With this you use <SELECT> instead of <INPUT>. Once again here is an example, the code for it, and an explanation.
<FORM>
Who is the tallest person?
<SELECT NAME="TALLEST PERSON ">
<OPTION VALUE="Skip ">Skip
<OPTION VALUE="Suzan " SELECTED> Suzan
<OPTION VALUE="Pam ">Pam
...
...
...
...
<OPTION VALUE="Tiny Tim ">Tiny Tim
</SELECT>
</FORM>SELECT -- Means that a selection will be made from a list.
NAME="TALLEST PERSON" -- This assigns TALLEST PERSON as the NAME of a variable.
OPTION -- Indicates that the following VALUE may be selected and stored in the variable TALLEST PERSON.
VALUE="Skip" -- Makes Skip the VALUE that will be sent if option Skip is selected.
Pam -- The names that will be presented in the list.
SELECTED -- Indicates what value will be showing in the list before it gets pulled down.
Scrolling Lists
If you add the SIZE=4 attribute to the SELECT tag, (<SELECT NAME=" TALLEST PERSON" SIZE=4) you will have a Scrolling List displaying 4 choices and the ability to scroll up and down for other choices. Everything else about it is the same as the Pull Down List.
Here is an example:
TEXTAREA
TEXTAREA gives you a box of whatever size you specify that the user can erter text into. Here is an example, the code and an explanation.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=10 COLS=40 WRAP=VIRTUAL>
\\|// (@ @) --------------oOO---(_)---OOo------------- : : : This is an example of putting text : : into a TEXTAREA as the page is loaded : : : ------------------------------------------
</TEXTAREA>
</FORM>TEXTAREA -- Indicates that this is a TEXTAREA for user input.NAME="COMMENTS" -- Asigns COMMENTS as the NAME for the variable to contain the user's input.
ROWS=10 -- Makes the TEXTAREA 10 rows long.
COLS=40 -- Makes the TEXTAREA 40 columns wide.
WRAP=VIRTUAL -- Makes the text in the boxs wrap back when it gets to the end of the box. The data sent in is one long string.
ORWRAP=PHYSICAL -- Text wraps in the box and is sent in that way too.
ORWRAP=OFF -- Text is not wrapped on the screen and is sent in exactly as it is written.
</TEXTAREA> -- Anything that is written between the opening and closing TEXAREA tags is displayed in the box as soon as the box is displayed.
HIDDEN input
HIDDEN input is text that is not seen by the user, but gets sent along with what ever the user sends. It can be usefull for indicating where in a site that a user sent a message from. It is also used by Mailto Formatter. It is how MTF recognizes the forms it's supposed to parse. Here is some example code and an explanation:
<INPUT TYPE=HIDDEN NAME="FORMNAME " VALUE="Catalog Page 3">
<INPUT TYPE=HIDDEN NAME="FORMNAME " VALUE="Catalog Page 4">
<INPUT TYPE=HIDDEN NAME="FORMNAME " VALUE="Catalog Page 16">
TYPE=HIDDEN -- Indicates that this is hidden text.
NAME="FORMNAME" -- This sets the name of the variable that will contain the text to the name of your choice.
" VALUE="Catalog Page 3" -- This sets the VALUE that will be applied to the variable specified by NAME, in this case FORMNAME.
RESET & SUBMIT
<FORM>
<INPUT TYPE=RESET>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=SUBMIT VALUE="Send it to ME!">
</FORM>The only explanation needed here is that if you include a VALUE, it will be used as the label for the button. If you do not specify a label, they will say Reset or Submit Query.
Examples of mail and the recieved text