Forms
HTML Lab 7
Getting Input from the User
Forms are a way for users to give input to a web page. The information will be sent to you via email using the mailto action of a form. There are conflicts between the mailto action and some email programs. Therefore mailto is not the most desirable way to collect information from your visitors. Forms are intended to be used to send information to the programs residing on the server that contains your web pages. This is in the realm of CGI programming. For now, we will use mailto as a way of getting the information. At the end of this lesson, we will discuss another way you can send the information to yourself if you are having trouble using the mailto action.
To see some examples of form inputs, click here. Let's try making our own form!
NOTE:
See where it says you@address in the example below? You should replace that with your email address.
In HTML mode, type the following into the Editor below:
<html>
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="mailto:you@address" enctype="text/plain">
What is your favorite color?
<input type=text name=favorite>
<br><br>
<input type=submit value="submit">
</form>
</body>
|
Click PREVIEW. Type your favorite color into your form, then go check your e-mail. You should see a message that contains the information you just typed into the form. If you cannot email the information to yourself because of a conflict with your mail program, check out the information at the end of this lesson.
<form> is used to create a form. The method attribute is used within the form tag to specify how information is sent to the program invoked by submitting the form. There are two possible values for this attribute -- get or post. For now, you do not need to know the difference between the two values. Just remember that as long as you are submitting the form to an email program, you will always use post.
The action attribute declares where the information should be sent. As discussed before, the mailto action is used to send information to your e-mail address, which follows mailto:.
The enctype attribute specifies how the information entered in the form will be encoded so that it is easier to read when you receive it. Try deleting this attribute and mail the form to yourself again so that you can see the difference this attribute makes.
Once the form has been defined, the next step is to create some inputs so that information can be entered. <input> is one of the most commonly used tags to accomplish this. The type attribute determines the specific sort of form element to be created.
In the first input tag, type is set equal to text. This will place a single line text field on the page. The text field is given a name. Although the name is not displayed on the web page, it is important to include it because the name will be paired with the information in your email.
In the second input tag, type is set equal to <submit>. This will place a button on the web page. When the button is clicked, the form is submitted, which means that the action specified for the form is invoked. In other words, the information is emailed to you! You can specify a value for the submit button so that you can display whatever text you want on it. Try changing the value to see the effect!
You can create many types of inputs, some which use the input tag and some that do not. Let's take a closer look!
Checkboxes
Checkboxes allow you to select one or more items in a list.
In HTML mode, type the following into the Editor below:
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="mailto:you@address">
Check which traits best describe you:
<input type=checkbox name=trait value=funny>funny
<input type=checkbox name=trait value=smart>smart
<input type=checkbox name=trait value=wealthy>wealthy
<br><br>
<input type=submit value="submit">
</form>
</body>
|
Click PREVIEW. Notice that the name of each checkbox is the same. This is not necessary, although it does make the information a bit easier to read when it is mailed to you.
Radio Buttons
Radio buttons are a lot like checkboxes except that you can only select one item from a list.
In HTML mode, type the following into the Editor below:
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="mailto:you@address">
What is your favorite color?
<input type=radio name=color value=red>RED
<input type=radio name=color value=green>GREEN
<input type=radio name=color value=blue>BLUE
<br><br>
<input type=submit value="submit">
</form>
<body>
|
Click PREVIEW. Just like in the above example, the name of each radio button is the same. A set of radio buttons consists of multiple radio buttons that all have the same name attribute. Only one button in a set can be selected at a time, so be sure to give the same name to each button in the set.
Select Box
A select box displays a drop-down menu from which you can select an item.
In HTML mode, type the following into the Editor below:
<html>>
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="mailto:you@address">
Select your gender:
<select name=gender>
<option> Male
<option> Female
<option> Other
</select>
<br><br>
<input type=submit value=submit>
</form>
</body>
</html>
|
Click PREVIEW. The option tag is used inside the select tag to specify an option in the list.
Textarea
A textarea defines a multiline text field.
In HTML mode, type the following into the Editor below:
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="mailto:you@address">
Tell me what you think of my web page:
<textarea name=textarea rows=12 cols=38>
</textarea>
<br>
<br>
<input type=submit value="submit">
</form>
</body>>
|
Click PREVIEW. The rows and cols attributes are used to define the size of the textarea.
If the mailto action is not working...
...you can use the following code to send the form to yourself.
In HTML mode, type the following into the Editor below:
<head>
<title>
Forms
</title>
</head>
<body>
<form method=post action="http://www.useractive.com/learn/sendform.pl">
<input type=hidden name=recipient value=you@address>
<input type=hidden name=email value=you@address>
<input type=hidden name=subject value="form test">
Tell me what you think of my web page:
<textarea name=textarea rows=12 cols=38>
</textarea>
<br>
<br>
<input type=submit value="submit">
</form>
</body>
|
Click PREVIEW and try sending the form to yourself.
NOTE:
In order for this method to work, you must use the email address you gave when you registered for the class.
Notice that we used hidden input elements here. A hidden input element is an invisible element whose main purpose is to store data that the user does not enter. In this case we stored information about where the email should be sent and what the subject of the email should be. This data gets sent to the CGI program that is specified in the action attribute of the form tag. If this is confusing, don't worry! This code is only provided so that you can send forms to yourself if you are having trouble with the mailto action. Again, you will learn more about this subject if you go on to study CGI programming.
Be sure to experiment with the forms and email them to yourself so that you can see the how the information looks in when it is sent.
Copyright © 1997-2001 Useractive, Inc.
Useractive is a registered trademark of Useractive, Inc.
All rights reserved.
|