|
|
 |
Writing the Tool's UI
The mailto: URL tool includes two parts. The HTML part defines the form itself. The form includes basic input elements such as text fields, text areas, and buttons. The important attribute of these input fields is NAME. All references to values of these fields are done through their NAME attribute. If the form name is mailtoForm, and the input field's name is NAME="subject", then the field value is:
mailtoForm.subject.value
You can also set a field by assigning a value to mailtoForm.subject.value. Buttons are assigned with the following event handlers that are covered later in this column: createMailto(), testMailto(), and viewMailto(). Notice the TYPE="Reset" button. It clears all form's fields without explicitly specifying the event handler. A field's VALUE determines the text that appears on the button. The SIZE attribute determines the field's length in characters. The COLSPAN attribute specifies how many columns a table cell spans (one, if attribute is not specified). Here is the HTML code. It is self explanatory for the most part:
<BODY>
<FONT FACE="Arial, Helvetica" SIZE=-1>
<CENTER><H1>Create a mailto: URL</H1></CENTER>
<FORM NAME="mailtoForm">
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR="#ffff99" >
<TR ALIGN="LEFT" VALIGN="TOP">
<TD COLSPAN="4">
<CENTER><B><FONT COLOR="#408080" SIZE=+1>Enter Message Details Here
</FONT></B></CENTER></TD>
</TR>
<TR ALIGN="LEFT" VALIGN="TOP">
<TD><FONT FACE="Arial, Helvetica" SIZE=-1><B>To:</B></TD>
<TD><INPUT TYPE="text" NAME="to" SIZE=30
STYLE="background-color:'#ffcc66'"></TD>
<TD><FONT FACE="Arial, Helvetica" SIZE=-1><B>Cc:</B></TD>
<TD><INPUT TYPE="text" NAME="cc" SIZE=30
STYLE="background-color:'#ffcc66'"></TD>
</TR>
<TR ALIGN="LEFT" VALIGN="TOP">
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica" SIZE=-1>
<B>Bcc:</B></TD>
<TD><INPUT TYPE="text" NAME="bcc" SIZE=30
STYLE="background-color:'#ffcc66'"></TD>
<TD><FONT FACE="Arial, Helvetica" SIZE=-1><B>Subject:</B></TD>
<TD><INPUT TYPE="text" NAME="subject" SIZE=30
STYLE="background-color:'#ffcc66'"></TD>
</TR>
<TR ALIGN="LEFT" VALIGN="TOP">
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica" SIZE=-1>
<B>Body:</B></TD>
<TD COLSPAN="4"><TEXTAREA NAME="body" WRAP="VIRTUAL" COLS=63
ROWS=3 STYLE="background-color:'#ffcc66'"></TEXTAREA></TD>
</TR>
<TR ALIGN="LEFT" VALIGN="TOP">
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica" SIZE=-1>
<B>Link Text:</B></TD>
<TD COLSPAN="3"><INPUT TYPE="text" NAME="linkText" SIZE=73
STYLE="background-color:'#ffcc66'"></TD>
</TR>
<TR>
<TD COLSPAN="4">
<CENTER>
<INPUT TYPE="Reset" NAME="Clear" Value="Clear">
<INPUT TYPE="button" NAME="CreateURL" VALUE="Create URL"
onClick="createMailto(document.mailtoForm,
document.mailtoForm.text, 'url')">
<INPUT TYPE="button" NAME="CreateAnchor" VALUE="Create Link"
onClick="createMailto(document.mailtoForm,
document.mailtoForm.text, 'anchor')">
</CENTER>
</TD>
</TR>
<TR>
<TD COLSPAN="4">
<CENTER><FONT COLOR="#408080" SIZE=+1><B>Here is Your mailto:
URL</B></FONT></CENTER>
</TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT FACE="Arial, Helvetica" SIZE=-1>
<B>mailto URL:</B></TD>
<TD COLSPAN="3"><INPUT TYPE="text" NAME="text" SIZE=73
STYLE="background-color:'#ffcc66'"></TD>
</TR>
<TR>
<TD COLSPAN="4">
<CENTER>
<INPUT TYPE="button" NAME="Test" VALUE="Test URL"
onClick="testMailto(document.mailtoForm.text.value)">
<INPUT TYPE="button" NAME="View" VALUE="View URL"
onClick="viewMailto(document.mailtoForm.text.value)">
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</FONT>
</BODY>
  
Next: How to write the script part of the mailto: URL tool, part I
|
