However, using a drawing program to create a form from scratch has merit. By keeping it simple, you can give it manageable download time and print time. One advantage over building up a form from HTML is that you can easily rotate a wide form 90 degrees and allow the user to print the form without having to reset the browser for "landscape".
Working in style sheets is a reasonable approach. Style sheets can give you fine control over item placement and appearance.
HTML provides the skeleton to make the form legible even if the style sheet is not honored and can be used by itself to create good-looking, functional forms.
After opening the html document, providing a title, and opening the body, the page begins by establishing a centered division consisting of an image, some text, and another image. This looks good in the browser and on the printed page. It does not fix an overall width for the header and does not use a fixed font. It does use a table centered within the division to arrange the images and text. Setting the left-hand cell to 30 percent of the overall table keeps the left-hand image from taking over the header.
<html><head><title> HTML Form--Conference Registration</title></head> <body> <div align=center><table><tr> <td width="40%" align=left>your image 1 here; set for 100 x 100</td> <td align=center> District<br> Spring Conference<br> Holiday Inn<br> Your Town, State<br> May 18 - 20, 2001<br> <big>Registration Form</big><br> </td> <td width="30%" align=right>your image 2 here; set for 100 x 100</td></tr> </table></div>
Next, the page asks for some free-form information that doesn't lend itself to arrangement in a single table. You could use a proportional font for this, but then the right-edge of the right-most fields would not stop at the same imaginary margin. Therefore to make this margin look right, this page sets a preformatted area with a non-proportional font by using the pre tag. Underlines work well to indicate blanks to be filled in. The printed version would have remained reasonable for perhaps a dozen more characters per line. More than that, and the text would have wrapped on the printer, making the form unappealing or useless. In addition to forcing a non-proportional font, the pre tag honors extra room between lines to easily provide the required vertical space to fill in the entries in this portion of the form.
<pre> Mr ___ Mrs ___ Ms ___ Name: ________________________________________ Address: _______________________________ Phone: ____________________ City: ____________________ State: ___ Zip: ______ Club: ____________ E-Mail: ____________________________________________________________ Club Office Held: ______________________ Your First Conference? ____ </pre>
Now, toss in some explanatory text. Because this text is not hard-wrapped nor encapsulated in a table, its overall width fluctuates on the screen as the window size is changed. Because the previous section's width is constrained, the form will appear a bit lopsided on screen if the browser window is wide. However, the text will all fit on the printed form and will look good. Again, toss in a paragraph tag to separate this from the next section.
Last day for meal registration is May 1 lth. NO meal orders will be taken at the conference. NO refunds after May 11th. Rooms are blocked until May 4th -- no guarantee of availability after that date, however, the hotel will honor our reduced rates after May 4th if space is available. At hotel check-in identify your group name as Your Group for the reduced rates. <p>
The following table of numbers is readily respresented using the table tag. Because the items to be filled in are numbers rather than text, the lack of additional vertical space between rows is not a problem here. The table after that merely formats existing text; so again, height is not a problem. Text not in tables flows to fill the available browser or page width as applicable.
<table> <tr><td><strong>EVENT</strong></td> <td><strong>PRICE</strong></td> <td><strong>QTY</strong></td> <td><strong>TOTAL</strong></td> </tr> <tr><td>Early Registration (received by May 4)</td> <td>$16</td><td>___</td> <td>$______</td></tr> <tr><td> Husband and Wife Members (received by May 4) </td> <td>$21</td><td>___</td> <td>$______</td></tr> <tr><td>Guest Registration (credited to meal purchase)</td> <td>$ 5</td><td>___</td> <td>$______</td></tr> <tr><td>Award Luncheon</td> <td>$15</td><td>___</td> <td>$______</td></tr> <tr><td>Contest and Banquet</td> <td>$23</td><td>___</td> <td>$______</td></tr> <tr><td>Late Registration (received after May 4)</td> <td>$19</td><td>___</td> <td>$______</td></tr> <tr><td>Husband and Wife Members (after May 4)</td> <td>$25</td><td>___</td> <td>$______</td></tr> <tr><td>Sunday Breakfast (Roast)</td> <td>$11</td><td>___</td> <td>$______</td></tr> <tr><td></td><td></td> <td></td><td></td></tr> <tr><td>TOTAL FOR ALL EVENTS</td> <td> </td><td></td> <td>$______</td></tr> </table> <p> Make checks payable to Your Event, then mail the form and check to: <p> <table> <tr><td>Contact 1<br> Street Address<br> City, State Zip </td><td>Registration questions? My phone</td></tr> <tr><td></td><td> </td></tr> <tr><td> Other conference questions? </td> <td>Contact 2<br> E-mail@here.com</td></tr> </table> <p> Check must accompany registration. NO meal orders will be taken at the conference. Registration is required for all meal events; Contestants do not pay a registration fee, but they must register and pay for meals eaten. <p>
This page checks to see if the browser supports the print function. If it does, it provides a button. If it doesn't, it provides instructions. (If javascript isn't enabled, it doesn't do either.) Finally, the body closes and the document closes.
<script language="javascript">
<!--
if (window.print)
{
document.write('<form name="Printer">');
document.write('<input type="button" value="Print" ');
document.write('onClick="window.print()"></form>');
}
else
{
document.write('Select F)ile P)rint from the browser ');
document.write('menu to print this page');
}
// -->
</script>
</body></html>