Sunday, December 17, 2006
Thanks for Stopping By
Blog Entry #60
Script Tips #21, #22, #23, and #24 discuss a simple guestbook script that
(a) provides an input box for user comments and then
(b) pops up an acknowledgement message in a new window when the user's comments are submitted via email to the script's addressee, whoever it might be. At no extra charge, the acknowledgement message incorporates the user's name and email address, which are collected by two prompts at the beginning of the script, and also the user's comments. The Script Tips #21-24 Script appears here and has a demo page here, and is reproduced below:
<script language="javascript">
var name = prompt("What is your name?","Write It Here.");
var email = prompt("What is your email address?", "Write It Here.");
</script>
<script language="javascript">
function verify( ) {
var OpenWindow = window.open("", "newwin", "height=300,width=300");
OpenWindow.document.write("<html>");
OpenWindow.document.write("<title>Thanks for Writing</title>");
OpenWindow.document.write("<body bgcolor='ffffcc'>");
OpenWindow.document.write("<center>");
OpenWindow.document.write("Thank you <b>" + name + "</b> from <b>" + email + "</b><p>");
OpenWindow.document.write("Your message <p><i>" + document.gbookForm.maintext.value + "</i><p>");
OpenWindow.document.write("from " + name + " / " + email + "<p>");
OpenWindow.document.write("will be sent along when you close this window.<p>");
OpenWindow.document.write("<center>");
OpenWindow.document.write("<form><input type='button' value='Close Window' onclick='self.close( );'></form>");
OpenWindow.document.write("</center>");
OpenWindow.document.write("</html>"); }
</script>
<form method='post' action='mailto:jburns@htmlgoodies.com?Subject=Script Tip mail from " + name + " at " + email + "' enctype='text/plain' name='gbookForm'>
<b>What would you like to tell me?<br></b>
<textarea cols="40" rows="20" name="maintext"></textarea><p>
<input type="submit" value="Send It" onclick="verify( );">
</form>
As shown above, the Script Tips #21-24 Script contains two script elements. The first script element holds two prompt( ) commands that solicit the user for a name and email address and then assign the user's inputs to the variables name and email, respectively. (Although both name and email strike me as poor choices for variable names, neither of them is a JavaScript reserved word.) The second script element codes the acknowledgement message window/document à la the Primer #12 Script. However, check the source code of the demo page document, which contains a third script element for the start-tag of the form element just below the second script element - we'll have more to say about this later.
The textarea element
The "Forms" section of the HTML Goodies site sports a "So, You Want A Guestbook, Huh?" tutorial with a sample guestbook comprising two <input type="text"> boxes, a set of five radio buttons, a textarea box, and submit and reset buttons. The Script Tips #21-24 Script guestbook is simpler; it substitutes the two prompt( ) commands for the <input type="text"> boxes and then features only a textarea box and a submit button. I thought we might discuss textarea boxes a bit, given the central roles they play in these and other guestbooks and also because, as far as form controls go, I've heretofore given them pretty short shrift on this blog.
Some references:
(1) The textarea element and its cols and rows attributes are detailed here in the W3C's HTML 4.01 Specification.
(2) The JavaScript 1.3 Client-Side Reference treats the textarea object here.
(3) In the Document Object Model (DOM) Level 2 HTML Specification, the HTMLTextAreaElement Interface appears here.
A textarea element is like an <input type="text"> element but allows multiline input. The width and height of a textarea box can be set by the textarea cols and rows attributes, respectively; the cols value corresponds roughly to the number of characters in a monospaced font that can be entered per line before either horizontal scrolling or wrapping to the next line becomes necessary, whereas the rows value sets the number of text lines that can be entered per box before vertical scrolling becomes necessary. For example,
<textarea cols="60" rows="6"></textarea>
creates a box whose visible display is 60 characters across, 6 rows down. The W3C does not specify default values for the cols and rows attributes, saying merely that they are "required." I find on my iMac that a textarea element without cols and rows attributes gives a box about 20 characters across and 2 (MSIE) or 3 (Netscape) rows down.
The value of a textarea element corresponds to its contents; unlike the <input> tag, the <textarea> tag does not take a value="whatever" attribute:
<textarea>Hello, World!</textarea>
as opposed to
<input type="text" value="Hello, World!">
However, a document.formName.controlName.value or document.getElementById("controlID").value expression can be used to read/write the value of either a textarea element or an <input type="text"> element.
We can use CSS to style a textarea element's contents and also its borders:
<style type="text/css">
textarea {color: red; font-weight: bold; border-style: dashed;}
</style>
Relatedly, a textarea element's contents cannot ordinarily be formatted with HTML markup*:
<textarea><i>These words are italicized</i></textarea>
gives a box that literally displays <i>These words are italicized</i> and not These words are italicized. However, textarea elements do render HTML character references normally, e.g., <textarea>£100</textarea> gives a box that displays £100. It follows that - the numeric character reference for a line feed, and equivalent to \n - but not <br>, can be used to force a line break in a textarea box.
(*This is because the textarea element, as defined in the W3C's HTML 4.01 ("Strict") Document Type Definition (DTD), has a #PCDATA content model - "#PCDATA" and "content model" are briefly defined here. I encourage you to read through the Text Encoding Initiative's "A Gentle Introduction to SGML", which is quite helpful in making sense of the W3C's HTML DTD information. SGML, the Standard Generalized Markup Language, is the metalanguage that 'gave birth' to HTML; unfortunately and annoyingly, the SGML specification is not online.)
Nevertheless, a textarea element can be engineered to contain/render other HTML elements - e.g., go to a "comments" page of a Blogger.com blog and check out the "Leave your comment" textarea box, in which "[y]ou can use some HTML tags" - but this topic is beyond the scope of this blog entry.
The form element and its submission
So, the user enters one or more comments into the textarea box and clicks the "Send It" submit button. What happens then? We turn now to the guestbook form's <form> start-tag:
<form method='post' action='mailto:jburns@htmlgoodies.com?Subject=Script Tip mail from " + name + " at " + email + "' enctype='text/plain' name='gbookForm'>
Let's take it one attribute at a time.
• method='post': this probably means that the form will be sent to its processing agent via the HTTP POST method, technically defined here, i.e., the user's comments will be transmitted as a separate data block and not appended to the URL specified by the form action attribute as would occur if method="get". However, the W3C notes here that if the form action attribute value is not an HTTP URL (and it is not in this case), then
[user agent] behavior is unspecified.
(N.B. Browsers are user agents, but not all user agents are browsers.)
• action='mailto:jburns@htmlgoodies.com?Subject=Script Tip mail from " + name + " at " + email + "': this value of this attribute is a mailto URL to which the form is sent, in this case Joe's email address augmented by a query string specifying a "Subject" header and incorporating the name and email variables.
If the quote formatting of the action value seems strange to you, well, it did to me too initially; upon checking the source code of the Script Tips #21-24 demo page, however, it seems that the guestbook form's <form> start-tag is meant to be written by a document.write( ) command:
document.write("<form method='post' action='mailto:jburns@htmlgoodies.com?Subject=Script Tip mail from " + name + " at " + email + "' enctype='text/plain' name='gbookForm'>");
// Ah, much better, eh?
There's just one little problem we need to mention before moving on: modern browsers do not support (more specifically, will not submit to the processing agent) action="mailto:addressee@some_domain.com" forms, a point made by HTML Goodies in this undated article. On my computer - and I am not exactly a 'cutting-edge user' - neither MSIE 5.1.6 nor Netscape 7.02 will submit the gbookForm form, but Netscape 4.79 will! The HTML Goodies "Forms" section provides links to several tutorials that offer more state-of-the-art methods for processing email forms - methods involving the use of PHP, CGI/Perl, and ASP scripts - but I am not conversant with these technologies and for now will leave you to your own devices on this front.
In continuing, let's assume that the user's browser is able to submit the gbookForm form using an action mailto: URL.
• enctype='text/plain': Joe discusses this attribute/value here; without it, the user's comments will be encoded by the browser, and received by the addressee, according to the application/x-www-form-urlencoded content type, for example:
If the user types in
I'm really impressed with your Web page!
then without enctype='text/plain' the addressee will see
maintext=I%27m+really+impressed+with+your+Web+page%21
Having said this, the W3C warns that user agent behavior for enctype values other than application/x-www-form-urlencoded and multipart/form-data is "unspecified."
Looking over the aforementioned HTML Goodies email forms tutorials and following the links therein:
(1) It would seem that if the gbookForm form were sent to a CGI/Perl or ASP processing agent, then the enctype='text/plain' attribute is unnecessary and can/should be left out**; presumably, these processing agents are able to unescape the application/x-www-form-urlencoded encoding.
(2) As for a PHP processing agent, the <form> start-tag in the HTML of "Jack's FormMail.php" holds an enctype="multipart/form-data" attribute, but note that the form contains <input type="file"> elements for uploading files, for which this enctype value is necessary.
(**Moreover, EarthLink offers me the use of a CGI mailto script with accompanying HTML whose form element does not have an enctype attribute.)
• name='gbookForm': self-explanatory at this point, yes?
Other submit possibilities?
(1) The Script Tips #21-24 Script's <input type="submit"> element should be replaceable by a button element, if preferred:
<button onclick="verify( );">Send It</button>
<!--Note that type="submit" is the default.-->
Alas, my plan to try out the script with a button element was thwarted by Netscape 4.79's nonsupport for the button element (which was introduced in HTML 4.0, and Netscape did not provide full support for HTML 4 prior to Netscape 6).
(2) My first idea for sorting out the quote formatting of the gbookForm form action attribute was to
(a) remove the action attribute from the <form> start-tag,
(b) recode the <input type="submit"> button as a generic <input type="button"> push button, and
(c) insert the following two commands at the beginning of the verify( ) function in the script's second script element:
document.gbookForm.action = "mailto:jburns@htmlgoodies.com?Subject=Script Tip mail from " + name + " at " + email;
document.gbookForm.submit( );
However, Netscape's submit( ) method documentation warns,
The submit method fails without notice if the form's action is a mailto:, news:, or snews: URL,and this is precisely what happened (the gbookForm form was not sent) when I tried to put this idea into practice.
The verify( ) function
Clicking the submit button also triggers the second script element's verify( ) function, which pops up an acknowledgement message for the user in a new window. As noted above, we did the coding-a-new-window-in-an-opener-document thing in Primer #12, so I'm only going to offer a few 'aesthetic' comments here.
• If desired, the
OpenWindow.document.write("<html>") and OpenWindow.document.write("</html>")
commands can be removed; the W3C notes here that the html element's start-tag and end-tag are in fact optional.
• On my computer, I find that the presentational attributes of the OpenWindow document body can be set with style commands if the <body> start-tag is left in place, even as the body element's start-tag and end-tag are also supposed to be optional:
// Replace the <body bgcolor='ffffcc'> and center element commands with:
OpenWindow.document.write("<body>");
OpenWindow.document.body.style.backgroundColor = "#ffffcc";
OpenWindow.document.body.style.textAlign = "center";
// These style commands do not work with Netscape 4.79.
• The "Control types" section of the HTML 4.01 Specification notes:
"The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces...Note that controls outside a form cannot be successful controls [i.e., their name/value information cannot be sent to a form processing agent]."Clearly, the button in the acknowledgement window is not meant to be a "successful control" (this control doesn't even have a name) and is merely part of the "user interface"; it follows that this button's containing form element is unnecessary:
OpenWindow.document.write("<input type='button' value='Close Window' onclick='self.close( );'>");
// Netscape 4.79 does not render controls lacking a form element parent.
Smaller to bigger
We wrap up on a minor technical point. In Script Tip #23, Joe states,
In the hierarchy of JavaScript, any hierarchy statement goes from biggest to smallest, moving left to right.This is almost always but not %100 true, and form controls provide a notable exception in this regard. Each form control object has a form property that returns a reference to the control's parent form object (it returns null if the control is outside of a form); relevant examples involving the text object are detailed here in the JavaScript 1.3 Client-Side Reference for those who are interested.
Tick, tick, tick...next up: a digital clock script spanning Script Tips #25-28.
reptile7
Labels: Guestbook
- posted by A. Peak @ 1:07 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)