Building an SMTP Client with Prototype - Defining the SMTP client's structural markup
(Page 3 of 4 )
Now I will build the basic structural markup corresponding to this Prototype-based SMTP client, in this way completing the definition of its friendly user interface.
Below I included the respective (X)HTML code that defines the basic structure of this email application. Have a look at the following code listing, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Prototype-based SMTP Client</title>
</head>
<body>
<h1>Prototype-based SMTP Client</h1>
<div id="maincontainer">
<div id="state">STATUS: COMPOSING MESSAGE...</div>
<form id="mailform">
<p>To: <input type="text" id="to" title="enter email address of
recipient" class="textbox" /></p>
<p>Subject: <input type="text" id="subject" title="enter the
subject of your message" class="textbox" /></p>
<p>Cc: <input type="text" id="cc" class="textbox" /></p>
<p>Bcc: <input type="text" id="bcc" class="textbox" /></p>
<p><textarea name="message" title="Type here the text of your
message" id="message"></textarea></p>
<p><input type="submit" value="Send Message" class="formbutton"
title="Send Message"/>
<input type="reset" value="Clear All Fields" class="formbutton"
title="Clear All Fields" />
<input type="button" value="Clear Message" class="formbutton"
title="Clear Message" id="resetbutton"/></p>
</form>
</div>
</body>
</html>
Since the definition of the above (X)HTML file is very easy to follow, I won't bore you explaining irrelevant details. The only thing worth stressing here with reference to the signature of the previous file is the inclusion of a regular web form for letting users enter the email address of a specific recipient, the respective message's subject, and of course the text of the message in question.
This online form will also allow you to easily specify whether the message will be sent to additional receivers. For this reason, it will include two extra fields to be used for entering the email addresses corresponding to receivers of carbon copies and blind carbon copies respectively. Quite simple, isn't it?
Okay, now that you know how the structural markup of this Prototype-based SMTP application has been created, it's time to see how this code can be integrated into the set of CSS styles that you learned in the previous section. Doing so will give you a much better idea of how the presentational and structural modules that comprise this email application fit each other.
Wan to see how this process will be achieved? All right, go ahead and read the following section.
Next: Listing the complete client-side code for the SMTP application >>
More JavaScript Articles
More By Alejandro Gervasio
