以下内容引自： http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html
XForms for HTML Authors
Steven Pemberton , W3C/CWI
Version date: 28 October 2003
Introduction
XForms is the new markup language for forms on the Web. This document is a quick introduction to XForms for HTML Forms authors. It shows you how to convert existing forms to their XForms equivalent. It assumes knowledge of HTML Forms, so is not a beginner's tutorial. Although there is mention of additional facilities of XForms beyond those possible in HTML Forms (marked with an asterisk on the headings), it is not a full tutorial on all features of XForms.
Table of Contents
- A Simple Search Form
Namespace Prefixes - Forms Controls
Simple Text Input
Textarea
Radio Buttons
Checkboxes
Menus
File Select
Passwords
Buttons
Image Buttons
Reset
Optgroup
Grouping Controls
Output Controls *
Range Controls *
Hidden Controls - Submitted Values
Making the Submitted Values Explicit
Initial Values
Hidden Values
Getting Initial Values From Elsewhere *
'Editing' any XML document * - Submitting
Multiple Submissions *
Submission Methods
Life after Submit * - Controlling Controls
Disabled Controls
Readonly Controls
Required Controls *
Constraint Property *
Calculate Property *
Types *
Combining Properties * - More than One Form in a Document
Bind instead of Ref - Features Not Handled Here
*Features not present in HTML Forms
A Simple Search Form
Take this simple HTML form:
1<html>
2<head><title>Search</title></head>
3<body>
4<form action="http://andsky.com/search" method="get">
5 Find <input name="q" type="text"/>
6<input type="submit" value="Go"/>
7</form>
8</body>
9</html>
The main difference in XForms is that details of the values collected and how to submit them are gathered in the head, in an element called model ; only the form controls are put in the body. So in this case the minimum you need to put in the head is:
1<model>
2<submission action="http://andsky.com/search" id="s" method="get"></submission>
3</model>
(Elements and attributes in XForms are in lower case.)
The `
1<form> ` element is now no longer needed; the controls in the body look like this:
2
3
4 <input ref="q"/><label>Find</label>
5<submit submission="s"><label>Go</label></submit>
6
7What you can hopefully work out from this is that form controls have a ` <label> ` element as child, the ` <input/> ` uses " ` ref ` " instead of " ` name ` ", and there is a separate ` submit ` control that links to the details of the submission in the head. So the complete example is:
8
9
10 <h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml">
11<h:head>
12<h:title>Search</h:title>
13 **< model>
14 <submission action="http://andsky.com/search" id="s" method="get"></submission>
15**
16 </h:head>
17<h:body>
18<h:p>
19 **< input ref="q"><label>Find</label>** ****** <submit submission="s"><label>Go</label></submit>**
20 </h:p>
21</h:body>
22</h:html>
23
24### Namespace Prefixes
25
26Another obvious difference is the use of ` h: ` prefixes on the HTML elements. This has nothing to do with XForms, but with XML which is designed to allow you to combine different languages together. XForms is designed to be combined with different languages, not just XHTML. XML processors need to be told which language different elements belong to, though one language may be the 'default' language. In the above document, XForms has been made the default, though XHTML could have been made the default by changing the ` xmlns ` attributes in the head:
27
28
29 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.w3.org/2002/xforms">
30<head>
31<title>Search</title>
32 **< f:model>
33 <f:submission action="http://andsky.com/search" id="s" method="get"></f:submission>
34**
35 </head>
36<body>
37<p>
38 **< f:input ref="q"><f:label>Find</f:label>** ****** <f:submit submission="s"><f:label>Go</f:label></f:submit>**
39 </p>
40</body>
41</html>
42
43The choice is yours. You can also choose to make neither the default, and prefix all elements. You can choose any prefix; ` h: ` or ` x: ` or ` html: ` or ` form: ` , it's up to you.
44
45In the future, XHTML2 will allow you to write forms without prefixes.
46
47## Forms Controls
48
49XForms provides equivalents of all HTML Form controls. But there is a major difference in approach: HTML mainly specifies how the control should _look_ , while XForms specifies what the control should _do_ . So while the HTML specification says that the ` select ` element creates a menu, and the ` radio ` type of ` input ` creates radio buttons that allow a single choice to be made, XForms has the ` select ` and ` select1 ` elements, which only specify the intent of the controls, to select zero or more, or only one, element from a list. How they are presented to the user can vary across devices, or according to a style sheet. On a mobile telephone where screen space is scarce, both might be represented with menus, while on a larger screen both might be represented with selectable buttons. You are allowed to give a hint to what you want, or you may use a stylesheet to give precise styling, but if you don't, a device, or a style sheet, may make a choice for you.
50
51So here is how you write the equivalent of the HTML Forms controls.
52
53### Simple Text Input
54
55
56 First name: <input name="firstname" type="text"/>
57
58is written
59
60
61 <input ref="firstname"/><label>First name:</label>
62
63There is no need to indicate that it is text: in the absence of any other information, by default it is text (called ` string ` in XForms).
64
65See later under ' initial values ' for how to give any control an initial value.
66
67### Textarea
68
69
70 Message: <textarea cols="80" name="message" rows="20"></textarea>
71
72is written
73
74
75 <textarea ref="message"><label>Message:</label></textarea>
76
77Styling, such as the height and width here, is done using a style sheet. For instance, put this in your style sheet
78
79
80 textarea[ref="message"] { font-family: sans-serif;
81 height: 20em; width: 80em }
82
83Although this mimics the HTML behavior, there is no requirement that you use a sans serif font, nor that you specify the width in rows and columns like this: you could use lengths, or percentages, or whatever:
84
85
86 textarea[ref="message"] { font-family: serif;
87 height: 2cm; width: 20% }
88
89If you want all your textareas to have the same dimensions, you can use
90
91
92 textarea { font-family: sans-serif;
93 height: 20em; width: 80em }
94
95The easiest way to include a style sheet in your document is to add this at the beginning of the document:
96
97
98 <?xml version="1.0"?>
99 **<?xml-stylesheet href="**style.css **" type="text/css"? >**
100
101where 'style.css' is the name of your stylesheet.
102
103### Radio Buttons
104
105Radio buttons select one value from a number of alternatives:
106
107
108 Gender:
109 <input name="sex" type="radio" value="M"/> Male
110 <input name="sex" type="radio" value="F"/> Female
111
112becomes
113
114
115 <select1 ref="sex">
116<label>Gender:</label>
117<item>
118<label>Male</label><value>M</value>
119</item>
120<item>
121<label>Female</label><value>F</value>
122</item>
123</select1>
124
125Bear in mind that this may be presented as any one of radio buttons, a (scrollable) select area, or a menu. You may include a hint ` appearance="full" ` on the ` <select1> ` to suggest that it should be presented as radio buttons. (Use ` appearance="compact" ` to suggest a select area and ` appearance="minimal" ` to suggest a menu).
126
127The section on ' initial values ' later says how to preselect a value.
128
129### Checkboxes
130
131Checkboxes select zero or more from a list.
132
133
134 Flavors:
135 <input name="flavors" type="checkbox" value="v"/> Vanilla
136 <input name="flavors" type="checkbox" value="s"/> Strawberry
137 <input name="flavors" type="checkbox" value="c"/> Chocolate
138
139is written
140
141
142 <select appearance="full" ref="flavors">
143<label>Flavors:</label>
144<item>
145<label>Vanilla</label><value>v</value>
146</item>
147<item>
148<label>Strawberry</label><value>s</value>
149</item>
150<item>
151<label>Chocolate</label><value>c</value>
152</item>
153</select>
154
155The section on ' initial values ' says how to pre-check values.
156
157### Menus
158
159Depending on the presence of the ` multiple ` attribute in HTML, menus select one, or zero or more from a list of options. You either use ` <select1> ` to select a single choice, or ` <select> ` to select zero or more.
160
161
162 Month:
163 <select multiple="" name="spring">
164<option value="Mar">March</option>
165<option value="Apr">April</option>
166<option>May</option>
167</select>
168
169would be written:
170
171
172 <select appearance="minimal" ref="spring">
173<label>Month:</label>
174<item><label>March</label><value>Mar</value></item>
175<item><label>April</label><value>Apr</value></item>
176<item><label>May</label><value>May</value></item>
177</select>
178
179If ` multiple ` isn't present on the HTML ` select ` , then use ` select1 ` instead.
180
181The section on ' initial values ' says how to preselect values.
182
183### File Select
184
185
186 <form ...="" enctype="multipart/form-data" method="post">
187 ...
188 File: <input name="attachment" type="file"/>
189
190is written
191
192
193 <submission ...="" method="form-data-post"></submission>
194 ...
195 <upload ref="attachment"><label>File:</label></upload>
196
197### Passwords
198
199
200 Password: <input name="pw" type="password"/>
201
202is written
203
204
205 <secret ref="pw"><label>Password:</label></secret>
206
207### Reset
208
209Ten years of experience with HTML Forms has shown that hardly anyone actually uses reset buttons, and yet very many Web forms include them. A problem is that often the reset button with the text "Reset" is larger than the submission button that is often marked "OK", with the result that people accidently click on reset when they mean to click on OK, sometimes losing a lot of work (few if any browsers offer an undo). Therefore, while it is possible to create a reset button in XForms, it is deliberately harder to do, in order to discourage people unless they really want one:
210
211
212 <input type="reset"/>
213
214is therefore written
215
216
217 <trigger>
218<label>Clear all fields</label>
219<reset ev:event="DOMActivate"></reset>
220</trigger>
221
222### Buttons
223
224Buttons have no predefined behavior, but have a behavior attached to them which is triggered when a relevant event occurs.
225
226The button element
227
228
229 <input onclick="show()" type="button" value="Show"/>
230
231can be written
232
233
234 <trigger><label>Show</label>
235<h:script ev:event="DOMActivate" type="text/javascript">show()</h:script>
236</trigger>
237
238or
239
240
241 <trigger ev:event="DOMActivate" ev:handler="#show">
242<label>Show</label>
243</trigger>
244
245where " ` #show ` " locates the element (for instance a ` script ` element) that implements the behavior:
246
247
248 <script ...="" id="show"></script></form></select></select1></select1></label></form>