•Forms are a vital tool for the webmaster to
receive information from the web surfer, such as: their name, email address,
credit card, etc. A form will take input from the viewer and depending on your
needs, you may store that data into a file, place an order, gather user
statistics, register the person to your web forum, or maybe subscribe them to
your weekly newsletter.
Text Fields
•Before
we teach you how to make a complete form, let's start out with the basics of
forms. Input fields are going to be the KEY THINGS on your form's needs. The
<input> has a few attributes that you should be aware of:-
–type - Determines what kind of input field it will be. Possible
choices are text, submit, and password.
–name - Assigns a name to the given field so that you may reference
it later.
–size - Sets the horizontal width of the field. The unit of
measurement is in blank spaces.
–maxlength - Dictates the maximum number of characters that can be
entered.
•Example of html code for input forms
<form method="post"
action="mailto:youremail@email.com">
Name: <input type="text"
size="10" maxlength="40" name="name">
<br
/> Password: <input type="password" size="10" maxlength="10"
name="password">
</form>
</form>
HTML Form Email
•Now we will add the submit functionality to
your form. Generally, the button should be the last item of your form and have
its name attribute set to "Send" or
"Submit". Name defines what the label of the button will
be. Here is a list of important attributes of the submit:
•In addition to adding the submit button, we
must also add a destination for this information and specify how we want it to
travel to that place. Adding the following attributes to your <form> will
do just this.
•method - We will only be using the post
functionality of method, which sends the data without displaying any of the
information to the visitor.
•action - Specifies the URL to send the data to. We
will be sending our information to a fake email address.
HTML Code:
•<form method="post"
action="mailto:youremail@email.com">
•Name: <input type="text"
size="10" maxlength="40" name="name">
<br
/>
•Password: <input type="password"
size="10"
•maxlength="10"
name="password"><br />
<input type="submit" value="Send">
<input type="submit" value="Send">
•</form>
•HTML Radio Buttons
–Radio buttons are a popular form
of interaction. You may have seen them on quizzes, questionnaires, and other
web sites that give the user a multiple choice question. Below are a couple
attributes you should know that relate to the radio button.
•value - specifies what will be sent if
the user chooses this radio button. Only one value will be sent for a given
group of radio buttons (see name for
more information).
•name - defines which set of radio
buttons that it is a part of. Below we have 2 groups: shade and size.
•Example of HTML code for radio button
<form method="post"
action="mailto:youremail@email.com">
What
kind of shirt are you wearing? <br />
Shade:
<input type="radio" name="shade" value="dark">Dark <input type="radio" name="shade" value="light">Light <br />
<input type="radio" name="shade" value="dark">Dark <input type="radio" name="shade" value="light">Light <br />
Size:
<input type="radio" name="size" value="small">Small <input type="radio" name="size" value="medium">Medium <input type="radio" name="size" value="large">Large <br /> <input type="submit" value="Email Myself">
<input type="radio" name="size" value="small">Small <input type="radio" name="size" value="medium">Medium <input type="radio" name="size" value="large">Large <br /> <input type="submit" value="Email Myself">
</form>
•Check
boxes allow for multiple items to be selected for a certain group of choices.
The check box's name and value attributes behave the
same as a radio button.
–Example of HTML code for check box
–HTML Code:
–<form method="post"
action="mailto:youremail@email.com"> Select your favorite cartoon
characters.
<input type="checkbox" name="toon"
value="Goofy">Goofy <input type="checkbox"
name="toon"
value="Donald">Donald <input type="checkbox"
name="toon"
value="Bugs">Bugs Bunny <input type="checkbox"
name="toon" value="Scoob">Scooby Doo <input
type="submit" value="Email Myself">
</form>
HTML Drop Down Lists
•Drop
down menues are
created with the <select> and <option> tags. <select> is the
list itself and each <option> is an available choice for the user.
–Example of HTML code for drop down lists
–<form method="post"
action="mailto:youremail@email.com"> College Degree?
–<select name="degree">
–<option>Choose One</option>
–<option>Some High School</option>
–<option>High School
Degree</option>
–<option>Some College</option>
–<option>Bachelor's Degree</option>
–<option>Doctorate</option>
–<input type="submit"
value="Email Yourself">
–</select>
–</form>
