Adding in the Contact Information Form using XHTML FML

an article added by: Albert Lichtblau at 06022007


In: Root » » HTML XHTML and CSS » Adding in the Contact Information Form using XHTML FML

French Spanish Portuguese Italian German Japanese Chinese Korean Russian Arabic

Adding in the Contact Information Form But wait...you're not quite finished with your full order form. You still need to add in your contact information form to make sure users get the items they've purchased. After the final </x:insert>, but before the </x:toggle>, you need to add a <x:tg> (toggle group) element. Then open up contactform.xhtml and paste it under the new <x:tg> element. Add a </x:tg> element at the end and check its well-formedness and validity.

Note Paste only the FML between the <x:form> and </x:form> elements. Make sure you do not paste the <x:form> element itself. Take the id and action attributes from the contact information form <x:form> element and add them to the <x:form> element in the shopping cart FML page. When all is said and done, you should have a page that looks something like this:

   <?xml version="1.0"?>
   <!DOCTYPE html PUBLIC  "-//OVERFLOW//DTD XHTML-FML 1.0//EN"
   "http://www.mozquito.org/dtd/xhtml-fml1.dtd">
   <html  xmlns="http://www.w3.org/1999/xhtml"  xmlns:x="http://www.mozquito.org/xhtml-fml">
   <head>
   <title>Untitled</title>
   <meta name="generator"  content="Mozquito Factory 1.2" />
   </head>
   <body>
   <x:template  id="item">
   <h1>|item|</h1>
   <table  style="border-color:blue" border="2"  bgcolor="lightblue" cellpadding="10" width="85%"
   align="center">
   <tr>
   <td>
   |item| &nbsp;<br  /><x:img src="|image|" alt="|item|" width="50"  height="50" preload="yes" />
   </td>
   <td>
   |description|
   </td>
   <td>
   <x:toggle id="editamount"  shared="yes">
   <x:pulldown id="amount"  send="yes">
   <x:option  value="0">0</x:option>
   <x:option  value="1">1</x:option>
   <x:option  value="2">2</x:option>
   <x:option  value="3">3</x:option>
   <x:option  value="4">4</x:option>
   <x:option  value="5">5</x:option>
   <x:option value="6"  onclick="toggle:editamount">More</x:option>
   </x:pulldown>
   <x:textinput size="5"  id="more" onchange="toggle:editamount"  ctype="num" validation="strict" />
   </x:toggle>
   </td>
   <td>
   <x:textoutput id="price"  value="|cost|" send="yes" /> PP
   </td>
   <td>
   <x:calc id="total"  term="amount * price" send="yes" digits="2">
   <x:textoutput />
   </x:calc> PP
   </td>
   </tr>
   </table>
   </x:template>
   <x:form id="contactform" action="http://www.mozquito.org/servlets/Echo">
   <p>&nbsp;</p>
   <table bgcolor="lightblue"  style="border-color:blue" border="2">
   <tr>
   <td colspan="2"  align="center">Key</td>
   </tr>
   <tr>
   <th>Dollars</th><th>Coins</th>
   </tr>
   <tr>
   <td>$1</td><td>Copper Pieces  (CP)</td>
   </tr>
   <tr>
   <td>$10</td><td>Silver Pieces  (SP)</td>
   </tr>
   <tr>
   <td>$100</td><td>Gold Pieces  (GP)</td>
   </tr>
   <tr>
   <td>$1000</td><td>Platinum  Pieces (PP)</td>
   </tr>
   </table>
   <p>&nbsp;</p>
   <x:toggle id="navigate">
   <x:insert id="eq1"  template="item">
   <x:prop  name="cost">10000.00</x:prop>
   <x:prop name="item">Fiery  Avenger</x:prop>
   <x:prop name="description">A  powerful magic sword with a burning flame for a blade</x:prop>
   <x:prop  name="image">http://www.eqmaps.com/itemicons/2hslash003.jpg</x:prop>
   </x:insert>
   <x:insert id="eq2"  template="item">
   <x:prop  name="cost">1.60</x:prop>
   <x:prop name="item">Honey  Mead</x:prop>
   <x:prop name="description">Made  with the best Royal Jelly (Wasp Honey)</x:prop>
   <x:prop  name="image">http://www.eqmaps.com/itemicons/potion001.jpg</x:prop>
   </x:insert>
   <x:tg>
   <h1 align="center">Contact  Information</h1>
   <table border="0"  align="center" cellpadding="7">
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td colspan="3"><x:textinput  id="name" size="30" send="yes"  mandatory="yes" /><br />
   <div align="left"><x:label  for="name">Name</x:label></div>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:textinput id="address1"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="address1">Address</x:label>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:textinput id="address2"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label for="address2">Address  2</x:label>
   </td>
   </tr>
   <tr>
   <td>
   <x:textinput id="city"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label  for="city">City</x:label>
   </td>
   <td>
   <x:textinput id="state"  size="2" send="yes" mandatory="yes" />, <br  />
   <x:label  for="state">State</x:label>
   </td>
   <td>
   <x:textinput id="postal"  size="10" send="yes" mandatory="yes" /><br  />
   <x:label for="postal">Postal  Code</x:label>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:toggle id="editlist"  shared="yes">
   <x:pulldown id="countries"  send="yes" mandatory="yes">
   <x:option>Make your  choice:</x:option>
   <x:option  value="Canada">Canada</x:option>
   <x:option  value="France">France</x:option>
   <x:option  value="Germany">Germany</x:option>
   <x:option  value="Italy">Italy</x:option>
   <x:option  value="Japan">Japan</x:option>
   <x:option  value="Russia">Russia</x:option>
   <x:option value="United  Kingdom">United Kingdom</x:option>
   <x:option value="United  States">United States</x:option>
   <x:option value="Other: "  onclick="toggle:editlist">Other</x:option>
   </x:pulldown>
   <x:textinput id="another"  size="15" onchange="toggle:editlist" />
   </x:toggle><br />
   <x:label  for="countries">Country</x:label>
   </td>
   </tr>
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td>
   <x:textinput id="phone"  size="30" send="yes" mandatory="yes" /><br  />
   <x:label for="phone">Phone  Number</x:label>
   </td>
   </tr>
   <tr>
   <td>
   <x:textinput id="email"  size="30" ctype="email" validation="strict"  send="yes" mandatory="yes" /><br />
   <x:label for="email">E-Mail</x:label>
   </td>
   </tr>
   <tr><td  colspan="3">&nbsp;</td></tr>
   <tr>
   <td colspan="3">
   <p><strong>What is your <x:label  for="gender">gender</x:label>:</strong><br />
   <x:radio id="gender"  send="yes">
   <x:item  value="Male">Male</x:item>
   <x:item value="Female">Female</x:item>
   <x:item  value="Other">Other</x:item>
   </x:radio>
   </p>
   </td>
   </tr>
   <tr>
   <td colspan="3">
   <x:label  for="comments">Comments</x:label>:<br />
   <x:textarea id="comments"  rows="5" cols="25" send="yes"  mandatory="no" />
   <p><x:button value="Submit"  onclick="submit:contactform" /></p>
   </td>
   </tr>
   </table>
   </x:tg>
   </x:toggle>
   <table style="border-color:blue"  border="2" bgcolor="lightblue" cellpadding="10"  width="85%"
   align="center">
   <tr>
   <td colspan="5">
   <strong>Total:
   <x:calc id="grandtotal" term="eq1.total  + eq2.total" digits="2">
   <x:textoutput />
   </x:calc>
   </strong>
   </td>
   <p align="center">
   <x:button value="Back"  onclick="toggle:navigate,-" />
   <x:button  value="Forward" onclick="toggle:navigate,+" />
   </p>
   </x:form>
   </body>
 </html>

