| 1 |
wakaba |
1.1 |
<!DOCTYPE html> |
| 2 |
|
|
<html lang="ja"> |
| 3 |
|
|
<head> |
| 4 |
|
|
<title>Web Forms 2.0 $BH?I|%U%)!<%`@)8f;R%b%G%k$N2r@b(B</title> |
| 5 |
|
|
<link rel="license" href="#license"> |
| 6 |
|
|
<link rel="stylesheet" href="http://suika.fam.cx/www/style/html/xhtml"> |
| 7 |
|
|
<style type="text/css"> |
| 8 |
|
|
:link { color: #00C; background: transparent } |
| 9 |
|
|
:visited { color: #609; background: transparent } |
| 10 |
|
|
:link:active, :visited:active { color: #C00; background: transparent } |
| 11 |
|
|
:link:hover, :visited:hover { background: #ffa; } |
| 12 |
|
|
code :link, code :visited { color: inherit; } |
| 13 |
|
|
|
| 14 |
|
|
p.copyright { |
| 15 |
|
|
font-size: x-small; |
| 16 |
|
|
font-style: oblique; |
| 17 |
|
|
margin: 0; |
| 18 |
|
|
} |
| 19 |
|
|
.translators-note { |
| 20 |
|
|
margin-left: 3em; |
| 21 |
|
|
margin-right: 3em; |
| 22 |
|
|
border: 0.5em blue solid; |
| 23 |
|
|
padding: 0.5em; |
| 24 |
|
|
} |
| 25 |
|
|
|
| 26 |
|
|
pre { |
| 27 |
|
|
margin-left: 4em; |
| 28 |
|
|
margin-top: 1em; |
| 29 |
|
|
margin-bottom: 1em; |
| 30 |
|
|
} |
| 31 |
|
|
pre strong { |
| 32 |
|
|
color: black; |
| 33 |
|
|
font: inherit; |
| 34 |
|
|
font-weight: bold; |
| 35 |
|
|
background: yellow; |
| 36 |
|
|
} |
| 37 |
|
|
pre em { |
| 38 |
|
|
font-weight: bolder; |
| 39 |
|
|
font-style: normal; |
| 40 |
|
|
} |
| 41 |
|
|
.note { |
| 42 |
|
|
color: green; |
| 43 |
|
|
background: transparent; |
| 44 |
|
|
font-family: sans-serif; |
| 45 |
|
|
font-weight: normal; |
| 46 |
|
|
font-style: normal; |
| 47 |
|
|
padding: 0.5em 2em; |
| 48 |
|
|
padding-right: 0; |
| 49 |
|
|
} |
| 50 |
|
|
.note p:first-child { |
| 51 |
|
|
margin-top: 0; |
| 52 |
|
|
} |
| 53 |
|
|
.note p:last-child { |
| 54 |
|
|
margin-bottom: 0; |
| 55 |
|
|
} |
| 56 |
|
|
p.note:before { |
| 57 |
|
|
content: "$BCm0U(B: "; |
| 58 |
|
|
font-weight: bolder; |
| 59 |
|
|
} |
| 60 |
|
|
|
| 61 |
|
|
.example { |
| 62 |
|
|
display: block; |
| 63 |
|
|
color: #222222; |
| 64 |
|
|
background: #FCFCFC; |
| 65 |
|
|
border-style: none; |
| 66 |
|
|
border-left: double; |
| 67 |
|
|
margin-left: 1em; |
| 68 |
|
|
padding-left: 1em; |
| 69 |
|
|
} |
| 70 |
|
|
</style> |
| 71 |
|
|
</head> |
| 72 |
|
|
<body> |
| 73 |
|
|
<h1>Web Forms 2.0 $B$N2r@b(B</h1> |
| 74 |
|
|
|
| 75 |
|
|
<div class="section"> |
| 76 |
|
|
<h2>$BH?I|%U%)!<%`@)8f;R%b%G%k(B</h2> |
| 77 |
|
|
|
| 78 |
|
|
<div class="translators-note"> |
| 79 |
|
|
<p>$B$3$NJ8=q$O!"(B <a href="http://www.whatwg.org/specs/web-forms/current-work/" |
| 80 |
|
|
lang="en">Web Forms 2.0</a> $B$N(B2006$BG/(B9$B7n(B26$BF|:n6H860FCf$N2r@b$N0lIt$rF|K\8l$KK]Lu$7$?$b$N$G$9!#(B</p> |
| 81 |
|
|
|
| 82 |
|
|
<div id="license" lang="en"> |
| 83 |
|
|
<p class="copyright">© Copyright 2004, 2005 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA.</p> |
| 84 |
|
|
|
| 85 |
|
|
<p class="copyright">You are granted a license to use, reproduce and create derivative works of this document.</p> |
| 86 |
|
|
</div> |
| 87 |
|
|
</div> |
| 88 |
|
|
|
| 89 |
|
|
<div class="section"> |
| 90 |
|
|
<h3 id="introduction1"><span class="secno">3.1. </span><!--Introduction for |
| 91 |
|
|
authors-->$BCx<T$X$NF3F~(B</h3> |
| 92 |
|
|
|
| 93 |
|
|
<p><em><!--This subsection is not normative.-->$B$3$N@a$O5,Dj$N0lIt$G$O$"$j$^$;$s!#(B</em> |
| 94 |
|
|
|
| 95 |
|
|
<p><!--Occasionally, a form may need a section to be repeated an arbitrary |
| 96 |
|
|
number of times. For example, an order form could have one row per item. |
| 97 |
|
|
Traditionally, this has been implemented either by using complex |
| 98 |
|
|
client-side scripts or by sending a request to the server for every new |
| 99 |
|
|
row.-->$B$?$^$K!"%U%)!<%`$N0lIt$rG$0U$N2s?t7+$jJV$7$?$$$3$H$,$"$j$^$9!#(B |
| 100 |
|
|
$BNc$($P!"CmJ8%U%)!<%`$G$O9`L\$4$H$K(B1$B9T$H$7$?$$$G$7$g$&!#(B |
| 101 |
|
|
$B$3$l$^$G$O!"J#;($J%/%i%$%"%s%HB&%9%/%j%W%H$r;H$&$+!"(B |
| 102 |
|
|
$B?7$7$$9T$rDI2C$9$k$4$H$K;*$KMW5a$rAw?.$9$k$+$K$h$j<BAu$7$F$-$^$7$?!#(B</p> |
| 103 |
|
|
|
| 104 |
|
|
<p><!--Using the mechanisms described in this section, the problem is reduced |
| 105 |
|
|
to describing a template in the markup, and then specifying where and when |
| 106 |
|
|
that template should be repeated.-->$B$3$NLdBj$O!"(B |
| 107 |
|
|
$B$3$N>O$G@bL@$9$k;EAH$_$r;H$&$3$H$G4JC1$K$J$j!"(B |
| 108 |
|
|
$B?w7A$r%^!<%/$7!"$$$D$I$3$G$3$N?w7A$r7+$jJV$9$N$+$r;XDj$9$k$@$1$G$h$/$J$j$^$9!#(B</p> |
| 109 |
|
|
|
| 110 |
|
|
<p><!--To explain this, we will step through an example. Here is a sample form |
| 111 |
|
|
with three rows:-->$B=g$rDI$C$FNc$r8+$F$$$-$^$7$g$&!#(B |
| 112 |
|
|
$B<!$K<($9$N$O!"(B3$B9T$N%U%)!<%`Nc$G$9!#(B</p> |
| 113 |
|
|
|
| 114 |
|
|
<pre class="HTML"><code><!DOCTYPE html> |
| 115 |
|
|
<html> |
| 116 |
|
|
<head> |
| 117 |
|
|
|
| 118 |
|
|
<title><!--Sample Order Form-->$BCmJ8%U%)!<%`Nc(B</title> |
| 119 |
|
|
</head> |
| 120 |
|
|
<body> |
| 121 |
|
|
<form> |
| 122 |
|
|
<table> |
| 123 |
|
|
<tr> |
| 124 |
|
|
<th><!--Product-->$BIJL>(B</th> |
| 125 |
|
|
<th><!--Quantity-->$B?tNL(B</th> |
| 126 |
|
|
</tr> |
| 127 |
|
|
<tr> |
| 128 |
|
|
<td><input type="text" name="row0.product" value=""></td> |
| 129 |
|
|
<td><input type="text" name="row0.quantity" value="1"></td> |
| 130 |
|
|
</tr> |
| 131 |
|
|
<tr> |
| 132 |
|
|
<td><input type="text" name="row1.product" value=""></td> |
| 133 |
|
|
<td><input type="text" name="row1.quantity" value="1"></td> |
| 134 |
|
|
</tr> |
| 135 |
|
|
<tr> |
| 136 |
|
|
<td><input type="text" name="row2.product" value=""></td> |
| 137 |
|
|
<td><input type="text" name="row2.quantity" value="1"></td> |
| 138 |
|
|
</tr> |
| 139 |
|
|
</table> |
| 140 |
|
|
<p><button type="submit"><!--Submit-->$BDs=P(B</button></p> |
| 141 |
|
|
</form> |
| 142 |
|
|
</body> |
| 143 |
|
|
</html> |
| 144 |
|
|
</code></pre> |
| 145 |
|
|
|
| 146 |
|
|
<p><!--The template for those rows could look something like:--> |
| 147 |
|
|
$B$3$N(B3$B9T$N?w7A$O!"<!$N$h$&$K$J$j$^$9!#(B</p> |
| 148 |
|
|
|
| 149 |
|
|
<pre class="HTML"><code> <tr> |
| 150 |
|
|
<td><input type="text" name="row0.product" value=""></td> |
| 151 |
|
|
<td><input type="text" name="row0.quantity" value="1"></td> |
| 152 |
|
|
</tr> |
| 153 |
|
|
</code></pre> |
| 154 |
|
|
|
| 155 |
|
|
<p><!--...except that then the names would all be the same — all rows |
| 156 |
|
|
would be "row0", so there would be no clear way of distinguishing which |
| 157 |
|
|
"quantity" went with which "product" except by the order in which they |
| 158 |
|
|
were submitted.-->$B$?$@$7!"L>A0$O$9$Y$FF1$8$K$J$j$^$9!#(B |
| 159 |
|
|
$B$I$N9T$b(B <code lang="en">row0</code> $B$K$J$k$N$G!"(B |
| 160 |
|
|
$BDs=P;~$N=g=x$r$_$J$$$H$I$N(B <code lang="en">quantity</code> $B$,$I$N(B |
| 161 |
|
|
<code lang="en">product</code> $B$HBP1~$9$k$N$+$,ITL@3N$K$J$C$F$7$^$$$^$9!#(B</p> |
| 162 |
|
|
|
| 163 |
|
|
<p><!--To get around this, the template is modified slightly:-->$B$=$3$G!"(B |
| 164 |
|
|
$B?w7A$r<!$N$h$&$K=$@5$7$^$9!#(B</p> |
| 165 |
|
|
|
| 166 |
|
|
<pre class="HTML"><code> <tr <strong>id="order"</strong>> |
| 167 |
|
|
<td><input type="text" name="row<strong>[order]</strong>.product" value=""></td> |
| 168 |
|
|
<td><input type="text" name="row<strong>[order]</strong>.quantity" value="1"></td> |
| 169 |
|
|
</tr> |
| 170 |
|
|
</code></pre> |
| 171 |
|
|
|
| 172 |
|
|
<p><!--The template now has a unique identifier ("order"), and that identifier |
| 173 |
|
|
is used to indicate where the row index should be substituted in. When a |
| 174 |
|
|
template is replicated, all the attributes containing the template's id |
| 175 |
|
|
between square bracket characters (<code>[<var>id</var>]</code>) have that |
| 176 |
|
|
ID (and the brackets) replaced by a unique index.-->$B?w7A$K8GM-<1JL;R(B |
| 177 |
|
|
(<code lang="en">order</code>) $B$rM?$($^$7$?!#(B |
| 178 |
|
|
$B$3$N<1JL;R$O!"9T:w0zHV9f$rCV49$9$k$Y$->l=j$r<($9$?$a$K;H$$$^$9!#(B |
| 179 |
|
|
$B?w7A$,J#@=$5$l$k;~$K$O!";M3Q3g8L$G0O$C$??w7A$N<1JL;R(B |
| 180 |
|
|
(<code>[<var>$B<1JL;R(B</var>]</code>) $B$r4^$`B0@-$O$9$Y$F!"(B |
| 181 |
|
|
$B$=$N<1JL;R(B ($B$H3g8L(B) $B$,8GM-$N:w0zHV9f$GCV49$5$l$^$9!#(B</p> |
| 182 |
|
|
|
| 183 |
|
|
<p class="note"><!--To prevent an attribute from being processed in this way, |
| 184 |
|
|
put a non-breaking zero-width space character (<code>&#xFEFF;</code>) |
| 185 |
|
|
at the start of the attribute value. When the template is cloned, that |
| 186 |
|
|
character will be removed, but any other text in the attribute will be |
| 187 |
|
|
left alone. This could be useful if you have no control over the rest of |
| 188 |
|
|
the contents in the attribute, e.g. if it is user configurable text.--> |
| 189 |
|
|
$BB0@-$,$3$N$h$&$K=hM}$5$l$F$7$^$&$3$H$rKI$.$?$1$l$P!"(B |
| 190 |
|
|
$BB0@-CM$N@hF,$K(B <code class="charname" lang="en">NON-BREAKING |
| 191 |
|
|
ZERO-WIDTH SPACE</code> (<code class="HTML">&#xFEFF;</code>) |
| 192 |
|
|
$B$rF~$l$F$/$@$5$$!#?w7A$rJ#@=$9$k$H$-$K$3$NJ8;z$O:o=|$5$l!"(B |
| 193 |
|
|
$BB0@-CM$N;D$j$O$=$N$^$^J#@=$5$l$^$9!#$3$l$O!"(B |
| 194 |
|
|
$BNc$($PMxMQ<T$,JQ99$G$-$kJ8;zNs$N$h$&$K!"(B |
| 195 |
|
|
$BB0@-CM$NFbMF$N;D$j$NItJ,$rCx<T$,7h$a$i$l$J$$;~$KJXMx$G$7$g$&!#(B</p> |
| 196 |
|
|
|
| 197 |
|
|
<p><!--In order to distinguish this row from a normal row, something needs to |
| 198 |
|
|
be added to the template to mark it as being a template. This is done |
| 199 |
|
|
using a <span><code><a href="#repeat">repeat</a></code> attribute</span>:--> |
| 200 |
|
|
$B?w7A$N9T$rDL>o$N9T$H6hJL$9$k$?$a$K!"(B |
| 201 |
|
|
$B?w7A$O?w7A$G$"$k$H$$$&0u$r2C$($kI,MW$,$"$j$^$9!#(B |
| 202 |
|
|
$B$3$l$O(B <code class="HTMLa" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#repeat">repeat</a></code> |
| 203 |
|
|
$BB0@-$r;H$C$F9T$$$^$9!#(B</p> |
| 204 |
|
|
|
| 205 |
|
|
<pre class="HTML"><code> <tr id="order" <strong>repeat="template"</strong>> |
| 206 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 207 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 208 |
|
|
</tr> |
| 209 |
|
|
</code></pre> |
| 210 |
|
|
|
| 211 |
|
|
<p><!--Now we replace the table with that markup:-->$B$G$O!"(B |
| 212 |
|
|
$B$O$8$a$NI=$r$3$N%^!<%/$GCV$-49$($^$7$g$&!#(B</p> |
| 213 |
|
|
|
| 214 |
|
|
<pre class="HTML"><code><!DOCTYPE html> |
| 215 |
|
|
<html> |
| 216 |
|
|
<head> |
| 217 |
|
|
<title><!--Sample Order Form-->$BCmJ8%U%)!<%`Nc(B</title> |
| 218 |
|
|
</head> |
| 219 |
|
|
<body> |
| 220 |
|
|
<form> |
| 221 |
|
|
<table> |
| 222 |
|
|
<tr> |
| 223 |
|
|
<th><!--Product-->$BIJL>(B</th> |
| 224 |
|
|
<th><!--Quantity-->$B?tNL(B</th> |
| 225 |
|
|
</tr> |
| 226 |
|
|
<strong> <tr id="order" repeat="template"> |
| 227 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 228 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 229 |
|
|
</tr></strong> |
| 230 |
|
|
</table> |
| 231 |
|
|
<p><button type="submit"><!--Submit-->$BDs=P(B</button></p> |
| 232 |
|
|
</form> |
| 233 |
|
|
</body> |
| 234 |
|
|
</html> |
| 235 |
|
|
</code></pre> |
| 236 |
|
|
|
| 237 |
|
|
<p><!--This will make one row appear, because by default templates repeat |
| 238 |
|
|
themselves once. We can control how many times the template repeats itself |
| 239 |
|
|
using the <span><code><a href="#repeat-start">repeat-start</a></code> |
| 240 |
|
|
attribute</span>:-->$B?w7A$N7+$jJV$72s?t$N4{DjCM$O(B1$B$J$N$G!"(B |
| 241 |
|
|
1$B9T8=$l$k$3$H$K$J$j$^$9!#?w7A$r2?2s7+$jJV$9$+$O!"(B |
| 242 |
|
|
<code class="HTMLa" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#repeat-start">repeat-start</a></code> |
| 243 |
|
|
$BB0@-$G@)8f$G$-$^$9!#(B</p> |
| 244 |
|
|
|
| 245 |
|
|
<pre class="HTML"> <code><em>...</em> |
| 246 |
|
|
<tr id="order" repeat="template" <strong>repeat-start="3"</strong>> |
| 247 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 248 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 249 |
|
|
</tr> |
| 250 |
|
|
</table></code> |
| 251 |
|
|
</pre> |
| 252 |
|
|
|
| 253 |
|
|
<p><!--This is now identical to the original example (three rows with empty |
| 254 |
|
|
controls will appear). It still isn't dynamic — there is no way for |
| 255 |
|
|
the user to add more rows.-->$B$3$l$G$O$8$a$NNc(B |
| 256 |
|
|
(3$B9T$H6u$N@)8f;R(B) $B$HF1$8$K$J$j$^$7$?!#$7$+$7!"$3$l$O$^$@F0E*$G$O$"$j$^$;$s!#(B |
| 257 |
|
|
$BMxMQ<T$,99$K9T$rDI2C$9$kJ}K!$,$"$j$^$;$s!#(B</p> |
| 258 |
|
|
|
| 259 |
|
|
<p><!--This can be solved by adding an <code><a href="#add">add</a></code> |
| 260 |
|
|
button. The <code><a href="#add">add</a></code> button type adds a copy of |
| 261 |
|
|
a template when the user presses the button.-->$B$3$l$O(B |
| 262 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 263 |
|
|
$B%\%?%s$rDI2C$9$l$P2r7h$7$^$9!#(B |
| 264 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 265 |
|
|
$B%\%?%s7?$O!"MxMQ<T$,$=$N%\%?%s$r2!$9$H!"(B |
| 266 |
|
|
$B?w7A$NJ#@=$rDI2C$7$^$9!#(B</p> |
| 267 |
|
|
|
| 268 |
|
|
<p><!--There are two ways to use <code><a href="#add">add</a></code> buttons. |
| 269 |
|
|
The first is by explicitly specifying which template should be replicated:--> |
| 270 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 271 |
|
|
$B%\%?%s$K$O(B2$B<oN`$N;H$$J}$,$"$j$^$9!#(B1$B$DL\$O!"(B |
| 272 |
|
|
$B$I$N?w7A$rJ#@=$9$k$+$rL@<(E*$K;XDj$9$kJ}K!$G$9!#(B</p> |
| 273 |
|
|
|
| 274 |
|
|
<pre class="HTML"><code> <p><button type="add" <strong>template="order"</strong>><!--Add Row-->$B9T$rDI2C(B</button></p> |
| 275 |
|
|
</code></pre> |
| 276 |
|
|
|
| 277 |
|
|
<p><!--The template is specified using a <code><a |
| 278 |
|
|
href="#template">template</a></code> attribute on the <code>button |
| 279 |
|
|
type="add"</code> or <code>input type="add"</code> elements. In the |
| 280 |
|
|
<code><a href="#template">template</a></code> attribute, you put the ID of |
| 281 |
|
|
the template you want the button to affect.-->$B?w7A$O(B |
| 282 |
|
|
<code class="HTML" lang="en">button type="add"</code> $B$^$?$O(B |
| 283 |
|
|
<code class="HTML" lang="en">input type="add"</code> |
| 284 |
|
|
$B$NMWAG$N(B <code class="HTMLa" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#template">template</a></code> |
| 285 |
|
|
$BB0@-$r;H$C$F;XDj$7$^$9!#(B |
| 286 |
|
|
<code class="HTMLa" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#template">template</a></code> |
| 287 |
|
|
$BB0@-$K$O!"%\%?%s$GDI2C$7$?$$?w7A$N<1JL;R$rF~$l$^$9!#(B</p> |
| 288 |
|
|
|
| 289 |
|
|
<p><!--When such a button is pressed, the template is replicated, and the |
| 290 |
|
|
resulting block is inserted just after the last block that is associated |
| 291 |
|
|
with the template. For example, there are three rows in the example above, |
| 292 |
|
|
so if the user pressed that button, the new block would be inserted just |
| 293 |
|
|
after the third one.-->$B$3$N$h$&$J%\%?%s$r2!$9$H!"(B |
| 294 |
|
|
$B?w7A$,J#@=$5$l!"J#@=$5$l$F$G$-$?%V%m%C%/$,!"(B |
| 295 |
|
|
$B$=$N?w7A$K4XO"IU$1$i$l$?:G8e$N%V%m%C%/$ND>8e$KA^F~$5$l$^$9!#(B |
| 296 |
|
|
$BNc$($P!"@h$NNc$G(B3$B$D$N9T$,$"$k>uBV$G!"(B |
| 297 |
|
|
$BMxMQ<T$,$3$N%\%?%s$r2!$9$H!"(B |
| 298 |
|
|
$B?7$7$$%V%m%C%/$,(B3$B$DL\$N%V%m%C%/$ND>8e$KA^F~$5$l$^$9!#(B</p> |
| 299 |
|
|
|
| 300 |
|
|
<p><!--The second way is by including an <code><a href="#add">add</a></code> |
| 301 |
|
|
|
| 302 |
|
|
button inside the template, so that when the template is replicated, the |
| 303 |
|
|
button is replicated into the resulting block. When such a button is |
| 304 |
|
|
pressed, the template is replicated, and inserted immediately after the |
| 305 |
|
|
block in which the button is found. For example, if there were <code><a |
| 306 |
|
|
href="#add">add</a></code> buttons in the rows of the example above, and |
| 307 |
|
|
someone pressed the button in the first row, a row would be inserted |
| 308 |
|
|
between the first row and the second row.-->2$B$DL\$O!"(B |
| 309 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 310 |
|
|
$B%\%?%s$r?w7A$NCf$KCV$-!"(B |
| 311 |
|
|
$B$=$N?w7A$,J#@=$5$l$l$P%\%?%s$bJ#@=$5$l$?%V%m%C%/$NCf$KJ#@=$5$l$k$H$$$&J}K!$G$9!#(B |
| 312 |
|
|
$B$3$N<oN`$N%\%?%s$r2!$9$H!"?w7A$OJ#@=$5$l!"(B |
| 313 |
|
|
$B$=$N%\%?%s$,4^$^$l$k%V%m%C%/$ND>8e$KA^F~$5$l$^$9!#(B |
| 314 |
|
|
$BNc$($P!"@h$NNc$N3F9T$K(B |
| 315 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 316 |
|
|
$B%\%?%s$,$"$j!"C/$+$,:G=i$N9T$N%\%?%s$r2!$9$H!"(B |
| 317 |
|
|
$B:G=i$N9T$H(B2$B$DL\$N9T$N4V$K?7$7$$9T$,A^F~$5$l$^$9!#(B</p> |
| 318 |
|
|
|
| 319 |
|
|
<p><!--For this example we will only do it the first way:-->$B$3$NNc$G$O:G=i$NJ}K!$@$1$r;H$$$^$9!#(B</p> |
| 320 |
|
|
|
| 321 |
|
|
<pre class="HTML"><code><!DOCTYPE html> |
| 322 |
|
|
<html> |
| 323 |
|
|
<head> |
| 324 |
|
|
<title><!--Sample Order Form-->$BCmJ8%U%)!<%`Nc(B</title> |
| 325 |
|
|
</head> |
| 326 |
|
|
<body> |
| 327 |
|
|
<form> |
| 328 |
|
|
<table> |
| 329 |
|
|
<tr> |
| 330 |
|
|
<th><!--Product-->$BIJL>(B</th> |
| 331 |
|
|
<th><!--Quantity-->$B?tNL(B</th> |
| 332 |
|
|
</tr> |
| 333 |
|
|
<tr id="order" repeat="template" repeat-start="3"> |
| 334 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 335 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 336 |
|
|
</tr> |
| 337 |
|
|
</table> |
| 338 |
|
|
<strong> <p><button type="add" template="order"><!--Add Row-->$B9T$rDI2C(B</button></p></strong> |
| 339 |
|
|
<p><button type="submit"><!--Submit-->$BDs=P(B</button></p> |
| 340 |
|
|
</form> |
| 341 |
|
|
</body> |
| 342 |
|
|
</html> |
| 343 |
|
|
</code></pre> |
| 344 |
|
|
|
| 345 |
|
|
<p><!--Now the user can add more rows, but he cannot remove them. Removing rows |
| 346 |
|
|
is done via the <code><a href="#remove">remove</a></code> button type. |
| 347 |
|
|
When a user presses such a button, the row in which the button is kept is |
| 348 |
|
|
removed from the document.-->$B$3$l$GMxMQ<T$O9T$rDI2C$G$-$k$h$&$K$J$j$^$7$?$,!"(B |
| 349 |
|
|
$B:o=|$9$k$3$H$O$G$-$^$;$s!#9T$N:o=|$O(B |
| 350 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#remove">remove</a></code> |
| 351 |
|
|
$B%\%?%s7?$K$h$j9T$$$^$9!#MxMQ<T$,$3$N<oN`$N%\%?%s$r2!$9$H!"(B |
| 352 |
|
|
$B%\%?%s$,4^$^$l$k9T$,J8=q$+$i:o=|$5$l$^$9!#(B</p> |
| 353 |
|
|
|
| 354 |
|
|
<pre class="HTML"><code> <button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button> |
| 355 |
|
|
</code></pre> |
| 356 |
|
|
|
| 357 |
|
|
<p><!--This is added to the template so that it appears on every row:-->$B$3$l$r?w7A$KDI2C$9$l$P!"(B |
| 358 |
|
|
$B3F9T$K8=$l$k$h$&$K$J$j$^$9!#(B</p> |
| 359 |
|
|
|
| 360 |
|
|
<pre class="HTML"><code> <tr id="order" repeat="template" repeat-start="3"> |
| 361 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 362 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 363 |
|
|
<strong> <td><button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button></td></strong> |
| 364 |
|
|
</tr> |
| 365 |
|
|
</code></pre> |
| 366 |
|
|
|
| 367 |
|
|
<p><!--The final result looks like this:-->$B:G=*E*$K$3$N$h$&$K$J$j$^$9!#(B</p> |
| 368 |
|
|
|
| 369 |
|
|
<pre class="HTML"><code><!DOCTYPE html> |
| 370 |
|
|
<html> |
| 371 |
|
|
<head> |
| 372 |
|
|
<title><!--Sample Order Form-->$BCmJ8%U%)!<%`Nc(B</title> |
| 373 |
|
|
</head> |
| 374 |
|
|
<body> |
| 375 |
|
|
<form> |
| 376 |
|
|
<table> |
| 377 |
|
|
<tr> |
| 378 |
|
|
<th><!--Product-->$BIJL>(B</th> |
| 379 |
|
|
<th><!--Quantity-->$B?tNL(B</th> |
| 380 |
|
|
</tr> |
| 381 |
|
|
<tr id="order" repeat="template" repeat-start="3"> |
| 382 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 383 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 384 |
|
|
<td><button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button></td> |
| 385 |
|
|
</tr> |
| 386 |
|
|
</table> |
| 387 |
|
|
<p><button type="add" template="order"><!--Add Row-->$B9T$rDI2C(B</button></p> |
| 388 |
|
|
<p><button type="submit"><!--Submit-->$BDs=P(B</button></p> |
| 389 |
|
|
</form> |
| 390 |
|
|
</body> |
| 391 |
|
|
</html> |
| 392 |
|
|
</code></pre> |
| 393 |
|
|
|
| 394 |
|
|
<p><!--If the user pressed "Add" once, removed the middle two rows, typed in |
| 395 |
|
|
some garbage in the two "product" text controls, and pressed "Submit", the |
| 396 |
|
|
user agent would submit the following name-value pairs:-->$BMxMQ<T$,0lEY(B |
| 397 |
|
|
<q>$BDI2C(B</q>$B$r2!$7!"??$sCf$N(B2$B$D$N9T$r:o=|$7!"(B |
| 398 |
|
|
2$B$D$N(B<q>$BIJL>(B</q>$BMs$KE,Ev$KF~NO$7!"(B<q>$BDs=P(B</q>$B$r2!$9$H!"(B |
| 399 |
|
|
$BMxMQ<T%(!<%8%'%s%H$O<!$NL>A0$HCM$NAH$rDs=P$9$k$3$H$K$J$j$^$9!#(B</p> |
| 400 |
|
|
|
| 401 |
|
|
<pre lang="en"><code>row0.product=some |
| 402 |
|
|
row0.quantity=1 |
| 403 |
|
|
row3.product=garbage |
| 404 |
|
|
row3.quantity=1 |
| 405 |
|
|
</code></pre> |
| 406 |
|
|
|
| 407 |
|
|
<p><!--Further examples are given in the <a href="#repeatExamples">examples |
| 408 |
|
|
section</a> below.--><a href="#repeatExamples">$BNc$N@a(B</a>$B$K99$KNc$r<($7$^$9!#(B</p> |
| 409 |
|
|
|
| 410 |
|
|
<div class="section"> |
| 411 |
|
|
<h4 id="more-features"><span class="secno">3.1.1. </span><!--More features-->$B99$J$k5!G=(B</h4> |
| 412 |
|
|
|
| 413 |
|
|
<p><!--The repetition model supports more than just the cases given above; for |
| 414 |
|
|
instance, there are <code><a href="#move-up">move-up</a></code> and |
| 415 |
|
|
<code><a href="#move-down">move-down</a></code> buttons that can be |
| 416 |
|
|
inserted inside templates much like the <code><a |
| 417 |
|
|
href="#remove">remove</a></code> button but for moving rows up and down.-->$BH?I|%b%G%k$K$OB>$K$b5!G=$,$"$j$^$9!#(B |
| 418 |
|
|
$BNc$($P!"(B |
| 419 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#remove">remove</a></code> |
| 420 |
|
|
$B%\%?%s$HF1MM$K?w7AFb$KA^F~$7!"9T$r>e2<$K0\F0$5$;$k$3$H$,$G$-$k!"(B |
| 421 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#move-up">move-up</a></code> |
| 422 |
|
|
$B%\%?%s$H(B |
| 423 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#move-down">move-down</a></code> |
| 424 |
|
|
$B%\%?%s$,$"$j$^$9!#(B</p> |
| 425 |
|
|
|
| 426 |
|
|
<p><!--Repetition templates can also be nested. The concept of hierarchy is |
| 427 |
|
|
expected to be represented in the names, as it is in manually-created |
| 428 |
|
|
repeating forms; for example:-->$BH?I|?w7A$rF~$l;R$K$9$k$3$H$b$G$-$^$9!#(B |
| 429 |
|
|
$B<jF0$GH?I|%U%)!<%`$r:n@.$9$k>l9g$HF1$8$h$&$K!"(B |
| 430 |
|
|
$BL>A0$K3,AX$N35G0$r@9$j9~$`$3$H$rA[Dj$7$F$$$^$9!#Nc$($P!"(B</p> |
| 431 |
|
|
|
| 432 |
|
|
<pre lang="en"><code>order0.name |
| 433 |
|
|
order0.quantity |
| 434 |
|
|
order0.comment0.text |
| 435 |
|
|
order0.comment1.text |
| 436 |
|
|
order1.name |
| 437 |
|
|
order1.quantity |
| 438 |
|
|
order1.comment0.text |
| 439 |
|
|
</code></pre> |
| 440 |
|
|
|
| 441 |
|
|
<p><!--That way the submission can remain compatible with the long-established |
| 442 |
|
|
<code>multipart/form-data</code>, yet not lose the structure of the data.--> |
| 443 |
|
|
$B$3$NJ}K!$G!"%G!<%?$N9=B$$r<:$&$3$H$J$/!"D9$/;H$o$l$F$-$?(B |
| 444 |
|
|
<code class="MIME" lang="en">multipart/form-data</code> |
| 445 |
|
|
$B$H$N8_49@-$rJ]$AB3$1$k$3$H$,$G$-$^$9!#(B</p> |
| 446 |
|
|
|
| 447 |
|
|
<p class="note"><!--The naming schemes used above are arbitrary. Any naming |
| 448 |
|
|
scheme could be used, at the convenience of the author.-->$B$3$3$K<($7$?L?L>J}<0$OE,Ev$J$b$N$G$9!#(B |
| 449 |
|
|
$BCx<T$OET9g$,NI$$G$0U$NL?L>J}<0$r;H$&$3$H$,$G$-$^$9!#(B</p> |
| 450 |
|
|
</div> |
| 451 |
|
|
|
| 452 |
|
|
<div class="section"> |
| 453 |
|
|
<h4 id="suggestions"><span class="secno">3.1.2. </span><!--Suggestions for |
| 454 |
|
|
authors-->$BCx<T$X$NDs0F(B</h4> |
| 455 |
|
|
|
| 456 |
|
|
<p><!--To include prefilled rows in the document, include copies of the row |
| 457 |
|
|
with <code><a href="#repeat">repeat</a></code> attributes having the value |
| 458 |
|
|
of the repetition index you want to use for that block.-->$BJ8=qCf$KF~NO:Q$_$N9T$rA^F~$9$k;~$O!"(B |
| 459 |
|
|
$B$=$N%V%m%C%/$G;H$$$?$$H?I|:w0zHV9f$rCM$H$9$k(B |
| 460 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#repeat">repeat</a></code> |
| 461 |
|
|
$BB0@-$,$"$k9T$H$7$F$/$@$5$$!#(B</p> |
| 462 |
|
|
|
| 463 |
|
|
<div class="example"> |
| 464 |
|
|
<p><!--For example, here is a prefilled version of the earlier table, with one |
| 465 |
|
|
row having index "1" with the text "Tom figurine" in the first control |
| 466 |
|
|
and "12" in the second, and with a second row having index "2" and values |
| 467 |
|
|
"Jerry figurine" and "5".-->$BNc$($P!"@h$NI=$,M=$aKd$a$i$l$F$$$F!"(B |
| 468 |
|
|
$B:G=i$NNs$O:w0zHV9f$,(B <code>1</code> $B$G:G=i$N@)8f;R$,(B |
| 469 |
|
|
<q>$BB@O:A|(B</q>$B$G(B2$B$DL\$,(B <q>12</q>$B!"(B |
| 470 |
|
|
2$B$DL\$NNs$O:w0zHV9f$,(B <code>2</code> |
| 471 |
|
|
$B$GCM$,(B<q>$B2V;RA|(B</q>$B$H(B <q>5</q> $B$H$7$^$9!#(B</p> |
| 472 |
|
|
|
| 473 |
|
|
<pre lang="HTML"><code>... |
| 474 |
|
|
<table> |
| 475 |
|
|
<tr> |
| 476 |
|
|
<th><!--Product-->$BIJL>(B</th> |
| 477 |
|
|
<th><!--Quantity-->$B?tNL(B</th> |
| 478 |
|
|
</tr> |
| 479 |
|
|
<tr repeat="<strong>1</strong>"> |
| 480 |
|
|
<td><input type="text" name="row<strong>1</strong>.product" value="<!--Tom figurine-->$BB@O:A|(B"></td> |
| 481 |
|
|
<td><input type="text" name="row<strong>1</strong>.quantity" value="12"></td> |
| 482 |
|
|
<td><button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button></td> |
| 483 |
|
|
</tr> |
| 484 |
|
|
<tr repeat="2"> |
| 485 |
|
|
<td><input type="text" name="row2.product" value="<!--Jerry figurine-->$B2V;RA|(B"></td> |
| 486 |
|
|
<td><input type="text" name="row2.quantity" value="5"></td> |
| 487 |
|
|
<td><button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button></td> |
| 488 |
|
|
</tr> |
| 489 |
|
|
<tr id="order" repeat="template" repeat-start="1"> |
| 490 |
|
|
<td><input type="text" name="row[order].product" value=""></td> |
| 491 |
|
|
<td><input type="text" name="row[order].quantity" value="1"></td> |
| 492 |
|
|
<td><button type="remove"><!--Remove This Row-->$B$3$N9T$r:o=|(B</button></td> |
| 493 |
|
|
</tr> |
| 494 |
|
|
</table> |
| 495 |
|
|
...</code></pre> |
| 496 |
|
|
</div> |
| 497 |
|
|
|
| 498 |
|
|
<p><!--Prefilled rows must go <em>before</em> the template.-->$BF~NO:Q$_$N9T$O?w7A$N(B<em>$BA0(B</em>$B$K$J$1$l$P$J$j$^$;$s!#(B</p> |
| 499 |
|
|
|
| 500 |
|
|
<p><!--Prefilled rows can contain any content; it need not match the template. |
| 501 |
|
|
In order to be considered a part of the repetition model, however, the row |
| 502 |
|
|
must have a <code><a href="#repeat">repeat</a></code> attribute with a |
| 503 |
|
|
numeric value. That value can be any integer. (For example, you could use |
| 504 |
|
|
"-1" as the value of all prefilled rows.)-->$BF~NO:Q$_$N9T$O!"(B |
| 505 |
|
|
$B$I$s$JFbMF$r4^$s$G$$$F$b9=$$$^$;$s!#?w7A$H0lCW$9$kI,MW$O$"$j$^$;$s!#(B |
| 506 |
|
|
$B$7$+$7!"H?I|%b%G%k$N0lIt$G$"$k$H$_$J$5$l$k$?$a$K$O!"(B |
| 507 |
|
|
$B9T$K$O(B |
| 508 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#repeat">repeat</a></code> |
| 509 |
|
|
$BB0@-$,$"$C$F!"?tCM$,M?$($i$l$F$$$J$1$l$P$J$j$^$;$s!#(B |
| 510 |
|
|
$B$3$NCM$O@0?t$J$i2?$G$b9=$$$^$;$s!#(B ($BNc$($P!"(B |
| 511 |
|
|
$B$9$Y$F$NF~NO:Q$_$N9T$r(B <code>-1</code> $B$H$9$k$3$H$b$G$-$^$9!#(B)</p> |
| 512 |
|
|
|
| 513 |
|
|
<p><!--In HTML4-compliant UAs that do not implement this specification, the |
| 514 |
|
|
template acts as an initial blank row, and the "add" and "remove", buttons |
| 515 |
|
|
cause the form to be submitted, allowing the server to simulate the |
| 516 |
|
|
insertion and removal of rows.-->HTML 4 |
| 517 |
|
|
$B$KE,9g$9$kMxMQ<T%(!<%8%'%s%H$G$3$N;EMM$r<BAu$7$F$$$J$$$b$N$G$O!"(B |
| 518 |
|
|
$B?w7A$O:G=i$N6u9T$H$7$F5!G=$7!"(B <code lang="en">add</code> $B$H(B |
| 519 |
|
|
<code lang="en">remove</code> $B$N%\%?%s$O%U%)!<%`$rDs=P$5$;$k$3$H$K$J$k$N$G!"(B |
| 520 |
|
|
$B;*$O9T$NA^F~$d:o=|$r%7%_%e%l!<%H$G$-$^$9!#(B</p> |
| 521 |
|
|
|
| 522 |
|
|
<p class="note"><!--The add and remove buttons act as submit buttons in |
| 523 |
|
|
compliant HTML4 UAs only if <code>button</code> elements are used. If |
| 524 |
|
|
<code>input</code> buttons are used, then legacy UAs will instead render |
| 525 |
|
|
the controls as text fields. It is thus recommended that authors use |
| 526 |
|
|
<code>button</code> elements.-->$BDI2C$d:o=|$N%\%?%s$,E,9g(B HTML 4 |
| 527 |
|
|
$BMxMQ<T%(!<%8%'%s%H$GDs=P%\%?%s$H$7$FF/$/$N$O!"(B |
| 528 |
|
|
<code class="HTMLe" lang="en">button</code> $BMWAG$,;H$o$l$?;~$@$1$G$9!#(B |
| 529 |
|
|
<code class="HTMLe" lang="en">input</code> $B%\%?%s$,;H$o$l$k$H!"(B |
| 530 |
|
|
$B=>Mh$NMxMQ<T%(!<%8%'%s%H$OBe$o$j$KJ8>OF~NOMs$H$7$F%l%s%@%j%s%0$7$^$9!#(B |
| 531 |
|
|
$B$G$9$+$i!"Cx<T$O(B <code class="HTMLe" lang="en">button</code> |
| 532 |
|
|
$BMWAG$r;H$&$h$&?d>)$7$^$9!#(B</p> |
| 533 |
|
|
</div> |
| 534 |
|
|
|
| 535 |
|
|
<div class="section"> |
| 536 |
|
|
<h4 id="tracking"><span class="secno">3.1.3. </span><!--Tracking the order of |
| 537 |
|
|
repetition blocks in the submission-->$BDs=P$5$l$?H?I|%V%m%C%/$N=g=x$rDI@W$9$k(B</h4> |
| 538 |
|
|
|
| 539 |
|
|
<p><!--If a server-side framework does not preserve the order of fields |
| 540 |
|
|
relative to each other but does preserve the relative order of values with |
| 541 |
|
|
the same name, authors can use a hidden control in all the repetition |
| 542 |
|
|
blocks whose name is the same in each block but whose value is the |
| 543 |
|
|
repetition index. Then, to determine the order of the repetition blocks, |
| 544 |
|
|
the order of the values in this common control can be used.-->$B;*B&$G;HMQ$9$kOHAH$,Ms$N8_$$$N=g=x$rJ];}$7$F$*$i$:!"(B |
| 545 |
|
|
$BF1$8L>A0$NCM$NAjBPE*$J=g=x$OJ];}$7$F$$$k>l9g$K$O!"(B |
| 546 |
|
|
$BCx<T$O!"1#$7@)8f;R$r$9$Y$F$NH?I|%V%m%C%/$KF~$l$F;H$&$3$H$,$G$-$^$9!#(B |
| 547 |
|
|
$B1#$7@)8f;R$NL>A0$O$9$Y$F$N%V%m%C%/$GF1$8$H$7$^$9$,!"(B |
| 548 |
|
|
$BCM$OH?I|:w0zHV9f$H$7$^$9!#$=$7$F!"H?I|%V%m%C%/$N=g=x$rH=CG$9$k$?$a$K$O!"(B |
| 549 |
|
|
$B$3$N6&DL$N@)8f;R$NCM$N=g=x$r;H$&$3$H$,$G$-$^$9!#(B</p> |
| 550 |
|
|
</div> |
| 551 |
|
|
|
| 552 |
|
|
<div class="section"> |
| 553 |
|
|
<h4 id="what-the"><span class="secno">3.1.4. </span><!--What the repetition |
| 554 |
|
|
model can't do-->$BH?I|%b%G%k$G$G$-$J$$$3$H(B</h4> |
| 555 |
|
|
|
| 556 |
|
|
<p><!--This specification does not address the ability to select a repetition |
| 557 |
|
|
block to move it up or down without using buttons directly associated with |
| 558 |
|
|
the current block.-->$B$3$N;EMM$O8=:_$NH?I|%V%m%C%/$HD>@\4XO"IU$1$i$l$F$$$J$$%\%?%s$r;H$C$FH?I|%V%m%C%/$r>e2<$K0\F0$5$;$kG=NO$K$D$$$F$O8@5Z$7$^$;$s!#(B</p> |
| 559 |
|
|
</div> |
| 560 |
|
|
|
| 561 |
|
|
<div class="section"> |
| 562 |
|
|
<h4 id="small"><span class="secno">3.1.5. </span><!--Small example for |
| 563 |
|
|
non-XHTML documents-->$BHs(B XHTML $BJ8=q$N>.Nc(B</h4> |
| 564 |
|
|
|
| 565 |
|
|
<p><!--This feature can also be used in non-XHTML documents. Here is an example |
| 566 |
|
|
using SVG where clicking a green rectangle makes purple rectangles appear, |
| 567 |
|
|
and clicking the purple rectangles makes them disappear.-->$B$3$N5!G=$O!"Hs(B |
| 568 |
|
|
XHTML $BJ8=q$G$b;H$&$3$H$,$G$-$^$9!#<!$K<($9$N$O!"(B |
| 569 |
|
|
SVG $B$r;H$$!"NP$N;M3Q7A$r$+$A$C$H$9$k$H;g$N;M3Q7A$,8=$l!"(B |
| 570 |
|
|
$B;g$N;M3Q7A$r$+$A$C$H$9$k$H$=$l$,>CLG$9$k$H$$$&Nc$G$9!#(B</p> |
| 571 |
|
|
|
| 572 |
|
|
<pre class="XML"><code><svg xmlns="http://www.w3.org/2000/svg" viewBox(0 0 40 5) |
| 573 |
|
|
<em>xmlns:html="http://www.w3.org/1999/xhtml"</em>> |
| 574 |
|
|
<rect <em>html:repeat="template"</em> id="blob" x="<em>[blob]</em>" y="2" fill="purple" height="0.9" width="0.9" |
| 575 |
|
|
<em>onclick="this.removeRepetitionBlock()"</em>/> |
| 576 |
|
|
<rect x="0" y="2" fill="green" height="0.9" width="0.9" |
| 577 |
|
|
<em>onclick="document.getElementById('blob').addRepetitionBlockByIndex(null, 1)"</em>/> |
| 578 |
|
|
</svg></code></pre> |
| 579 |
|
|
</div> |
| 580 |
|
|
</div> |
| 581 |
|
|
|
| 582 |
|
|
<div class="section"> |
| 583 |
|
|
<h3 id="repeatExamples"><span class="secno">3.7. </span><!--Examples-->$BNc(B</h3> |
| 584 |
|
|
|
| 585 |
|
|
<p><!--This section gives some more practical examples of repetition.-->$B$3$N@a$G$O!"(B |
| 586 |
|
|
$BH?I|$N$h$j<B:]E*$JNc$r<($7$^$9!#(B</p> |
| 587 |
|
|
|
| 588 |
|
|
<div class="section"> |
| 589 |
|
|
<h4 id="repeatExample"><span class="secno">3.7.1. </span><!--Repeated rows-->$BH?I|9T(B</h4> |
| 590 |
|
|
|
| 591 |
|
|
<p><!--The following example shows how to use repetition templates to |
| 592 |
|
|
dynamically add rows to a form in a table.-->$B<!$NNc$O!"(B |
| 593 |
|
|
$BI=Cf$N%U%)!<%`$KF0E*$K9T$rDI2C$9$k$?$a$KH?I|?w7A$r$I$&;H$&$+$r<($7$F$$$^$9!#(B</p> |
| 594 |
|
|
|
| 595 |
|
|
<pre class="HTML"><code><!DOCTYPE html> |
| 596 |
|
|
<html> |
| 597 |
|
|
<head> |
| 598 |
|
|
<title><!--Form Repeat Demo-->$B%U%)!<%`H?I|%G%b(B</title> |
| 599 |
|
|
</head> |
| 600 |
|
|
<body> |
| 601 |
|
|
<form action="http://software.hixie.ch/utilities/cgi/test-tools/echo" method="post" enctype="multipart/form-data"> |
| 602 |
|
|
<table> |
| 603 |
|
|
<thead> |
| 604 |
|
|
<tr> |
| 605 |
|
|
<th><!--Name-->$BL>A0(B</th> |
| 606 |
|
|
<th><!--Number of Cats-->$BG-$N?t(B</th> |
| 607 |
|
|
<th></th> |
| 608 |
|
|
</tr> |
| 609 |
|
|
</thead> |
| 610 |
|
|
<tbody> |
| 611 |
|
|
<tr repeat="0"> |
| 612 |
|
|
<td><input type="text" name="name_0" value="<!--John Smith-->$B;3EDB@O:(B"></td> |
| 613 |
|
|
<td><input type="text" name="count_0" value="2"></td> |
| 614 |
|
|
<td><button type="remove"><!--Delete Row-->$B9T$r:o=|(B</button></td> |
| 615 |
|
|
</tr> |
| 616 |
|
|
<tr repeat="template" id="row"> |
| 617 |
|
|
<td><input type="text" name="name_[row]" value=""></td> |
| 618 |
|
|
<td><input type="text" name="count_[row]" value="1"></td> |
| 619 |
|
|
<td><button type="remove"><!--Delete Row-->$B9T$r:o=|(B</button></td> |
| 620 |
|
|
</tr> |
| 621 |
|
|
</tbody> |
| 622 |
|
|
</table> |
| 623 |
|
|
<p> |
| 624 |
|
|
<button type="add" template="row"><!--Add Row-->$B9T$rDI2C(B</button> |
| 625 |
|
|
<button type="submit"><!--Submit-->$BDs=P(B</button> |
| 626 |
|
|
</p> |
| 627 |
|
|
</form> |
| 628 |
|
|
</body> |
| 629 |
|
|
</html> |
| 630 |
|
|
</code></pre> |
| 631 |
|
|
|
| 632 |
|
|
<p><!--Initially, two rows would be visible, each with two text input controls, |
| 633 |
|
|
the first row having the values "John Smith" and "2", the second row |
| 634 |
|
|
having the values "" (a blank text field) and "1". The second row is the |
| 635 |
|
|
result of the (implied) <span><code><a |
| 636 |
|
|
href="#repeat-start">repeat-start</a></code> attribute</span> adding a |
| 637 |
|
|
repetition block when the document was loaded.-->$B$O$8$a!"(B |
| 638 |
|
|
2$B$D$N9T$,2D;k>uBV$H$J$j$^$9!#$=$l$>$l(B2$B$D$NJ8>OF~NO@)8f;R$,$"$C$F!"(B |
| 639 |
|
|
$B:G=i$N9T$OCM$,(B<q>$B;3EDB@O:(B</q>$B$H(B <q>2</q> |
| 640 |
|
|
$B$G!"(B2$B$DL\$N9T$OCM$,(B <q></q> ($B6u$NJ8>OMs(B) $B$H(B <q>1</q> $B$G$9!#(B |
| 641 |
|
|
2$B$DL\$N9T$O!"(B ($B0EL[$N(B) |
| 642 |
|
|
<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#repeat-start">repeat-start</a></code> |
| 643 |
|
|
$BB0@-$K$h$j!"J8=q$,FI9~$^$l$?;~$KH?I|%V%m%C%/$,(B1$B$DDI2C$5$l$?7k2L$G$9!#(B</p> |
| 644 |
|
|
|
| 645 |
|
|
<p><!--If the "Add Row" button is pressed, a new row is added. The first such |
| 646 |
|
|
row would have the index 2 (since there are already two repetition blocks |
| 647 |
|
|
numbered 0 and 1) and so the controls would be named "name_2" and |
| 648 |
|
|
"count_2" respectively.--><q>$B9T$rDI2C(B</q>$B%\%?%s$,2!$5$l$k$H!"(B |
| 649 |
|
|
$B?7$7$$9T$,DI2C$5$l$^$9!#:G=i$KDI2C$5$l$?9T$O:w0zHV9f$,(B <code>2</code> |
| 650 |
|
|
$B$H$J$j(B ($B4{$KHV9f$,(B <code>0</code> $B$H(B <code>1</code> |
| 651 |
|
|
$B$NH?I|%V%m%C%/$,$"$k$+$i$G$9!#(B)$B!"@)8f;R$O$=$l$>$l(B <code lang="en">name_2</code> |
| 652 |
|
|
$B$H(B <code lang="en">count_2</code> $B$H$$$&L>A0$K$J$j$^$9!#(B</p> |
| 653 |
|
|
|
| 654 |
|
|
<p><!--If the "Delete Row" button above is pressed, the row is removed.--> |
| 655 |
|
|
<q>$B9T$r:o=|(B</q>$B%\%?%s$,2!$5$l$k$H!"$=$N9T$,:o=|$5$l$^$9!#(B</p> |
| 656 |
|
|
</div> |
| 657 |
|
|
|
| 658 |
|
|
<div class="section"> |
| 659 |
|
|
<h4 id="nested"><span class="secno">3.7.2. </span><!--Nested repeats-->$BF~$l;R$NH?I|(B</h4> |
| 660 |
|
|
|
| 661 |
|
|
<p><!--The previous example does not demonstrate nested repeat blocks, |
| 662 |
|
|
reordering repetition blocks, and inserting new repetition blocks in the |
| 663 |
|
|
middle of the existing sequence, all of which are possible using the |
| 664 |
|
|
facilities described above.-->$BA0$NNc$OF~$l;R$NH?I|%V%m%C%/$dH?I|%V%m%C%/$N=g=x8r49$d4{B8$NH?I|%V%m%C%/$N4V$X$N?7$7$$H?I|%V%m%C%/$NDI2C$NNc$r<($7$F$$$^$;$s$G$7$?$,!"(B |
| 665 |
|
|
$B$3$l$i$O$9$Y$F@h=R$N5!G=$r;H$C$F<B8=$G$-$^$9!#(B</p> |
| 666 |
|
|
|
| 667 |
|
|
<p><!--This example shows nested repeats.-->$B$3$NNc$O!"(B |
| 668 |
|
|
$BF~$l;R$NH?I|$r<($7$F$$$^$9!#(B</p> |
| 669 |
|
|
|
| 670 |
|
|
<pre class="HTML"><code><html xmlns="http://www.w3.org/1999/xhtml"> |
| 671 |
|
|
<head> |
| 672 |
|
|
<title><!--Solar System-->$BB@M[7O(B</title> |
| 673 |
|
|
</head> |
| 674 |
|
|
<body> |
| 675 |
|
|
<form> |
| 676 |
|
|
<h1> <!--Solar system-->$BB@M[7O(B </h1> |
| 677 |
|
|
<p> <label> <!--System Name-->$BL>A0(B: <input name="name"/> </label> </p> |
| 678 |
|
|
<h2> <!--Planets-->$BOG@1(B </h2> |
| 679 |
|
|
<ol> |
| 680 |
|
|
<li repeat="template" repeat-start="0" id="planets"> |
| 681 |
|
|
<label> <!--Name-->$BL>A0(B: <input name="planet[planets].name" required="required"/> </label> |
| 682 |
|
|
<h3> <!--Moons-->$B1R@1(B </h3> |
| 683 |
|
|
<ul> |
| 684 |
|
|
<li repeat="template" repeat-start="0" id="planet[planets].moons"> |
| 685 |
|
|
<input name="planet[planets].moon[planet[planets].moons]"/> |
| 686 |
|
|
<button type="remove"><!--Delete Moon-->$B1R@1$r:o=|(B</button> |
| 687 |
|
|
</li> |
| 688 |
|
|
</ul> |
| 689 |
|
|
<p><button type="add" template="planet[planets].moons"><!--Add Moon-->$B1R@1$rDI2C(B</button></p> |
| 690 |
|
|
<p><button type="remove"><!--Delete Planet-->$BOG@1$r:o=|(B</button></p> |
| 691 |
|
|
</li> |
| 692 |
|
|
</ol> |
| 693 |
|
|
<p><button type="add" template="planets"><!--Add Planet-->$BOG@1$rDI2C(B</button></p> |
| 694 |
|
|
<p><button type="submit"><!--Submit-->$BDs=P(B</button></p> |
| 695 |
|
|
</form> |
| 696 |
|
|
</body> |
| 697 |
|
|
</html> |
| 698 |
|
|
</code></pre> |
| 699 |
|
|
|
| 700 |
|
|
<p><!--Note that to uniquely identify each nested repeat (which is required |
| 701 |
|
|
since the <code><a href="#add">add</a></code> buttons are dependent on IDs |
| 702 |
|
|
to specify which template should have a block added), the IDs of the |
| 703 |
|
|
nested templates are specified in terms of the ancestor template's ID, |
| 704 |
|
|
using the index substitution feature.-->$B$=$l$>$l$NF~$l;R$NH?I|$r8GM-$K<1JL$9$k$?$a!"(B |
| 705 |
|
|
$BF~$l;R$N?w7A$N<1JL;R(B |
| 706 |
|
|
(<code class="HTML" lang="en"><a href="http://www.whatwg.org/specs/web-forms/current-work/#add">add</a></code> |
| 707 |
|
|
$B%\%?%s$,$I$N?w7A$N%V%m%C%/$rDI2C$9$k$+$r;XDj$9$k$?$a$K<1JL;R$r;H$&$N$GI,MW$G$9!#(B) |
| 708 |
|
|
$B$O@hAD$N?w7A$N<1JL;R$H:w0zHV9f$NCV49$N5!G=$r;H$C$F;XDj$7$F$$$k$3$H$KCm0U$7$F2<$5$$!#(B</p> |
| 709 |
|
|
|
| 710 |
|
|
<p class="note"><!--Since square brackets are not allowed in ID attributes in |
| 711 |
|
|
XML, the above example cannot validate to an XML DTD. It is still |
| 712 |
|
|
well-formed, however, and conformant to this specification. It is possible |
| 713 |
|
|
to make a version that validates according to an XML DTD by using U+02D1 |
| 714 |
|
|
MODIFIER LETTER HALF TRIANGULAR COLON and U+00B7 MIDDLE DOT characters |
| 715 |
|
|
instead of the U+005B OPENING SQUARE BRACKET and U+005D CLOSING SQUARE |
| 716 |
|
|
BRACKET characters in the value of the second "<code>id</code>" attribute, |
| 717 |
|
|
without any other changes.-->XML $B$G$O;M3Q3g8L$,(B |
| 718 |
|
|
<code lang="en" class="XML">ID</code> $BB0@-$G$OG'$a$i$l$F$$$J$$$N$G!"(B |
| 719 |
|
|
$B@h$NNc$O(B XML DTD $B$GBEEv$H$J$j$^$;$s!#$=$l$G$b!"(B |
| 720 |
|
|
$B@07A<0$G!"$3$N;EMM$KE,9g$O$7$F$$$^$9!#(B XML DTD |
| 721 |
|
|
$B$K>H$i$7$FBEEv$H$9$k$?$a$K!"(B2$BHVL\$N(B <code lang="en" class="HTMLa">id</code> |
| 722 |
|
|
$BB0@-$NCM$G!"(B <code>U+005B</code> |
| 723 |
|
|
<code class="charname" lang="en">OPENING SQUARE BRACKET</code> $B$H(B |
| 724 |
|
|
<code>U+005D</code> <code class="charname" lang="en" |
| 725 |
|
|
>CLOSING SQUARE BRACKET</code> $B$NBe$o$j$K(B <code>U+02D1</code> |
| 726 |
|
|
<code class="charname" lang="en">MODIFIER LETTER HALF TRIANGULAR COLON</code> |
| 727 |
|
|
$B$H(B <code>U+00B7</code> <code class="charname">MIDDLE DOT</code> |
| 728 |
|
|
$B$r;H$&$3$H$,$G$-$^$9!#(B</p> |
| 729 |
|
|
</div> |
| 730 |
|
|
|
| 731 |
|
|
</div> |
| 732 |
|
|
|
| 733 |
|
|
</div> |
| 734 |
|
|
|
| 735 |
|
|
</body> |
| 736 |
|
|
</html> |
Parent Directory
| 
Revision Log