Section 12.2. Helping Visitors Email You

12.2. Helping Visitors Email You

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.

12.2.1. Mail-To Links

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.

Note: The mail-to link is a great way to get feedback from others, but in order for it to work there, must be an email program installed on the Web surfer's computer, and the email program must be properly configured.

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="">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 "&amp;" 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=""> 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&amp;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.

Figure 12-1. When you click a mail-to link, an email message is created (as shown here). The recipient, subject, and body are filled in according to the link, although whoever's clicked the link has the ability to change these details (or just to close the window without clicking Send). The actual email window differs , depending on what email program is installed on the Web surfer's computer. This example shows the send mail window from Outlook Express.

12.2.2. HTML Forms

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.

Figure 12-2. Before Microsoft will grant you an email account, you need to submit some seriously detailed information. The textboxes, lists, and buttons you use are all part of an HTML form. Form basics

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> </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.

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:

  • JavaScript is a simplified way to program for the Web. It won't power a professional Web site, because it runs only inside the browser (not on the Web server). However, it's a good way to start out with a kind of programmer's training wheels. You'll get a basic introduction to JavaScript in Chapter 14.

  • CGI (Common Gateway Interface) is the favorite of Internet traditionalists. It's a thorny but widely adopted standard that has been around since the dawn of the Internet. CGI isn't for the faint of heart, because it requires jargon-filled languages like C and Perl. If you aren't familiar with these languages, you might still be able to download a CGI script file from the Web and get it working for you. Surf over to to dip a toe into CGI.

  • ASP (Active Server Pages) and ASP.NET (a newer version) are Microsoft technologies that are a good fit for people familiar with friendly programming languages like Visual Basic. You can learn some ASP basics at, or tackle the more complex but much more capable ASP.NET at

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:

 <input type="checkbox"> 

To create a text box, you use the text type:

 <input type="text"> 

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.

Figure 12-3. This very basic HTML form brings together four controls: three text boxes and one checkbox. Everything else is just ordinary HTML content. To make everything look nicer (and align it more neatly), you can use all the tricks you've learned about in previous chapters, including tables and styles. But one thing's still missing: a way for your visitor to actually send you the form's info . You'll learn how to fix that shortcoming below.

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.

Table 12-1. HTML Form Controls




Single-line Textbox

<input type="text">

<input type="password">

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.

Multi-line Textbox


Shows a large textbox that can fit multiple lines of text.


<input type="checkbox">

Shows a checkbox that can be turned on or off.

Option Button

<input type="radio">

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.


<select> </select>

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="" method="post" enctype="text/plain"> 

Note: As with the mailto links shown in the previous section, this technique only works if Web surfers have an email program installed and correctly configured on their computers.

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="" 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.

Figure 12-4. A form with some visitor-supplied information.

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.

Tip: Your browser may show a warning when you click the submit button, advising you that you are about to send an email. Similarly, spyware catchers and virus programs might block this behavior. If you're concerned about these potential roadblocks , you can add a note to your page informing visitors that when they click the submit button they may see a message, which they'll need to review before they can send an email. Creating a feedback page with a form

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.

Figure 12-5. This form aligns its controls neatly, and features a radio button selection and a drop-down menu.

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:


Tip: You can switch your menu from its drop-down appearance to a large list box using the size attribute. For example, if you write <select size="3"> you'll create a scrollable list box that fits three items into view at once. If you want to allow multiple selections, add the attribute multiple . Now, a visitor can select several items at once by holding down the Ctrl key (or @cmd, if she's using a Mac). For more low-level HTML form details, check out

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.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: