Forms "can" be more complicated than about anything else I've gone
over, depending on what you want to accomplish. However, since PayPal and other basic auction or payment sites use
forms for their buttons I figured it would be important to touch on. I'd
first like to say that most forms require a back end script that tells them what
to do. In PayPal's case they tell the button what to do, who to pay, and
how to add information and process and order. If you are using a form on
your own for other purposes (other than PayPal) you are most likely going to
have to know the script you're running behind it to make it work. (i.e.
send you an email, print information, post information somewhere, etc.) I am
simply going to cover the basics of forms and different things you can add to
forms..
The first, and most important thing to remember about forms is they all need
to start with a <form> tag and end with a </form> tag. This
means that everything that the form is doing, or someone is entering should go
between these two tags. This includes product information, personal
information, and any other information that is going to be submitted with the
form. It is also important to remember that a form must end before a subsequent
form can be initialized. Not having the end form tag (</form>) in
the correct place can cause forms following it to not function properly, or in
some cases at all.
Tag/Command
Description
Preview/Example
<form></form>
This starts and ends each form.
There is no preview as the viewer will not see this command.
target=
This tells the form where to
post. In PayPal's case you most likely want it to be in a new
window. Example: <form target="paypal">.
Depending on your form you may not need this command, or you may need to
direct it accordingly.
name=
This is what the section or
portion of the form is named. This should correspond to the feature
within the script that you are obtaining information. For a list of
some of the PayPal functions and names please take a moment to look at the
buttons page under options. The example I have provided is for PayPal's
amount field. name="amount"
action=
This tells the form what to
do, or where to pull the script that is making it function. This is
generally the web address of your CGI program.
<select>
<option value="">text
</select>
This is a select or drop down
menu/box. You can list as many options as you'd like and then the
customer/viewer chooses their particular choice and that is what will be
passed when the form is submitted. What is in the "" in the
value is what will be passed. The text outside the box is what the
customer will see.
Example:
<select name="amount">
<option value="10.00">Size Small
<option value="12.00">Size Medium
<option value="15.00">Size Large
</select>
In the example above you will not see what size they actually ordered,
but you should be able to tell by the price what size they chose. So
what is passed, and what the customer sees may not be the same thing, but
as long as you know what it is referring to you should be fine.
Size:
<input
type="">
Input types can be one of two
things. They can be hidden, radio, text, or checkbox. An example
would look something like this: <input type="text">
<input
type="hidden">
This is something your
customers/viewers will never see. This is a variable that is,
as it's name implies, hidden. These can be used in forms in order to call
certain commands. In PayPal's case there is a command function. It
is required to be in each button, but the customer will never see
it. The example I have provided is used for the PayPal Shopping
Cart.
This determines how many
characters can be entered into a box. This can be practical for many
things depending on what you want your customers to provide. If you
are looking for a three digit prefix you can set the parameters
to only allow the customer to enter three characters, regardless of
how much room is shown.
<input type="text" maxlength=3>.
In use your box would only allow 3 characters and look like: (Type in the box to test this. You will only be allowed to enter
three characters)
size=
This can determine the size
of a text box. If you only want the size to be 5 pixels long then you
would simply type it as:
<input type="text" size=5>
<input
type="checkbox">
This is a checkbox.
This will allow your customers to choose a variety of options. With
PayPal you can only pass one variable, but with many forms this allows
your customers/viewers to make multiple selections.
Example:
<input
type="checkbox" name="on0" value="Yes
Newsletter">Yes, I would like a Newsletter
<input type="checkbox'
name="on0" value="No Newsletter">No, I would not
like a Newsletter
Yes, I would like a Newsletter
No, I would not like a Newsletter
<input
type="radio">
This is a radio button.
This will allow your customer/viewer to choose one selection. Each
of the selection in a field should all have the same name. If the
names are different they will be able to choose multiple lines.
What type of cheese do you like best?
Cheddar
Swiss
Gouda
Blue
<textarea rows=5 cols=15>
</textarea>
This is for a comments or
text area box.
cols
This determines how many
columns you are allowing in a text area box.
<textarea rows="2" cols="15">
Text or Comments would go here
</textarea>
rows
This determines how many rows
you would like to take up. The example above uses 2 rows to display
the text area in.
submit
This is a command to send or
submit a form. This is where you generally tell your form what to
do.
<input type="submit" value="Send">
reset
This command allows your
customer/viewer to erase everything in the form so that they can start
over.
<input type="reset" value="Reset">
Below I have shown a generic form that will send an email in plain
text. This should how you a form in action. To test this
simply replace the youremail@doman.com with your email address. You
can then send yourself an email to test the form.
