| Table of Contents | Previous Next |
13.2 Basic emailing with browsers13.2.1 Activate email client with "Mailto"The email (or mailto: URL) capability of a browser is a powerful feature that unfortunately is underused by many Web users. One reason for its low usage may be that users are not aware of its multiple and controllable features. For example, the multiple attributes support the cc, bcc, subject, and body fields. For many applications, including the handling of user feedback, signing up for a mail list on product promotions, or newsletters and complaints, the ability to activate a mail client locally and assemble a mail message is essential and deserves more attention from Web developers. As part of the XHTML language and script, mailto (or mailto: URL) provides a simple way to activate an email client on a system. Mailto is not an XHTML element. It is an action and can be invoked inside the anchor or form element. A simple way of using mailto: URL is given below: <a href="mailto: ">Activate Email Client</a> When the underlined text is pressed, the mailto action will activate the default mail client of your system. The first email example ex13-01.htm puts this statement into action. Example: ex13-01.htm - Email With Mailto I 1: <?xml version="1.0" encoding="iso-88591"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Email With Mailto I -- ex1301.htm</title></head> 6: <body style="background:#000088;text-align:center;font-family:arial"> 7: <div ><br /><br /> 8: <a href="mailto:" style="font-size:16pt;color:#ffff00"> 9: <b>Activate Email Client</b> 10: </a><br /><br /></div> 11: </body> 12: </html> Line 8 launches the mail client. Since mailto is a hyper reference in XHTML, this action is independent of browsers and systems. For example, if the user browses this page with IE and clicks the underlined text in line 9, Outlook Express or Outlook appears as shown in Fig. 13.5. We use Outlook Express for demonstration purposes throughout this chapter. If you have a different default email client, the result may be different on your screen. Figure 13.5. ex13-01.htm
If you have a default email account in the system, your email address will appear in the From field of the mail client. To complete the email, you may need to fill in the To and Subject fields and of course the Body before sending it out. All these requirements lead to the next question: "Can we fill in those fields inside a Web page?" The mailto action supports a number of parameters in order to help fill in those input fields. If you want to send an email to info.abc.com, you can use <a href="mailto:info@abc.com"> If you want to make a copy of the message to someone such as john@abc.com, you can add the cc field as: <a href="mailto:info@abc.com?cc=john@abc.com"> The question mark before the cc is essential. You can add other properties such as bcc (blind copy), subject, and body as name/value pairs (name=value). Each name is followed by an equals sign and a value. In general the list of name/value pairs is separated from the email address by a question mark (?). Individual name/value properties are separated from each other by an ampersand (&). The following example should make the rules easy to understand: <a href="mailto:info@abc.com?cc=John@abc.com&subject=Comments"> As a simple application, we apply the mailto and its name/value rules to develop a page to get comments from customers. Example: ex13-02.htm - Email With Mailto II 1: <;xml version="1.0" encoding="iso-88591"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Email With Mailto II -- ex1302.htm</title></head> 6: <body style="background:#000088;text-align:center;font-family:arial"> 7: <div ><br /><br /> 8: <a href="mailto:info@abc.com?cc=John@abc.com&subject=Comments&body= 9: Please Give Us Some Comments" style="font-size:16pt;color:#ffff00"> 10: <b>Click Here To Give Us<br /> Some Feedback</b> 11: </a><br /><br /></div> 12: </body> 13: </html> The anchor element with mailto in line 8 is used to activate the mail client. The email addresses of the recipients, info@abc.com and cc=John@abc.com, are, of course, used here as an example. The word "Comments" is put into the subject line and finally the simple message "Please Give Us Some Comments" in the email body. This page will automatically open a new email by using the default email client and fill in the To, Subject, Cc, and Body fields. If the user is using an IE browser and the default mail client is Outlook Express, then the corresponding screen display is as shown in Fig. 13.6. Figure 13.6. ex13-02.htm
The body pair (name/value pair) in line 8 can be a message with multiple paragraphs. To generate new paragraphs this way, hexadecimal code may be needed in your message. For example, the carriage return (%0D) and line feed (%0A) codes are combined together as %0D%0A to insert a new line for Microsoft systems. Only carriage return is needed in UNIX (or LINUX) systems. Since question marks and ampersands are used as delimiters in the mailto action, hexadecimal notation should be used to prevent any confusion. Users may need to press the Send button on Outlook Express to send the mail. For practical reasons such as integrity and consistency, you may want to embed the mail client into your Web design. So can we actually write and send emails within a Web page? 13.2.2 A feedback pageOne example of using email within a Web page is to get visitors' comments or feedback. You may want to find out how visitors view and feel about your site or services. A simple feedback page usually contains the following features:
Forms and tables are usually used to implement these features. As a demonstration, the following example page ex13-03.htm is considered:
Example: ex13-03.htm - A Page For Feedback
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Customer Feedback Page -- ex1303.htm</title></head>
6: <style>
7: .tx01{font-size:14pt;color:#ffff00;background:#a0a0ff;font-weight:bold}
8: .tx02{font-size:22pt;color:#ffff00;font-weight:bold;text-align:center}
9: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
10: font-size:12pt;color:#008800;width:80px;height:30px}
11: </style>
12: <body style="background:#000088;text-align:center;font-family:arial">
13: <br>
14: <form name="mail" method='post' enctype="text/plain"
15: action='mailto:info@pwt-ex.com?subject=Comments'>
16: <table border="2" width="440" class="tx01">
17: <tr><td colspan="2" class="tx02"> User Feedback Form</td></tr>
18: <tr><td>To (Email):</td><td>info@pwt-ex.com</td></tr>
19: <tr><td>Subject:</td><td>User Comments</td></tr>
20: <tr><td valign=top>Comments:</td><td>
21: <textarea name="Feedback Ref:#2123" id="Feedback Ref:#2123" rows="8"
22: cols="40" wrap="yes"></textarea></td></tr>
23: <tr>
24: <td align="center"><input type="submit" value="Send" class="butSt"></td>
25: <td align="center"><input type="reset" value="Re-type" class="butSt"></td>
26: </tr>
27: </table>
28: </form>
29: </body>
30: </html>
This page is a form application. Line 14 gives this form a name and an identity as "mail." The processing method used in this form is called "post." Basically, this means that when the user presses the Send button defined in line 24, elements with the name attribute inside this form will be passed to the mail client as name/value pairs and appear in the mail body. The processing action action='mailto:info@pwt-ex.com?subject=Comments' is a mailto command to fill the controllable fields and deliver the mail. The only name/value pair inside the form element is the text area element <textarea> defined in lines 2122. We use text area to create a user-input field for the contents of the email body. Any information inside the text area is considered as the value of the element <textarea>. Together with the name attribute, we have a name/value pair that will be sent to the form action once the Send button is pressed. In practice the name of the text area could also have additional reference codes for other practical (e.g., statistical) purposes. Finally, a Re-type button (line 25) is used to clear all data and be ready for the next session. Figure 13.7 is a screen display of this page. Figure 13.7. ex13-03.htm
The action attribute of a form usually holds the URL of a Common Gateway Interface (CGI). This means that some applications on the server can be called and executed by using the form. Thus we can also use it to send an email via the server. This will be discussed later in this chapter. A screen shot of the mail in the Outbox of Outlook Express is shown in Fig. 13.8. Figure 13.8. Message in Outbox
13.2.3 Signing up to a mailing listIn addition to user feedback, another popular action on the Web is to get the user's information. For example, signing up for a newsletter or joining a mailing list is a very common activity on the Internet. Many commercial sectors use the sign-up information to form a customer database for the purposes of product promotion, market research, targeted online sales, and others. As a user, signing up for the mailing list is a good way to obtain useful information. There are a number of ways to implement a user sign-up form. For example, you can modify the example ex13-03.htm to get the email address or any other information about the user. The next example shows how to use the ECMAScript strings technique to implement a sign-up form. One advantage of using script is that XHTML statements can be formatted as a single string. This string can then be used again and be placed anywhere on the page. This technique opens up a way for code independence and hence increases the reusability of programming codes. Consider the following page:
Example: ex13-04.htm - Signing Up For A Mailing List
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Send Catalog -- ex1304.htm</title></head>
6: <style>
7: .tx01{font-size:14pt;color:#000000;background:#a0a0ff;font-weight:bold}
8: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:80px;height:26px}
10: </style>
11:
12: <body style="background:#ffffff;text-align:center;font-family:arial">
13: <br /><br /><div id="mailformL" name="mailformL"></div>
14:
15: <script>
16: var llSt = '<form name="mail" method="post" enctype="text/plain"'+
17: ' action="mailto:info@pwt-ex.com?subject=Email"> '+
18: '<table border="2" width="400" class="tx01"> <tr> '+
19: ' <td style="text-align:center">Sign Up For The Mailing List</td></tr>'+
20: '<tr><td height="60" valign="middle">  Email:'+
21: ' <input type="text" name="Email" class="butSt" '+
22: ' style="color:#000000;width:200px;height:26px" />  '+
23: ' <input type="submit" value="Send" class="butSt" /></td></tr>'+
24: '</table> </form>'
25:
26: document.getElementById("mailformL").innerHTML=llSt
27: </script>
28: </body>
29: </html>
After the definitions of CSS style and the <body> element, a division element <div> is used in line 13 to set up a location for the sign-up form. The interesting part of this page is the ECMAScript string in lines 1624. This string contains an XHTML form and a table. The purpose of the form is to collect the email address and to send the information to info@pwt-ex.com. The table acts as an interface to organize the display. Inside the second row of the table, an input statement (lines 2122) is used to get the user input. When the user presses the Send button, the input information will be sent to the form action and be delivered to the mail client. Once you have constructed the string llSt, you can use the getElementById feature (line 26) to send this string to the location you want. Any string similar to this can be reused many times. On a practical note, you may need to include the CSS style and any other formatting statements inside the string in order to increase code independence. If you prefer you can also replace the statement in line 26 by the write statement document.write(llSt) to produce screen output since innerHTML is not a W3C feature. A screen shot of this page is shown in Fig. 13.9. Figure 13.9. ex13-04htm
In a normal case, the recipient's address is hardwired into the mailto: URL command. Can we change that at run time? In other words, can we send email to anyone we like inside a Web page? 13.2.4 Sending email to someone anywhereIn order to send an email to someone within a Web page (i.e., Web Mail), you need to compose the recipient's address inside the mailto: URL command at run time. How can we do that? The basic idea is simple. You build the entire mailto command after the user fills in the recipient's address and before the actual delivery. By using the script function, this can be done in a simple way. Consider the following example:
Example: ex13-05.htm - Send Email To Someone Anywhere
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Send Email To Someone Anywhere- ex1305.htm</title></head>
6: <style>
7: .tx01{font-size:12pt;color:#000000;background:#a0a0ff;font-weight:bold}
8: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:80px;height:26px}
10: </style>
11: <script>
12: function webMail()
13: {
14: var emailTo=document.mail.To.value
15: emailTo = "mailto:" + emailTo + "?subject="+
16: document.mail.Subject.value
17: this.document.mail.action = emailTo
18: this.document.mail.submit=true
19: return true
20: }
21: </script>
22:
23: <body style="text-align:center;font-family:arial;background:#ffffff">
24: <br /><form enctype="text/plain" name="mail" id="mail" method="post"
25: action='' onSubmit="webMail()">
26: <table border="2" width="440" class="tx01">
27: <tr align="center"><td colspan="2">Send Email To Someone Anywhere</tr>
28: <tr><td><input type="hidden"
29: name="=Message Handled By Web Mail (www.pwt-ex.com)" /></td></tr>
30: <tr><td>To (Email):</td><td>
31: <input type="text" name="To" id="To" size="40" maxlength="40" /></td>
32: </tr><tr><td>Subject:</td>
33: <td><input type="text" name="Subject" id="Subject" size="40"
34: maxlength="40" value="Web Mail" /></td></tr>
35: <tr><td valign=top>Content:</td>
36: <td><textarea name="Email Content" rows="8" cols="40"
37: wrap="yes"></textarea></td></tr><tr>
38: <td align="center"><input type="submit" value="Send" class="butSt"></td>
39: <td align="center"><input type="reset" value="Reset" class="butSt"></td>
40: </tr>
41: </table>
42: </form>
43: </body>
44: </html>
A form application is used to implement this email. The form has a name and an identity id="mail" (line 24). The interesting part is the empty action in line 25 and a new event handler called onSubmit="webMail()". This means that the script function webMail()is called once the Send button (line 38) is pressed. Since you will compose the details of the mailto command inside the webMail()function, you can assign an empty action at this point. The interface part of this page is a table defined in lines 2641. This table is designed to get the address of the recipient, subject, and contents of the email. For example, the statement in line 31 <input type="text" name="To" id="To" size="40" maxlength="40" /> defines an input field with 40 characters for a user to type the email address of the recipient. The input address will have a name and an identity called "To." The same input structure is also used for the "subject" field in lines 3334. Lines 3637 define a text area with dimension 8 rows by 40 columns for the content of the email. Once the Send button is pressed, the onSubmit handler will call the script function webMail() defined in lines 1220. The first line of this function is to get the address of the recipient, which is stored inside the variable document.mail.To.value. Then the mailto command is composed with the address and subject fields (lines 1516). This mailto command string is then assigned to the form action as shown in line 17. Finally, the form's submit value is set to true so that the mail can be sent accordingly. Notice that the document.name access method is used instead of getElementById so that this webMail() function will work on some older versions of browsers and can be reused as a library function. A screen shot of this page is shown in Fig. 13.10. You can also put more addresses, each separated by a semi-colon, in the "To" field to send the email to multiple users. This is called group mail since every one of the group appears in the "To" field of the mail. If you want to send independent emails to each person in a group within a browser, you need the following techniques. Figure 13.10. ex13-05.htm
13.2.5 Sending multiple emailsOne important feature in word processing is mail merging. For mail merging to work, you need a list of customer names and addresses that are stored in a list, a file, or a database. Once you have constructed a letter, you can merge the names and addresses from the list into the appropriate locations of the letter. The results can then be printed one by one. Many word processor programs also offer email merging capability so that you can send emails to a list of people or customers. One way to send multiple emails within a browser is to use two forms. The first form is usually an interface used to get the contents of the email message. Based on the content, another form is then created on the fly and submitted as a completed email. Since the second form is represented as a script function, sending multiple emails is just an application of multiple submissions. The first form is listed as below.
Example: ex13-06.htm - Multiple Emails
1: <?xml version="1.0" encoding="iso-88591"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Multiple Emails -- ex1306.htm</title></head>
6: <style>
7: .tx01{font-size:12pt;color:#000000;background:#a0a0ff;font-weight:bold}
8: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:80px;height:26px}
10: </style>
11: <script src="ex13-06.js"></script>
12: <body style="text-align:center;font-family:arial;background:#ffffff">
13: <div id="mailL"><br />
14: <form enctype="text/plain" name="mail" id="mail" method="post"
15: action="" onSubmit="">
16: <table border="2" width="440" class="tx01">
17: <tr align="center"><td colspan="2">Send Multiple Emails</tr>
18: <tr><td>Subject:</td>
19: <td><input type="text" name="Subject" id="Subject" size="40"
20: maxlength="40" value="Message" /></td></tr>
21: <tr><td valign=top>Content:</td>
22: <td><textarea name="Content" id="Content" rows="8" cols="40"
23: wrap="yes"></textarea></td></tr>
24: <tr><td align="center"><input type="button" value="Send" class="butSt"
25: onclick="mEmail()"></td><td align="center">
26: <input type="reset" value="Reset" class="butSt"></td>
27: </tr>
28: </table>
29: </form>
30: </div>
31: </body>
32: </html>
This is a form with a subject and a content field so that the user can type in anything. The entire form is embedded inside a division named mailL (lines 1330). This location, and hence the form, will be replaced by a second form. The script function mEmail() in line 25 is activated once the Send button is pressed. For reasons of clarity and readability, the detail of this function is coded in an external file ex13-06.js. As expected, this mEmail() function will perform the following tasks. It can
The detail of the ECMAScript file ex13-06.js is listed as follows:
Example: ex13-06.js - The ECMAScript For Example ex13-06.htm
1: ii=0 // Variable to control the number of Email addresses
2: cFlag=0 // Email Content Flag, if 0 get subject and message content
3: fFlag=0 // Finish Flag
4: emailAdd = new Array()
5: fName = new Array()
6: emailAdd[1]="John@pwt-ex.com"
7: emailAdd[2]="Peter@pwt-ex.com"
8: emailAdd[3]="Mary@pwt-ex.com"
9: emailAdd[4]="Tom@pwt-ex.com"
10: fName[1]="John"
11: fName[2]="Peter"
12: fName[3]="Mary"
13: fName[4]="Tom"
14:
15: function mEmail() {
16: ii++
17: if (ii < emailAdd.length)
18: {
19: if (cFlag ==0)
20: {
21: bodyContent=document.mail.Content.value
22: mailSubject=document.mail.Subject.value
23: cFlag=1
24: }
25: lst='<form method="post" name="mailform" ENCTYPE="text/plain" '+
26: 'onSubmit="" action="mailto:'+emailAdd[ii]+
27: '?subject='+mailSubject+'" > '+
28: '<textarea name="=MailServer" cols="40" rows="10">\n\nDear '+
29: fName[ii]+'\n\n'+bodyContent+'\n\nFrom JohnSmith'
30: '</textarea> <br /></form>'
31: document.getElementById("mailL").innerHTML=lst
32: document.mailform.submit()
33: setTimeout("mEmail()",500)
34: }
35: else fFlag=1
36:
37: if (fFlag==1)
38: {
39: fFlag =2
40: mailList="You Have Sent Multiple Emails To: <br /><br />"
41: for (jj=1;jj<emailAdd.length;jj++) mailList=mailList+emailAdd[jj]+"<br />"
42: document.getElementById("mailL").innerHTML= mailList
43: }
44: return false
45: }
As an example, four artificial email addresses and names are defined in lines 613. In practice, these names and email addresses would normally be extracted from a list or a database. Within the mEmail()function, a counter variable ii is used to control the number of emails that you want to send. Thus if the counter value is more than the length of the array emailAdd (i.e., email address), you have sent all emails and the finish flag (fFlag=1) is set to true. If the content flag cFlag has a zero value, you need to get the subject and content fields from the interface and insert them into the multiple emails. Again, the string technique is used to construct the multiple emails. The content of the string variable lst is in fact a form with mailto as action. As you can see in lines 2627, the recipient's address and subject are added to the form as a concatenation of strings. A text area is then used as the final touch of the email so that the first name of the recipient, bodyContent, and the sender's name can be integrated together. For each composed email, an innerHTML statement is used in line 31 to display it on the screen to allow a final monitoring of the multiple emails. The setTimeout() function will call this function once every half second, change the name and address of the recipient, and deliver the email again. Once all the emails are delivered, a message as defined in lines 4042 is displayed to indicate the successful completion of the application. Some screen shots are listed in Figs 13.1113.13. If you are using Outlook Express as the mail client, you can find all four emails inside the Outbox (see Fig. 13.14). Figure 13.11. ex13-06.htm (I)
Figure 13.13. ex13-06.htm (III)
Figure 13.12. ex13-06.htm (II)
Figure 13.14. Multiple emails in Outlook Express
In addition to some passive applications such as user feedback, error reporting, and complaints, sending multiple emails within a browser is also a handy tool for the administrators and staff working in a small or medium-size corporate network with mail servers. The next section looks at a classical problem in the Internet related to emailing, i.e., verification or detection of a malformed email address. |
| Table of Contents | Previous Next |