And that...as they say...is a wrap.

legal disclaimer

Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.

related articles

1. HTML and XHTML Application Possibilities
Overview Shifting from HTML to XHTML requires a significant change in mindset from the design-oriented freefor- all that characterized the early years of the Web. This change in style reflects movement in the underlying architecture toward a more powerful and more controllable approach to document creation, presentation, and management. Understanding the connections between the architectural and stylistic changes may help you find more immediate benefits from XHTML –...

2. Coding Styles HTMLs Maximum Flexibility
The XHTML 1.0 specification provides a set of rules for XHTML (User Agent Conformance) that includes a rough description of how XHTML software differs from HTML software, though these rules exist mostly to bring XHTML rendering practice in line with the rules for parsing XML 1.0. XHTML also is designed to remain compatible (mostly) with the previous generation of HTML applications, so it may take a while for the transition to occur. Pure XHTML user agents (also known as XHTML processing software) aren't l...

3. XML and XHTMLs Maximum Structure
Coding Styles— XML and XHTML's Maximum Structure Overview XML parsers are far more brutal about rejecting documents they don't like than are HTML browsers. XML's clear focus on structure demands that the practices described in the previous chapter must change. However, most of those changes shouldn't cause more than minor inconveniences – at least for newly created documents. Note If reading this chapt...

4. XML and CDATA
Processing instructions XML also enables developers to pass information to the application through processing instructions (often called PIs). Processing instructions use a similar syntax to the XML declaration, although the rules for them are much less strict. Processing instructions begin with <? and end with ?>, but the developer generally dictates their contents. The first bit of text before a space appears in a PI is called the target. The target must start with a letter, unde...

5. lang Internationalization
Internationalization: xml:lang and lang Internationalization (often abbreviated i18n because 18 characters appear between the i and the n) gets a significant boost with the shift to XML primarily because of XML's use of Unicode as the underlying character model. While not every document needs to encode Chinese, Cyrillic, Arabic, and Indian characters, Unicode makes it possible for all of these forms to exist within a single document. In addition, XML and XHTML allow for the possibility of other e...

6. Anatomy of an XHTML Document
The transition from HTML to XHTML will come with a fair number of bumps. While later chapters introduce tools to help you get past those bumps – and figure out where they come from – this chapter examines what's going to change and demonstrates a few strategies for handling those changes. Along the way, we visit the ghosts of browsers past and explore problems that exist in current browsers. In turn, you discover how prepared and unprepared various tools are for XHTML. Note Som...

7. Converting to strict HTML and XHTML
Converting to strict HTML You start out by declaring your intentions to use the strict HTML 4.01 DTD by putting the appropriate DOCTYPE declaration at the head of the document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Now the first section of the document, including the HTML opening tag and the HEAD element and its contents, is fine except for one line. The SCRIPT element no longer supports a LANGUAGE at...