Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
Like this article? We recommend

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>
  • + Share This
  • 🔖 Save To Your Account