The first step in audience participation is letting your visitors email you. This is a very small-scale type of interaction, because it's exclusively between two people (you and one visitor) and the conversation is private. Later on in the chapter you'll see how to expand the discussion to include a whole gaggle of surfers.
Unlike the standard-issue hyperlinks you learned about back in Chapter 8, there's one special type of link that you haven't seen yetthe mail-to link. This link automatically starts an email message when clicked. It's still up to the Web surfer to send the message, but you can supply some boilerplate subject and body text.
To create a mail-to link, you supply a path that starts with the word mailto , followed by a colon (:) and the email address. Here's an example:
<a href="mailto:email@example.com">Email Me</a>
Most browsers also let you supply some text for the subject and body of the email message, which the Web visitor can then edit as she sees fit. To do this, you need to use a slightly wonky syntax that follows these rules:
After the email address, put a question mark.
To declare the subject, add "subject=" followed by the subject text.
If you also want to define some body text, add the character sequence "&" after the subject text. Then, begin the body by writing "body=" followed by the body text.
Replace every space in the subject and body text with the character sequence "%20". This gets quite tedious and makes the message hard for you to read as you're composing it, but it's required in order for this trick to work with all browsers.
Confused? The easiest way to grasp these rules is to take a look at a couple of examples. First, here's a mail-to link that includes the subject text "Automatic Email":
<a href="mailto:firstname.lastname@example.org?subject=Automatic%20Email"> Email Me</a>
And here's a link that includes both subject text and body text:
<a href= "mailto:me@myplace. com?subject=Automatic%20Email&body=I%20love%20your%20site"> Email Me</a>
When you click this link, you'll see an email pop up like the one shown in Figure 12-1.
HTML forms is a corner of the HTML standard you haven't explored yet. It defines tags that you can use to create graphical widgets (like text boxes, buttons , checkboxes, and lists). Visitors can interact with these widgets, which are commonly called controls . Figure 12-2 shows an example of an HTML form in action
HTML forms are an indispensable technology for many Web sites, but you probably won't get much mileage out of them. The problem is that HTML forms are best suited for high- powered Web applications, not the static Web sites you're creating.
For example, consider the account creation form shown in Figure 12-2. Once you, the visitor, fill out all the details and click the Submit button at the bottom, the browser does something specialit collects the information you've entered and the selections you've made in every control, and patches it together into one long piece of text. Then, it sends a request back to the server with all this information. That's where the Web application comes in. It examines the submitted data, chews through it, and then carries out some sort of action. This action might involve sending back another page with different HTML (for example, if the application detects an error), or storing the information in a database on the Web server.
Forms are the basic building block of highly dynamic Web sites. If you're not a Web programmer, you probably won't use forms all that often. However, you can still use forms as a basic way to collect information. To do this, you configure your forms to send an email message at the moment that they're submitted. In other words, when someone clicks the Submit button on the form, the collected data isn't sent to a programinstead, it's mailed to you as an email message. You'll need to sift through the emails yourself (which can be a major chore if you're receiving hundreds of messages a day). However, you've opened up a valuable channel for feedback.
Every HTML form starts out with a <form> tag. The <form> tag is a container tag (Section 2.2.2), and everything inside is automatically deemed to be part of your form.
Form tags are also block elements (Section 5.2), which means when you start a form, the browser adds a little bit of spacing and starts you off on a new line.
What goes inside your form tag? Ordinary HTML content (like text) can go inside a form tag, or it can go outsideit really doesn't matter. However, controls (those graphical widgets like buttons, text boxes, and lists) should always go inside a form tag. Otherwise, you won't have any way to capture the information that visitors enter into these controls.
| POWER USERS' CLINIC |
Becoming a Programmer
Want to unleash forms throughout your site and become a hard- core programmer? It's not easy going, but it can open up a lot of options for a stylin' site. The first task is to choose the programming framework you want to use. Here are some options:
To create controls, you use yet another set of HTML tags. Here's the weird part most form controls use the exact same tag. That tag is named <input>, and it represents information that you want to get from the visitor. You choose the type of input control by using the type attribute. For example, to create a checkbox, you use the checkbox type:
To create a text box, you use the text type:
To create a complete form, you just mix and match <input> tags with ordinary HTML:
<html> <head> <title>A Form-idable Test</title> </head> <body> <form> First Name: <input type="text"><br> Last Name: <input type="text"><br> Email Address: <input type="text"><br> <br> <input type="checkbox">Add me to your mailing list </form> </body> </html>
Figure 12-3 shows the page this creates.
Every <input> tag also supports the value attribute, which is usually used to set the initial state (setting) of the control. For example, if you want to put some text inside a textbox when the page first appears, you could use this tag:
<input type="text" value="<Enter the first name here>" >
Checkboxes are a little different. You can start them off so that they're turned on by adding the checked attribute, as shown here:
<input type="checkbox" checked >
Not all controls use the <input> tag. In fact, there are two notable exceptions. The <textarea> tag is used to grab large amounts of text that span more than one line (don't ask why a new tag was used for this purposeit's largely for historical reasons). The <option> tag is used to create a list (inside of which the surfer can select an item). Table 12-1 lists all of the most common controls.
Shows a textbox where the visitor can type in any text. If you use the password type, the text isn't displayed in the browser. Instead, surfers see an asterisk (*) appear in the place of each letter, hiding it from prying eyes.
Shows a large textbox that can fit multiple lines of text.
Shows a checkbox that can be turned on or off.
Shows a radio button (a circle that can be turned on or off). Usually, you'll have a group of radio buttons next to each other, in which case the visitor can select only one.
<input type="submit"> <input type="reset">
Shows the standard clickable button. A submit button always gathers up the form data and sends it to its destination. A reset button simply clears the visitor's selections and text in all the input controls of the form.
Shows a list where your visitor can select one or more items. Each item in the list is represented by an <option> tag.
Right now, the only problem with the form in Figure 12-3 is that it doesn't actually do anything. You need a way for the visitor to send the form to you. In order to make this happen, you need to take two steps. First, you need to add a submit button. Use the value attribute to set the text that appears inside this button.
<input type="submit" value="OK">
Next, you need to modify the <form> tag so that it uses a mailto link to identify the email address where the form data should be sent:
<form action="mailto:myaccount@HelloThere.com" method="post" enctype="text/plain">
Finally, you need a way to uniquely identify each control. Otherwise, you won't be able to separate the first name from the last name from the rest of the form information. The solution is to give each control a name with the name attribute.
Here's the revised form:
<form action="mailto:myaccount@HelloThere.com" method="post" enctype="text/plain" > First Name: <input type="text" name="FirstName"><br> Last Name: <input type="text" name="LastName"><br> Email Address: <input type="text" name="Email"><br> <br> <input type="checkbox" checked name="MailCheck"> Add me to your mailing list<br><br> <input type="submit" value="OK"> </form>
Now, say a visitor fills out the form with the information shown in Figure 12-4.
When the visitor clicks OK, the information is added to an email message, and sent to your email address. Here is the content of the email that you'll receive:
All this email contains is a list of name-value pairs . The name (on the left side of the equal sign) identifies the control. The value (on the right side) indicates the value that the visitor supplied. As you can see, it could take a lot of work to read all these emails and add them to an email list in your email program if you have a popular Web site. A nicer, but far more complex, approach is to have some sort of program that can understand this type of message, and carry out the correct actions automatically.
The next example you'll see uses a form to create a feedback page (see Figure 12-5). Visitors use this page to supply their deepest thoughts, and whisk them off to you with a single click of a button.
This form is a fair bit more interesting than the previous one. First of all, it includes two instances of a new form tagthe radio buttonwhich is created with the radio type of <input> tag. Here's the HTML that makes it all happen:
<input type="radio" name="Plan" value="Full" checked>Full <input type="radio" name="Plan" value="Part">Partial
The trick is to make sure you give every radio button in the group the same name. That way, the browser knows they belong together, and when you click one option, the others are unselected . You also need to give every radio button a unique value. That's how you tell, when you receive the form results, which option was selected. For example, if the surfer clicks Full and submits the form, this is the corresponding line you'll see in the emailed data:
The drop-down menu uses the <select> tag to define the list (and choose a name), and the <option> tags to define each item in the list (and choose a unique value for each one). Here's the HTML:
<select name="PromoSource"> <option value="Ad">Google Ad</option> <option value="Search">Google Search</option> <option value="Psychic">Uncanny Psychic Intuition</option> <option value="Luck">Bad Luck</option> </select>
Now, if someone selects the first option, the email message will contain this line:
The last interesting detail about the form shown in Figure 12-5 is that it uses tables and styles to neaten up its appearance. Various style rules set the fonts and sizing of the different controls. (See the downloadable content for this chapteravailable from the "Missing CD" page at www.missingmanuals.comto take a look at the details.) Additionally, each item is placed inside a separate table row so they all line up neatly. The table has two columns . The leftmost column holds the caption text, and the rightmost column has the control.
Here's the first part of the table structure:
<table> <tr> <td>First Name:</td> <td><input type="text" name="FirstName"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="LastName"></td> </tr> <tr> <td>Email Address:</td> <td><input class="TextControl" type="text" name="Email"></td> </tr> </table>
This technique is a handy way to rein in sprawling forms.