XForms in XHTML

An HTML Form Example

Take a look at this HTML document containing an HTML form:

<html>
<body>
<form action="payment.asp" method="post">

<p><b>Select Payment Method</b></p>

<p>
Cash
<input type="radio" name="as" value="cash">
Credit Card
<input type="radio" name="as" value="credit" checked>
</p>

<p>Card Number:<br />
<input type="text" id="cc"></p>

<p>Expiration Date:<br />
<input type="text" name="exp"></p>

<p><input type="submit"></p>

</form>
</body>
</html>

The HTML page will display much like this:

The Same Example Using XForms

This example is a simplified XForms version of the HTML example above:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xform="http://www.w3.org/2001/08/xforms">

<head>

<xform:xform id="payment">
<xform:submitInfo action="submit.asp" method="post"/>
</xform:xform>

<xform:instance>.....</xform:instance>
<xform:model>........</xform:model>
<xform:bindings>.....</xform:bindings>

</head>

<body>

<xform:selectOne xform="payment" ref="as" >
  <xform:caption>Select Payment Method</xform:caption>
  <xform:choices>
    <xform:item value="cash">
    <xform:caption>Cash</xform:caption></xform:item>
    <xform:item value="credit">
    <xform:caption>Credit</xform:caption></xform:item>
  </xform:choices>
</xform:selectOne>

<xform:input xform="payment" ref="cc">
  <xform:caption>Credit Card Number</xform:caption>
</xform:input>

<xform:input xform="payment" ref="exp">
  <xform:caption>Expiration Date</xform:caption>
</xform:input>

<xform:submit xform="payment">
  <xform:caption>Submit</xform:caption>
</xform:submit>

</body>
</html>

Complicated? Yes, but a lot more functional and device independent.

Form Controls

XForms use XForms controls to control its user interface. The form controls are located in the body section of the XHTML document.

In the example above there are four XForms controls:

one <xform:selectOne> control
two <xform:input> controls
one <xform:submit> control

Notice that the XForms controls are not child elements of a <form> element. Instead the xform="payment" attribute identifies which form the form control binds to.

Also notice that each XForms control has a caption element directly associated with them as a child element: <xform:caption>, and that the user interface is not hard-coded. Different browsers can render and display the <xform:selectOne> element to use radio buttons or not.

XForms Elements in the Head Section

Note that an <xform:xform> element in the <head> section of the XHTML document defines the submit information for the XForms controls.

The example above is very simplified. Normally the <head> element of the XHTML document will also contain information about

Instance Data <xform:instance>
Data Model <xform:model>
Data Bindings <xform:bindings>

These subjects are covered in later chapters of this tutorial. As a preview take a look at these data model elements:

<money name="price" currency="usd"/>
<string name="country" default="Norway"/>
<string name="phone" pattern="\d*-\d*-\d*"/>
<number name="age" min="16"/>

The XForms Processor

An XForms Processor built into the browser will be responsible for submitting the XForms data to a target (like a Web page).

The data will be submitted as XML and will look much like this:

<envelope>
  <body>
    <as>Credit</as>
    <cc>1235467789012345</cc>
    <exp>2001-08</exp>
  </body>
</envelope>

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

How we converted to XHTML

Password Protect
Your Web Pages

Your own Web Site?

Read W3Schools
Hosting Tutorial

$15 Domain Name
Registration
Save $20 / year!

Advertise
at W3Schools

Only 0.5 CPM

SELECTED LINKS

University Online
Master Degree
Bachelor Degree

Web Software

The Future of
Web Development

Jobs and Careers

Web Security
Web Statistics
Web Standards

PARTNERS

W3Schools
TopXML
VisualBuilder
XMLPitstop
DevelopersDex
DevGuru
Programmers Heaven
The Code Project
Tek Tips Forum
ZVON.ORG
TopXML Search