A Simple Form

The form shown below will drive this discussion.  

Form

Here is a form rendered HTML:

Name:
 
Address:
 

HTML

Here is some basic HTML that can generate this form:

<form method="POST" action="http://wwwj.cs.unc.edu:8888/servlet/jbsGetPostEcho">
  Name: <input type="text" name="nameField" size="20"/>
  <br/>
  Address: <input type="textarea" rows="2" name="addressArea" cols="20"/>
  <br/>
  <input type="submit" value="Submit" name="submitButton"/>
  <br/>
</form>

 XML Document

Here is a minimal XML document that could specify that such a form should be generated by an XSL stylesheet:

<?xml version="1.0"?>

<basic_form>
</basic_form>

As alternative, the paired basic_form tags could be specified as a uniary tag:

<basic_form/>

XSL Stylesheet

Given the XSL framework and root template described earlier, here is a minimal template that could be applied to the <basic_form> XML component to produce the form:

<xsl:template match="basic_form">

<form method="POST" action="http://wwwj.cs.unc.edu:8888/servlet/jbsGetPostEcho">
  Name: <input type="text" name="nameField" size="20"/>
  <br/>
  Address: <input type="textarea" rows="2" name="addressArea" cols="20"/>
  <br/>
  <input type="submit" value="Submit" name="submitButton"/>
  <br/>
</form>

</xsl:template>

XSL Stylesheet: An Alternative

The preceding stylesheet is based on inclusion of the literal HTML for specifying the form.  A more realistic scenario is that the original XML document will specify more information about the form and, consequently, the stylesheet will be designed to process that information.  Thus, multiple XML-specified forms could be handled by the same XSL stylesheet.

To do this requires several additional concepts.  The first is that the elements of the stylesheet, such as the input items in the form, will not be specified in the literal fashion shown above but, rather, generated by the XSL translator form smaller components.  The second is that XSL offers facilities to construct an HTML element from pieces.

The following rewriting of the form elements of the previous stylesheet illustrates the second of these two points.

<xsl:template match="basic_form">

<form method="POST" action="http://wwwj.cs.unc.edu:8888/servlet/jbsGetPostEcho">

Name: 
<xsl:element name="input">
<xsl:attribute name="type">text</xsl:attribute>
<xsl:attribute name="name">nameField</xsl:attribute>
<xsl:attribute name="size">20</xsl:attribute>
</xsl:element>
<br/>

Address: 
<xsl:element name="input">
<xsl:attribute name="type">textarea</xsl:attribute>
<xsl:attribute name="name">addressArea</xsl:attribute>
<xsl:attribute name="rows">20</xsl:attribute>
<xsl:attribute name="cols">20</xsl:attribute>
</xsl:element>
<br/>

<xsl:element name="input">
<xsl:attribute name="type">submit</xsl:attribute>
<xsl:attribute name="name">submitButton</xsl:attribute>
<xsl:attribute name="value">Submit</xsl:attribute>
</xsl:element>

</form>

</xsl:template>

XSL Stylesheet: Incorporating Data from XML

The preceding example is important in that it illustrates how an HTML element, such as an input item from a form, can be constructed from its components through an XSL specification.  However, it did not do anything interesting since all of the actual information was specified literally.  

A more realistic scenario is that the original XML document that is to be formatted includes essential information about the form that is to dynamically incorporated into the form through the XSL stylesheet.  To Illustrate this, we must first modify the XML document and then the XSL stylesheet.

XML Document

<?xml version="1.0"?>

<basic_form>

<item>
<item_label>Name</item_label>
<item_type>text</item_type>
<item_name>nameField</item_name>
</item>

<item>
<item_label>Address</item_label>
<item_type>textarea</item_type>
<item_name>addressArea</item_name>
</item>

<item>
<item_label></item_label>
<item_type>submit</item_type>
<item_name>submitButton</item_name>
<item_value>Submit</item_value>
</item>

</basic_form>

XSL Stylesheet

To process the information included in this XML stylesheet -- which includes the label of the field, the type of form field, its name, and a possible value -- the following stylesheet can be used.  Note: only the basic_form and a new template, item, are shown.

<xsl:template match="basic_form">

<form method="POST" action="http://wwwj.cs.unc.edu:8888/servlet/jbsGetPostEcho">

<xsl:apply-templates select="item"/>

</form>

</xsl:template>


<!-- ********************************* -->

<xsl:template match="item">

<xsl:value-of select="item_label"/>: 
<xsl:element name="input">
<xsl:attribute name="type"><xsl:value-of select="item_type"/></xsl:attribute>
<xsl:attribute name="name"><xsl:value-of select="item_name"/></xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="item_value"/></xsl:attribute>
</xsl:element>
<br/>

</xsl:template>