<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:my="http://example.info">
<head>
<title>XForms sample</title>
<style type="text/css">
body { padding: 1em; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
label { margin: 0px 0px 2px -2px; font-weight: normal; }
div.form {
padding: 0.5em 1em 1em 1em;
margin: 0.5em 1em 1em 1em;
background-color: #ffffef;
border: 2px outset white;
}
input::value, secret::value, textarea::value {
padding: 2px;
}
::value, ::choices {
margin-bottom: 6px;
background-color: #fefefe;
color: #333;
}
::choices {
width: 50px;
padding: 0 0 0 3;
}
output::value {
margin: 0;
color: black;
background-color: transparent;
}
submit {
width: 75px;
background-color: #e4e4e4;
padding: 1px;
}
submit label {
font-weight: bold;
padding: 1px;
margin: 1px;
}
group {
border: none;
margin-top: 0;
padding-top: 0;
}
span {
font-family: "Courier New";
font-size: 9pt;
}
</style>
<xf:model>
<xf:instance>
<employee xmlns="http://example.info">
<name title="Mr.">Roy G. Biv</name>
<email>rgb@example.info</email>
<password>Password</password>
<address>711 S. Park St.</address>
<whuffie>32</whuffie>
<picture></picture>
</employee>
</xf:instance>
</xf:model>
<xf:model id="dyndata">
<xf:instance>
<dyndata xmlns="http://example.info">
<titles>
<title>Mr.</title>
<title>Mrs.</title>
</titles>
</dyndata>
</xf:instance>
<xf:submission action="instance.xml" id="submit1" method="post" replace="instance" />
</xf:model>
</head>
<body>
<h5>Form controls in XForms</h5>
<div class="form">
<xf:select1 ref="/my:employee/my:name/@title">
<xf:label>Title: <span><select1>, <itemset> (see source)</span></xf:label>
<xf:itemset model="dyndata" nodeset="/my:dyndata/my:titles/my:title">
<xf:label ref="text()" />
<xf:value ref="text()" />
</xf:itemset>
</xf:select1>
<xf:input ref="/my:employee/my:name">
<xf:label>Name: <span><input></span></xf:label>
</xf:input>
<xf:secret ref="/my:employee/my:password">
<xf:label>Password: <span><secret></span></xf:label>
</xf:secret>
<xf:textarea ref="/my:employee/my:address">
<xf:label>Address: <span><textarea></span>, auto height, try newlines</xf:label>
</xf:textarea>
<xf:range ref="/my:employee/my:whuffie">
<xf:label>Range: <span><range></span></xf:label>
</xf:range>
<xf:upload ref="/my:employee/my:picture">
<xf:label>Picture: <span><upload></span></xf:label>
</xf:upload>
<xf:trigger>
<xf:label>Push Me <span><trigger></span></xf:label>
</xf:trigger>
</div>
<h5>Instance data:</h5>
<xf:group ref="/my:employee">
<xf:output ref="my:name/@title" />
<xf:output ref="my:name" />
<xf:output ref="my:password" />
<xf:output ref="my:address" />
</xf:group>
</body>
</html>