Creating heitml FORMs

The HTML FORM Tag gives us much to be thankful for. We use it to create fill-in forms containing checkboxes, radio boxes, text input windows and buttons, and without it, our Web Pages would not be nearly so interactive. But designing HTML FORMs can sometimes be a bit of a chore, which is why heitml users will discover that they now have additional reasons to be thankful.

As illustrated earlier, heitml allows us to define our own Tags, and, as we are about to see, this feature greatly simplifies the FORMs creation process.

Suppose we wanted to create the following simple input form that allowed visitors to our Web Site to sign a guestbook and give us their comments:

Here's an example of how HTML users might create this form:

<H3> Guest book form </H3> 
<FORM ACTION=gins1.hei>
 <TABLE BORDER>
  <TR>
   <TD> Guest_Name </TD> 
   <TD> <input name="Guest_Name" size=25> </TD> 
  </TR>

  <TR>
   <TD> Email  </TD>
   <TD> <input name="Email" size=25> </TD>
  </TR>

  <TR>
   <TD> Address </TD>
   <TD> <input name="Address" size=25> </TD> 
  </TR>

  <TR>
   <TD> Country </TD>
   <TD> <input name="Country" size=25> </TD>
  </TR>

  <TR> <TD> Comment </TD>
       <TD> <textarea name="Comment"
                      cols=30
                      rows=2 
                      wrap="physical"> 
            </textarea> </TD>
  </TR>
 </TABLE>
 <INPUT TYPE="submit" VALUE="Submit">
</FORM>

HTML users see this as a simple, straightforward approach to laying out a FORM. heitml users, however, would likely take a different approach. Notice that the HTML code has a rather cluttered look about it, even though we've used indentations wherever possible to enhance readability and to better show those elements that are dependant upon (or contained within) higher-level control elements. (For instance, the <form> contains a <table> composed of <TableRows> that, in turn, display <TableData>.) This is a long-established, heirarchial approach to programming that has been widely employed.

And yet, as we'll see in just a moment, heitml allows us to go a step further in this regard. By defining our own Tags, heitml lets us take a modular approach to Web Page Publishing, in the process creating a set of re-useable tools that become more valuable with each Page we create.

To illustrate this concept, let's look again at the guestbook FORM, but this time, instead of looking at the HTML code, let's look at it the way your Web Browser displays it and see what we notice.

Guest book form:

Now let's take what we've observed and see if we can define heitml Tags to handle these four elements. The first element, the <FormTitle> can be handled with a simple variable declaration:

<let FormTitle="Guest book form:">

Input Fields are composed of a label name followed by a number representing the maximum length (or size) of the data field, and we can define such a Tag in heitml as follows:

<def InputField>
 <TR>
  <TD> <? name> </TD> 
  <TD> <input name="<? name>" size=<? size>> </TD>
 </TR>
</def>

The Textarea is composed of a label name, an integer representing the column width, another integer specifying the number of rows that will be displayed on-screen, and an instruction that tells HTML how to wrap text. The heitml Tag to define it looks like this:

<def InputTextarea>
  <TR> <TD> <? name> </TD>
       <TD> <textarea name = "<? name>" 
                      cols = <? cols> 
                      rows = <? rows> 
                      wrap = "<? wrap>" >,
            </textarea> </TD>
  </TR>
</def>

Our fourth and final FORM element is a button that tells HTML we've finished entering data into the FORM and we're ready to submit it for processing. Let's define it as follows:

<def Submit>
  <input type="submit" value="Submit"> 
</def>

Now that we've taken a higher-level look at our FORM elements and organised them into re-useable modules, let's see how heitml brings them all together with a practical coding example:

<form action=gins1.hei>
 <h3> <? FormTitle> </h3>
 <table border>
  <InputField name = "Guest_Name" size = 25> 
  <InputField name = "Email"      size = 25> 
  <InputField name = "Address"    size = 25> 
  <InputField name = "Country"    size = 25> 
  <InputTextarea name = "Comment"
                 cols = 30 
                 rows = 2 
                 wrap = "physical">
 </table>
 <Submit>
</form>

By modularizing our FORM elements we've reduced the task of creating this and any future FORMs to a few simple procedure calls. We can modify the FORM by adding or deleting input and textarea fields at will, just by passing the necessary parameters to our pre-defined Tags.

Notice how much simpler it is to read the above heitml code in comparison to the previous HTML coded FORM. We are no longer distracted by the clutter of HTML Tags that open and close <TableRows> and <TableData>, because all of that is handled automatically by the code we created when we defined the <InputField> and <InputTextarea> procedures.

In fact, we should point out that a special feature of heitml syntax allows us to go one step further in eliminating the cluttered look of HTML. If we think of HTML Tags as "text handling Tags" and heitml Tags as a series of "programming processes or procedures" then it makes sense to enhance the programming "look and feel" of heitml by employing a semi-colon to separate these processes from one another (as illustrated by the following):

<form action=gins1.hei>
 <h3> <? FormTitle> </h3>
 <table border>
  <InputField name = "Guest_Name" size = 25; 
   InputField name = "Email"      size = 25; 
   InputField name = "Address"    size = 25; 
   InputField name = "Country"    size = 25; 
   InputTextarea name = "Comment"
                 cols = 30 
                 rows = 2 
                 wrap = "physical";
  > 
 </table>
 <Submit>
</form>

Once we've entered heitml processing mode (which happens any time heitml recognizes a User-defined Tag) we've already more or less made the switch from a Document Description Language view of things to a Procedural Programming Language view anyway, so it makes sense to employ this new syntax.

We'll see more useful examples of this syntax later. For now it's enough to simply think of it as a way to get rid of a few unattractive looking less-than/greater-than symbols.

Astute readers should note that they can use heitml to create an entire suite of buttons for use within their FORMs, similar to the <Submit> button we've created as an example. All of these buttons can be kept together in an <include> file along with any other pre-defined Tags needed to create your heitml application.

Summary

In this section we took a new look at the process of creating HTML FORMs by introducing the concept of modularity. We showed how you could use heitml Tags to define procedures that not only help automate the task of creating FORMs, but have the added benefit of making your code easier to read and understand. These methods can be applied to virtually all aspects of HTML Web Pages and we hope that by studying these examples you will begin to see possibilities for your own applications, both old and new.