-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathHTML-forms-intro-ja.html
1301 lines (1142 loc) · 45.7 KB
/
HTML-forms-intro-ja.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Forms ( Introduction ) （日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>
<script>
Util.ready = function(){
const source_data = {
toc_main: 'MAIN',
generate: expand
};
Util.switchWordsInit(source_data);
}
function expand(){
const class_map = this.class_map;
const tag_map = this.tag_map;
const link_map = this.link_map;
const form_eX = PAGE_DATA.form_eX;
const create_eX_html = (n0) => {
n0 = parseInt(n0);
let prev = 0;
const content = form_eX
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n *(\d+)(↓|:)(.*)/g, (m, n1, mark, text) => {
n1 = parseInt(n1);
if( n1 > n0 ) {
return '';
}
mark = (mark === '↓') ? '\n' : '';
if( n1 !== prev) {
if ( prev === n0 ) mark = '</mark>' + mark;
if ( n1 === n0 ) mark = mark + '<mark>';
}
prev = n1;
return mark + text;
})
return `<pre class="lang-html">${content}</pre>`;
}
return this.html.replace(
/`(.+?)([$@\^])(\w*)/g,
create_html
);
function create_html(match, key, indicator, klass){
let href = '';
let href1 = '';
{
const n = key.indexOf('＠');
if(n > 0) {
href1 = key.slice(n + 1);
key = key.slice(0, n);
}
}
let text = key;
switch(klass){
case 'l':
text = `"<code class="literal">${text}</code>"`;
break;
case 'eX':
return create_eX_html(key);
break;
case 'stT' :
text = `<input type=${key}>`;
break;
case 'en':
return `<span lang="en">${key}</span>`;
break;
}
let tag = tag_map[klass];
if(tag) {
let classname = class_map[klass];
classname = classname ? ` class="${classname}"` : '';
text = `<${tag}${classname}>${text}</${tag}>`;
}
if(indicator !== '^'){
href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
if(!href){
console.log(match); // check error
return match;
}
switch(indicator){
case '$':
text = `<a href="${href}">${text}</a>`;
break;
case '@':
text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
break;
}
}
return text;
}
}
</script>
<script type="text/plain" id="_source_data">
●●options
spec_date:2021-10-08
trans_update:2020-05-05
source_checked:210301
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/forms.html
nav_prev:HEtables
nav_next:HEforms
trans_1st_pub:2016-09-19
●●class_map
e:element
a:attr
et:event-type
v:value
M:method
●●tag_map
c:code
e:code
a:code
M:code
et:code
v:code
stT:code
i:i
em:em
●●
例示コード（ form_eX ）用のデータ
• 番号 n は段階 — X 番目の例は：
n > X なる行は含まない
n = X なる行は強調する
• 番号の次の文字は
↓ は改行
: は継続行
●●form_eX
1:<form
8: method="post"
8↓ enctype="application/x-www-form-urlencoded"
8↓ action="https://pizza.example.com/order.cgi"
1:>
1↓ <p><label>客名： <input
8: name="custname"
9: required
11: autocomplete="shipping name"
1:></label></p>
4↓ <p><label>電話番号： <input type=tel
8: name="custtel"
11: autocomplete="shipping tel"
4:></label></p>
12↓ <p><label>部屋番号： <input name="custbuzz" inputmode="numeric"></label></p>
4↓ <p><label>~email~address： <input type=email
8: name="custemail"
11: autocomplete="shipping email"
4:></label></p>
2↓ <fieldset>
2↓ <legend> ピザのサイズ </legend>
2↓ <p><label> <input type=radio name=size
9: required
8: value="small"
2:> 小サイズ </label></p>
2↓ <p><label> <input type=radio name=size
9: required
8: value="medium"
2:> 中サイズ </label></p>
2↓ <p><label> <input type=radio name=size
9: required
8: value="large"
2:> 大サイズ </label></p>
2↓ </fieldset>
3↓ <fieldset>
3↓ <legend> トッピング </legend>
3↓ <p><label> <input type=checkbox
8: name="topping" value="bacon"
3:> ベーコン </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="cheese"
3:> チーズ増量 </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="onion"
3:> オニオン </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="mushroom"
3:> マッシュルーム </label></p>
3↓ </fieldset>
5↓ <p><label>希望~配達~時刻： <input type=time min="11:00" max="21:00" step="900"
8: name="delivery"
9: required
5:></label></p>
6↓ <p><label>その他の配達指示： <textarea
8: name="comments"
10: maxlength=1000
6:></textarea></label></p>
7↓ <p><button>注文を提出する</button></p>
1↓</form>
0:
●●
form_eX 原文データ
1:<form
8: method="post"
8↓ enctype="application/x-www-form-urlencoded"
8↓ action="https://pizza.example.com/order.cgi"
1:>
1↓ <p><label>Customer name: <input
8: name="custname"
9: required
11: autocomplete="shipping name"
1:></label></p>
4↓ <p><label>Telephone: <input type=tel
8: name="custtel"
11: autocomplete="shipping tel"
4:></label></p>
12: <p><label>Buzzer code: <input name="custbuzz" inputmode="numeric"></label></p>
4↓ <p><label>Email address: <input type=email
8: name="custemail"
11: autocomplete="shipping email"
4:></label></p>
2↓ <fieldset>
2↓ <legend> Pizza Size </legend>
2↓ <p><label> <input type=radio name=size
9: required
8: value="small"
2:> Small </label></p>
2↓ <p><label> <input type=radio name=size
9: required
8: value="medium"
2:> Medium </label></p>
2↓ <p><label> <input type=radio name=size
9: required
8: value="large"
2:> Large </label></p>
2↓ </fieldset>
3↓ <fieldset>
3↓ <legend> Pizza Toppings </legend>
3↓ <p><label> <input type=checkbox
8: name="topping" value="bacon"
3:> Bacon </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="cheese"
3:> Extra Cheese </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="onion"
3:> Onion </label></p>
3↓ <p><label> <input type=checkbox
8: name="topping" value="mushroom"
3:> Mushroom </label></p>
3↓ </fieldset>
5↓ <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"
8: name="delivery"
9: required
5:></label></p>
6↓ <p><label>Delivery instructions: <textarea
8: name="comments"
10: maxlength=1000
6:></textarea></label></p>
7↓ <p><button>Submit order</button></p>
1↓</form>
●●original_id_map
●●link_map
e.button:~HEforms#the-button-element
e.fieldset:~HEforms#the-fieldset-element
e.form:~HEforms#the-form-element
e.input:~HEinput#the-input-element
e.label:~HEforms#the-label-element
e.legend:~HEforms#the-legend-element
e.select:~HEforms#the-select-element
e.textarea:~HEforms#the-textarea-element
e.p:~HEgrouping#the-p-element
a.action:~HTMLforms#attr-fs-action
a.enctype:~HTMLforms#attr-fs-enctype
a.method:~HTMLforms#attr-fs-method
a.autocomplete:~HTMLautofill#attr-fe-autocomplete
a.inputmode:~HTMLinteraction#attr-inputmode
a.maxlength:~HTMLforms#attr-fe-maxlength
a.name:~HTMLforms#attr-fe-name
a.max:~HEinput#attr-input-max
a.min:~HEinput#attr-input-min
a.required:~HEinput#attr-input-required
a.step:~HEinput#attr-input-step
a.type:~HEinput#attr-input-type
a.value:~HEinput#attr-input-value
v.text:~HEinput#text-(type=text)-state-and-search-state-(type=search)
v.checkbox:~HEinput#checkbox-state-(type=checkbox)
v.email:~HEinput#email-state-(type=email)
v.radio:~HEinput#radio-button-state-(type=radio)
v.tel:~HEinput#telephone-state-(type=tel)
v.time:~HEinput#time-state-(type=time)
stT.text:~HEinput#text-(type=text)-state-and-search-state-(type=search)
stT.radio:~HEinput#radio-button-state-(type=radio)
stT.tel:~HEinput#telephone-state-(type=tel)
stT.number:~HEinput#number-state-(type=number)
v.language:~HTMLautofill#attr-fe-autocomplete-language
v.name:~HTMLautofill#attr-fe-autocomplete-name
v.section-*:~HTMLautofill#attr-fe-autocomplete-section
v.tel-national:~HTMLautofill#attr-fe-autocomplete-tel-national
v.~tel0:~HTMLautofill#attr-fe-autocomplete-tel
v.application/x-www-form-urlencoded:~HTMLforms#attr-fs-enctype-urlencoded
et.invalid:~HTMLindex#event-invalid
~URL:~URL1#concept-url
段落:~HTMLdom#paragraph
~HEinput#input-impl-notes
~HTMLwriting#syntax-attributes
M.GET:~HTTPsem#GET
M.POST:~HTTPsem#POST
●●words_table1
tel0:tel
formData1:custname=Mario+Luigi&custtel=0999-123-4567&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
●●words_table
●仕様
強調:highlight:~
推測-:guess:~
注意をそらす staying focused and to the point
個人:person:~
一部:part of
種類:kind:~
迂回-:bypass:~
助言:advice:~
増補-:augment:~
関心:interest:~
必要性:needs:~
概略的な:brief:~
共通的:common:~
適任:right:~
~~説明:illustrate:
きちんと:well-
何であれ:irrespective
促す:encourage する
促す:help する
confusingly
しかも:added complication
注目:notice
有意な違いはない:no particular significance
特に用意された／特に:specifically
まとめる／together:
併せると:Putting this together
次の様:look like this
伝える:tell
ごと:increment
この例:this instance
指す:refer
できるようにする:let
●UI
virtual-keyboard:virtual keyboard:::ソフトウェアキーボード
picker:::選択 UI
radio::::ラジオ
email::::メール
check::::チェック
checkbox::::チェックボックス
component::::コンポーネント
drop-down::::ドロップダウン
大字:capital:大文字
大字~化-:capitalize
autofill:
埋める:fillする::~
埋めず:fillせず::~
埋めて:fillして::~
機械読取可能:computer-readable::機械読み取り可能
複数行:multiline::~
携帯:mobile::~::モバイル
欄:field::~::フィールド
打込む:typeする:打ち込む:::タイプする
-:word
被る:incur
尋ねる:askする::~
尋ねて:askして::~
●locale
locale::::ロケール
地域-:local::~::ローカル
地域-化:localization
翻訳-:translate::~
Cyprus::::キプロス
米国:United-States:~
France::::フランス
British::::
romanized:::ローマ字
英語:English:~
日本:Japan:~
日本語:Japanese:~
日本人:Japanese:~
国別code:country code prefix:国別コード
●構文
小数点:decimal separator:~
約物:punctuation::~
実数:number:~
部位:part:~
時t:hour:時
分t:minute:分
秒t:second:秒
●例
checkout::::チェックアウト
credit-card:credit card:::クレジットカード
番号:number:~
e-commerce-site::::ネットショップ
連絡-:contact:~
客名:customer:お客様名
客様の:your:お客様の
顧客:customer:~
送先:recipient:送り先
サイズ:size:~
ピザ:pizza:~
ピザ屋:pizzeria
トッピング:topping:~
配達-:deliver:~
配達:delivery:~
配達人:delivery driver:~
配達指示:delivery instruction:~
支払い:payment:~
票:issue:~
希望:preferred:~
電話番号:telephone number:~
部屋番号:buzzer code:~
ギフト:gift:贈り物:::~
場:space:~
知人:friend:~
多忙:busy:~
空欄:blank:~
注文:order:~
約束-:promise:~
客:buyer
買う:buy
宛:ship する
長文:huge essays
間違いをおかす:mistake:
●未分類
online::::オンライン
伝送路:wire:~
側:side:~
間隔:interval:~
数的:numeric:~
書法:writing:書き方
書する:writeする:書く
書され:writeされ:書かれ
-:exist
note
~~時間:hour
become
一群の:set
とは別に:separate
成す:form する
逆:back
選ぶ:choose
一連の:batch of
午前:am
午後:pm
ISO
-:better
-:denote:
-:fall
going
having
making
seem
3 桁ごと:thousand
~~挿入:put
置く:go
選ぶ:choose／choosing／choice
~~選択:choices
選び取-:pick
ではなく:instead
とは別に:separate
種が多い:many
よく:always
いくつもの:dozens of
ほぼ:mostly
sole:
種々の:variety
最後に:finally
前:previous
anything
●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL#introduction-4">§ Forms 内の § Introduction</a>
を日本語に翻訳したものです。
~PUB
</p>
</script>
</head>
<body>
<header>
<hgroup>
<h1>HTML — フォーム序論</h1>
</hgroup>
</header>
<main id="MAIN" hidden>
<section id="introduction-4">
<h4 title="Introduction">4.10.1. 序論</h4>
◎非規範的
<p>
~formとは、
~form~control
— ~text, ~button, ~checkbox, 範囲, 色~pickerなど —
を有する，~web~pageの~componentである。
利用者は、
そのような~formとヤリトリして~dataを供せる
— その~dataは、
更なる処理~用に（探索や計算の結果を返すなど）~serverへ送信され得る。
多くの事例では，~client側の~scriptingは必要ないが、
~scriptが［
利用者~体験を増補する ／
~formを~serverへ~dataを提出する以外の目的で利用する
］ために可用な~APIもある。
◎
A form is a component of a web page that has form controls, such as text, buttons, checkboxes, range, or color picker controls. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.
</p>
<p>
~formを書するためには，
3 つの段
— ~UIを書する,
~server側~処理を実装する,
~serverと通信するために~UIを環境設定する —
が要るが、
これらは，どの順序でも遂行できる。
◎
Writing a form consists of several steps, which can be performed in any order: writing the user interface, implementing the server-side processing, and configuring the user interface to communicate with the server.
</p>
<section id="writing-a-form's-user-interface">
<h5 title="Writing a form's user interface">4.10.1.1. ~form~UIの書法</h5>
◎非規範的
<p>
この概略的な序論の目的においては、
ピザを注文する~formを作成することにする。
◎
For the purposes of this brief introduction, we will create a pizza ordering form.
</p>
<p>
どの~formも `form$e 要素で開始され、
その内側にいくつかの~controlが置かれる。
ほとんどの~controlは、
`input$e 要素により表現される
— それは、
既定では~text~controlを供する。
~controlには、
`label$e 要素を利用して~labelを与えれる
— ~label~textと当の~controlは、
`label$e 要素の内側に置く。
~formを成す各~部位は，`段落$と見なされ、
概して `p$e 要素を利用して他から分離される。
これらを併せると、
顧客の名前を尋ねる~formは，次の様になる：
◎
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a text control. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:
</p>
`1^eX
<p>
次に、
利用者がピザのサイズを選定できるようにする
— そのためには、
一群の~radio~buttonを利用できる。
~radio~buttonも `input$e 要素を利用するが、
今度は `type$a 属性を値 `radio$v にする。
~radio~buttonたちを~groupとして働かせるためには、
各自の `name$a 属性に共通な名前を与える。
また、
一連の~control
— この事例では，~radio~buttonたち —
を，まとまった~groupとして呈示するためには、
`fieldset$e 要素を利用する。
そのような~groupに~titleを与えるため、
`fieldset$e 内の最初の要素として `legend$e 要素を与える必要がある：
◎
To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons also use the input element, this time with a type attribute with the value radio. To make the radio buttons work as a group, they are given a common name using the name attribute. To group a batch of controls together, such as, in this case, the radio buttons, one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.
</p>
`2^eX
<p class="note">注記：
前~段からの変更点は、
<mark>強調して</mark>示される。
◎
Changes from the previous step are highlighted.
</p>
<p>
ピザの各種トッピングを選び取れるようにするには、
~checkboxを利用できる。
それは、
`type$a 属性が `checkbox$v に設定された `input$e 要素を利用する：
◎
To pick toppings, we can use checkboxes. These use the input element with a type attribute with the value checkbox:
</p>
`3^eX
<p>
この~formが書されたピザ屋は，よく間違いをおかすので、
顧客に連絡する仕方も必要になる。
その目的に特に用意された~form~controlとして、
電話番号
（ `type$a 属性が `tel$v に設定された `input$e 要素）,
~email~address
（ `type$a 属性が `email$v に設定された `input$e 要素）
がある：
◎
The pizzeria for which this form is being written is always making mistakes, so it needs a way to contact the customer. For this purpose, we can use form controls specifically for telephone numbers (input elements with their type attribute set to tel) and email addresses (input elements with their type attribute set to email):
</p>
`4^eX
<p>
配達~時刻を尋ねるには、
`type$a 属性が `time$v に設定された `input$e 要素を利用できる。
これらの~form~controlの多くには、
指定できる値の正確な範囲を制御するための属性がある。
この事例で特に関心があるのは、［
`min$a, `max$a, `step$a
］属性であり，順に［
最小な時刻, 最大な時刻, 時刻に許容される（秒t数による）間隔
］を設定する。
このピザ屋の配達~営業時間は午前 11 時から午後 9 時までで，
15 分t刻みより細かい配達~時刻は約束しないとする。
次のように~mark-upすれば、
そのようにできる：
◎
We can use an input element with its type attribute set to time to ask for a delivery time. Many of these form controls have attributes to control exactly what values can be specified; in this case, three attributes of particular interest are min, max, and step. These set the minimum time, the maximum time, and the interval between allowed values (in seconds). This pizzeria only delivers between 11am and 9pm, and doesn't promise anything better than 15 minute increments, which we can mark up as follows:
</p>
`5^eX
<p>
`textarea$e 要素を利用すれば、
複数行な~text~controlを供せる。
この例では、
それを利用して，顧客が他の配達指示を与えるための場を供することにする：
◎
The textarea element can be used to provide a multiline text control. In this instance, we are going to use it to provide a space for the customer to give delivery instructions:
</p>
`6^eX
<p>
最後に、
`button$e 要素を利用して，~formを提出-可能にする：
◎
Finally, to make the form submittable we use the button element:
</p>
`7^eX
</section>
<section id="implementing-the-server-side-processing-for-a-form">
<h5 title="Implementing the server-side processing for a form">4.10.1.2. ~form用の~server側~処理を実装するとき</h5>
◎非規範的
<p>
~server側の処理器を書するための正確な詳細は、
この仕様の視野から外れる。
この序論の目的においては、
`https://pizza.example.com/order.cgi^c
にある~scriptが［
`application/x-www-form-urlencoded$v 形式を利用している提出
］を受容するよう環境設定されていて，［
~HTTP `POST$M 要請の本体~内に次に挙げる~parameterが送信される
］ことを期待しているものと見做す：
◎
The exact details for writing a server-side processor are out of scope for this specification. For the purposes of this introduction, we will assume that the script at https://pizza.example.com/order.cgi is configured to accept submissions using the application/x-www-form-urlencoded format, expecting the following parameters sent in an HTTP POST body:
</p>
<dl>
<dt>`custname^c</dt>
<dd>
顧客の名前
◎
Customer's name
</dd>
<dt>`custtel^c</dt>
<dd>
顧客の電話番号
◎
Customer's telephone number
</dd>
<dt>`custemail^c</dt>
<dd>
顧客の~email~address
◎
Customer's email address
</dd>
<dt>`size^c</dt>
<dd>
ピザのサイズ
— 次に挙げるいずれか
⇒
`small^v, `medium^v, `large^v
◎
The pizza size, either small, medium, or large
</dd>
<dt>`topping^c</dt>
<dd>
選定された各トッピングごとに，次に挙げるいずれかが値に指定される
⇒
`bacon^v, `cheese^v, `onion^v, `mushroom^v
◎
A topping, specified once for each selected topping, with the allowed values being bacon, cheese, onion, and mushroom
</dd>
<dt>`delivery^c</dt>
<dd>
要請された配達~時刻
◎
The requested delivery time
</dd>
<dt>`comments^c</dt>
<dd>
配達指示
◎
The delivery instructions
</dd>
</dl>
</section>
<section id="configuring-a-form-to-communicate-with-a-server">
<h5 title="Configuring a form to communicate with a server">4.10.1.3. ~formを~serverと通信するように環境設定するとき</h5>
◎非規範的
<p>
~form提出は、
種々の仕方で
— 最も共通的~には、
~HTTP［
`GET$M ／ `POST$M
］要請として —
~serverに公開される。
利用する正確な~HTTP~methodを指定するためには、
`form$e 要素に `method$a 属性を指定する。
これは、
~form~dataの符号化-法を指定するものではない
— それには、
`enctype$a 属性を利用する。
また、
`action$a 属性を利用して，［
提出される~dataを取扱うことになる~service
］の`~URL$も指定する必要がある。
◎
Form submissions are exposed to servers in a variety of ways, most commonly as HTTP GET or POST requests. To specify the exact method used, the method attribute is specified on the form element. This doesn't specify how the form data is encoded, though; to specify that, you use the enctype attribute. You also have to specify the URL of the service that will handle the submitted data, using the action attribute.
</p>
<p>
~serverに提出される~dataは、
一連の［
名前, 値（省略可）
］が成す組からなるので、
提出~内に含ませたい各~form~controlには，名前を与える必要がある。
`name$a 属性が，それを指定する。
~radio~buttonたちが成す~group用には、
すでに名前を指定した。
各~radio~buttonには，
`value$a 属性を利用して互いに異なる値を与えたので、
提出~内でも どれが選定されたか判別できる。
◎
For each form control you want submitted, you then have to give a name that will be used to refer to the data in the submission. We already specified the name for the group of radio buttons; the same attribute (name) also specifies the submission name. Radio buttons can be distinguished from each other in the submission by giving them different values, using the value attribute.
</p>
<p>
複数の~controlに同じ名前を与えれる。
例えばここでは，すべての~checkboxに同じ名前を与えるが、
~radio~buttonと同様，それらにも `value$a 属性に一意な値を与えることにより、
~serverは，どの~checkboxが~checkされたかを［
当の名前を伴って提出された値
］を見て判別できるようになる。
◎
Multiple controls can have the same name; for example, here we give all the checkboxes the same name, and the server distinguishes which checkbox was checked by seeing which values are submitted with that name — like the radio buttons, they are also given unique values with the value attribute.
</p>
<p>
これらすべてを，前~節の設定群に加えると、
次のようになる：
◎
Given the settings in the previous section, this all becomes:
</p>
`8^eX
<p class="note">注記：
属性の値には，引用符で括られたもの, 括られてないものがあるが、
有意な違いはない。
`§ 構文＠~HTMLwriting#syntax-attributes$
にて論じられるとおり、
~HTML構文においては，［
等しく妥当な，属性を指定する種々の仕方
］が許容される。
◎
There is no particular significance to the way some of the attributes have their values quoted and others don't. The HTML syntax allows a variety of equally valid ways to specify attributes, as discussed in the syntax section.
</p>
<div>
<p>
例えば、顧客が次を手入力した場合：
</p>
<ul><li>名前： "Mario Luigi"
<li>電話番号： "0999-123-4567"
<li>~email~address： （指定しなかった）
<li>ピザのサイズ： 中サイズ
<li>トッピング： チーズ増量＋マッシュルーム
<li>配達~時刻： 午後 7 時
<li>配達指示： 空欄のまま
</ul>
<p>
~UAは、
~online~web~serviceに向けて，次を提出することになる：
</p>
◎
For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their telephone number, did not specify an email address, asked for a medium-sized pizza, selected the Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery instructions text control blank, the user agent would submit the following to the online web service:
</div>
<pre>~formData1</pre>
</section>
<section id="client-side-form-validation">
<h5 title="Client-side form validation">4.10.1.4. ~client側の~form検証</h5>
◎非規範的
<p>
~formには、［
提出する前に，利用者の入力を~UAに検査してもらう
］よう注釈できる。
検査したとしても、
~serverは，入力が妥当かどうか検証yする必要がある
（敵対的な利用者は、
~form検証を容易に迂回できるので）
— それでも、
検査を~serverのみに任せた場合に利用者が被る待機-は，避けれるようになる。
◎
Forms can be annotated in such a way that the user agent will check the user's input before the form is submitted. The server still has to verify the input is valid (since hostile users can easily bypass the form validation), but it allows the user to avoid the wait incurred by having the server be the sole checker of the user's input.
</p>
<p>
最も単純な注釈は `required$a 属性であり、
`input$e 要素に指定できる。
これにより、［
当の要素に値が与えられない限り，~formは提出されない
］よう指示できる。
この属性を［
顧客の名前, ピザのサイズ, 配達~時刻
］各~欄に追加すれば、
利用者が［
それらのうち いずれかの欄を埋めずに~formを提出しようとした
］とき，~UAは［
その旨を利用者に通知できる
］ようになる：
◎
The simplest annotation is the required attribute, which can be specified on input elements to indicate that the form is not to be submitted until a value is given. By adding this attribute to the customer name, pizza size, and delivery time fields, we allow the user agent to notify the user when the user submits the form without filling in those fields:
</p>
`9^eX
<p>
入力の長さを制限することも、
`maxlength$a 属性を利用すればアリになる。
これを `textarea$e 要素に追加して，例えば 1000 文字までに制限すれば、
多忙な配達人が利用者からの長文に余計な気を使わされることを防止できる。
◎
It is also possible to limit the length of the input, using the maxlength attribute. By adding this to the textarea element, we can limit users to 1000 characters, preventing them from writing huge essays to the busy delivery drivers instead of staying focused and to the point:
</p>
`10^eX
<p class="note">注記：
~formが提出される際に，妥当でない~form~controlがある場合、
`invalid$et ~eventが それらに向けて発火される。
これは、
~formにおける問題の要約を表示するときに有用になり得る
— ~browserは、
概して，一時に 1 個の問題しか報告しないので。
◎
When a form is submitted, invalid events are fired at each form control that is invalid. This can be useful for displaying a summary of the problems with the form, since typically the browser itself will only report one problem at a time.
</p>
</section>
<section id="enabling-client-side-automatic-filling-of-form-controls">
<h5 title="Enabling client-side automatic filling of form controls">4.10.1.5. ~client側で~form~controlを自動的に埋めることを可能化する</h5>
◎非規範的
<p>
~browserには、
利用者が自身の情報を毎回 手入力する手間を省けるよう，
~form~controlを自動的に埋めて利用者を援助しようと試みるものもある。
例えば、
利用者の電話番号を尋ねる欄を，利用者のそれで自動的に埋めるなど。
◎
Some browsers attempt to aid the user by automatically filling form controls rather than having the user reenter their information each time. For example, a field asking for the user's telephone number can be automatically filled with the user's phone number.
</p>
<p>
`autocomplete$a 属性を利用すれば、
~UAに これを促すような欄の目的を述べれる。
この~formの事例では、
ピザの配達-先についての情報を与える 3 個の欄を，この仕方で有用に注釈でき、
その結果は次の様になる：
◎
To help the user agent with this, the autocomplete attribute can be used to describe the field's purpose. In the case of this form, we have three fields that can be usefully annotated in this way: the information about who the pizza is to be delivered to. Adding this information looks like this:
</p>
`11^eX
</section>
<section id="improving-the-user-experience-on-mobile-devices">
<h5 title="Improving the user experience on mobile devices">4.10.1.6. 携帯~機器における利用者~体験を改善する</h5>
◎非規範的
<p>
利用者に複数の入力~modal性を供する機器もある
— 特に，~virtual-keyboardを備えるものなど。
例えば，利用者は、［
~credit-card番号を打込むときは，数字~UIkey（ 0〜9 ）のみを見たい／
名前を打込む~form欄は，各~単語を既定で大字~化したい
］と望むであろう。
◎
Some devices, in particular those with virtual keyboards can provide the user with multiple input modalities. For example, when typing in a credit card number the user may wish to only see keys for digits 0-9, while when typing in their name they may wish to see a form field that by default capitalizes each word.
</p>
<p>
`inputmode$a 属性を利用すれば、
適切な入力~modal性を選定できる：
◎
Using the inputmode attribute we can select appropriate input modalities:
</p>