Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-accesskey-example.xml

Created February 11, 2014 04:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dmccreary/8929312 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dmccreary/8929312 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using the accesskey attribute within an XForms application. This allows user to use the "Alt" key to navigate directly to fields in form. Not all browsers support these features.
Raw
xforms-accesskey-example.xml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
<head>
<title>XForms Access Key Demonstration</title>
<xf:model>
<xf:instance xmlns="">
<data>
<first-name></first-name>
<last-name></last-name>
<addressline1></addressline1>
<addressline2></addressline2>
<city></city>
<state></state>
<zip></zip>
<phone></phone>
</data>
</xf:instance>
</xf:model>
<style type="text/css">
/* put the form background in a light color */
.address-form {
background-color:linen;
}
/* display each control on its own line with the label to the left */
.xforms-control {
display:block;
padding:5px;
}
/* right justify control labels in a fixed-width region */
.xforms-label {
display:inline-block;
width:19ex;
text-align:right;
font-weight:bold;
}
</style>
</head>
<body>
<p>Demo of the accesskey attribute that allows direct navigation to a specific control
within a form.</p>
<!-- Note that alt f will not work. It conflicts with the
Customize and control menu on Chrome and the File menu in IE.
I can not get this to work under FireFox without changing the ui.key.contentAccess to be 4 . -->
<div class="address-form span5">
<xf:input ref="first-name" accesskey="n">
<xf:label>First Name (alt n):</xf:label>
</xf:input>
<xf:input ref="last-name" accesskey="l">
<xf:label>Last Name (alt l):</xf:label>
</xf:input>
<xf:input ref="addressline1" accesskey="1">
<xf:label>Street Line 1 (alt 1):</xf:label>
</xf:input>
<xf:input ref="addressline2" accesskey="2">
<xf:label>Street Line 2 (alt 2):</xf:label>
</xf:input>
<xf:input ref="city" accesskey="c">
<xf:label>City (alt c):</xf:label>
</xf:input>
<xf:input ref="state" accesskey="s">
<xf:label>State (alt s):</xf:label>
</xf:input>
<xf:input ref="zip" accesskey="z">
<xf:label>Zip (alt z):</xf:label>
</xf:input>
<xf:input ref="phone" accesskey="p">
<xf:label>Phone (alt p):</xf:label>
</xf:input>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment