␡
- Before We Begin: Why Do We Need "Another" Forms Technology?
- XForms Demystified: What Is It?
- XHTML Example: What Does It Look Like Today?
- Enter XForms: What Will It Look Like?
- XForms: Where Do We Go from Here?
Like this article? We recommend
XHTML Example: What Does It Look Like Today?
The best way to understand XForms is to see what we would need to do with an existing web page in order to make it work in an XForms infrastructure. Consider the web-based form in XHTML shown in Figure 1.
Figure 1 A simple form in XHTML.
To represent this form in XHTML, we would use the following markup:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>Contact Information Form</title></head> <body> <form action="Contact.asp" method="post"> <table> <tr><td><label for="fname">First Name:</label></td> <td><input type="text" name="fname" id="fname"/></td></tr> <tr><td><label for="lname">Last Name:</label></td> <td><input type="text" name="lname" id="lname"/></td></tr> <tr><td><label for="dob">Date of Birth:</label></td> <td><input type="text" name="dob" id="dob"/></td></tr> <tr><td><p>Select Address Type:</p></td> <td> <label><input type="radio" name="adtype" value="Home"/>Home</label> <label><input type="radio" name="adtype" value="Work"/>Work</label> </td></tr> <tr><td><label for="address">Street Address:</label></td> <td><input type="text" name="address" id="address"/></td></tr> <tr><td><label for="city">City:</label></td> <td><input type="text" name="city" id="city"/></td></tr> <tr><td><label for="state">State:</label></td> <td><input type="text" name="state" id="state"/></td></tr> <tr><td><label for="zip">Zip/Postal Code:</label></td> <td><input type="text" name="zip" id="zip"/></td></tr> <tr><td><label for="country">Country:</label></td> <td><select name="country" id="country"> <option value="US">United States</option> <option value="CA">Canada</option> <option value="OT">Other</option> </select></td></tr> <tr><td colspan="2"><input type="submit"/></td></tr> </table> </form></body></html>