WEBVTT

1
00:00:00.000 --> 00:00:00.786
こんにちは。

2
00:00:00.786 --> 00:00:03.666
エイチティーエムエル、リファレンス解説です。

3
00:00:03.666 --> 00:00:07.725
エイチティーエムエルタグ編の七十六本目は、フォーム、タグです。

4
00:00:07.725 --> 00:00:12.438
フォームは、テキスト入力欄やチェックボックス、送信ボタンといった入力項目をひとまとめにし、

5
00:00:12.438 --> 00:00:17.152
利用者が入力した内容をサーバーへ送るための入れ物です。

6
00:00:17.152 --> 00:00:22.520
検索窓やお問い合わせ、ログイン画面など、利用者とやり取りする場面には欠かせません。

7
00:00:22.520 --> 00:00:27.234
今回は、このフォームの役割と、送信の仕組みを順番に確認していきましょう。

8
00:00:27.234 --> 00:00:30.376
入力を受け付ける仕組み全体の土台になる要素です。

9
00:00:30.376 --> 00:00:36.268
身近なサイトの多くで使われている、利用者参加の入り口だと考えるとイメージしやすくなります。

10
00:00:36.268 --> 00:00:38.330
基本の書き方を確認します。

11
00:00:38.330 --> 00:00:44.201
フォームは開始タグと終了タグを両方書き、その間に入力欄やボタンを置きます。

12
00:00:44.201 --> 00:00:50.229
画面の例では、ラベルと入力欄、そして送信ボタンをフォームの中に並べています。

13
00:00:50.229 --> 00:00:55.941
この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。

14
00:00:55.941 --> 00:00:58.003
置き場所はボディの中です。

15
00:00:58.003 --> 00:01:03.398
注意点として、フォームの中に別のフォームを入れる入れ子はできません。

16
00:01:03.398 --> 00:01:08.633
送信したい項目は、必ず一つのフォームの中に収めるようにしましょう。

17
00:01:08.633 --> 00:01:12.758
まずはこの基本形を正確に書けることが土台になります。

18
00:01:12.758 --> 00:01:18.946
書いたあとは、タグの対応が取れているかを目で追って確認する習慣を付けましょう。

19
00:01:18.946 --> 00:01:21.008
地味ですが大切な作業です。

20
00:01:21.008 --> 00:01:23.928
次に、送信の要となる二つの属性を見ます。

21
00:01:23.928 --> 00:01:29.915
アクションはデータの送信先ユーアールエルを指定し、メソッドは送信方式を指定します。

22
00:01:29.915 --> 00:01:34.733
画面の例では、検索用のパスへ、ゲット方式で送る設定になっています。

23
00:01:34.733 --> 00:01:40.428
ここで大切なのは、タグを置いただけでは受け取り処理は自動で生まれないことです。

24
00:01:40.428 --> 00:01:45.830
送信先には、実際にデータを受け取って処理するサーバー側の仕組みが必要です。

25
00:01:45.830 --> 00:01:51.525
フロント側の見た目と、受け取り側の処理はセットで考える、と覚えておきましょう。

26
00:01:51.525 --> 00:01:54.737
この二つがフォームの設計の出発点になります。

27
00:01:54.737 --> 00:02:01.308
送信先を間違えるとデータは届かないため、パスやファイル名の写し間違いにも注意してください。

28
00:02:01.308 --> 00:02:06.426
メソッドの代表的な二つ、ゲットとポストの違いを整理します。

29
00:02:06.426 --> 00:02:12.690
ゲットは入力した値がユーアールエルの末尾に付いて送られるため、検索キーワードのように、

30
00:02:12.690 --> 00:02:18.955
共有したり再読み込みしたりしてもよい内容に向いています。

31
00:02:18.955 --> 00:02:26.190
一方ポストは、値がユーアールエルには表示されず、リクエストの本文として送られます。

32
00:02:26.190 --> 00:02:33.778
パスワードなどの秘密情報は、履歴や画面に残りやすいゲットでは絶対に送らないでください。

33
00:02:33.778 --> 00:02:39.955
目的に合わせて二つを使い分けることが、安全なフォーム作りの第一歩です。

34
00:02:39.955 --> 00:02:42.602
長文の送信もポストが基本です。

35
00:02:42.602 --> 00:02:50.896
迷ったときは、その情報がアドレスバーに見えてよいかどうかを基準に判断すると選びやすくなります。

36
00:02:50.896 --> 00:02:53.557
記事の活用事例を読み解きます。

37
00:02:53.557 --> 00:02:59.767
例は、教材名を入力して検索条件として送る、シンプルな検索フォームです。

38
00:02:59.767 --> 00:03:08.637
ラベルと入力欄は、フォーとアイディーを一致させて対応付け、入力欄のネームが送信時の項目名になります。

39
00:03:08.637 --> 00:03:15.202
必須を意味するリクワイアードを付けると、空のままでは送信できなくなります。

40
00:03:15.202 --> 00:03:19.814
試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、

41
00:03:19.814 --> 00:03:24.427
保存後に再読み込みしてください。

42
00:03:24.427 --> 00:03:29.040
そして送信後のユーアールエルに、入力した値がどう付くかを目で確認すると、

43
00:03:29.040 --> 00:03:33.652
ゲットの仕組みがよく分かります。

44
00:03:33.652 --> 00:03:41.636
ブラウザーのアドレスバーに注目すると、送信の動きが目に見えて、仕組みへの理解が深まります。

45
00:03:41.636 --> 00:03:44.252
そのほかの主な属性を確認します。

46
00:03:44.252 --> 00:03:52.101
エンタイプはポスト送信時のデータ形式を指定し、ターゲットは送信結果をどこに表示するかを決めます。

47
00:03:52.101 --> 00:04:00.930
オートコンプリートは自動入力の助けになる指定で、ノーバリデートはブラウザーの標準チェックを外す真偽属性です。

48
00:04:00.930 --> 00:04:05.508
真偽属性は、あるかないかで決まる点にも注意してください。

49
00:04:05.508 --> 00:04:11.558
たとえば、無効化したくないのに属性を書き残すと、意図と違う動きになります。

50
00:04:11.558 --> 00:04:17.444
属性は便利ですが、付ける理由を一つずつ説明できる範囲で使うのがコツです。

51
00:04:17.444 --> 00:04:21.369
名前を表すネーム属性もフォームの識別に使えます。

52
00:04:21.369 --> 00:04:24.475
すべてを一度に覚える必要はありません。

53
00:04:24.475 --> 00:04:29.544
使う場面が来たら、そのつど確認しながら書き足していきましょう。

54
00:04:29.544 --> 00:04:32.743
フォームの中に置く部品との関係を整理します。

55
00:04:32.743 --> 00:04:40.304
実際の入力欄はインプットやテキストエリア、セレクトなどが担い、フォーム自体はそれらを束ねて送る役割です。

56
00:04:40.304 --> 00:04:45.247
ラベルは各入力欄の説明で、クリックでも入力欄を選べるようになります。

57
00:04:45.247 --> 00:04:51.936
ボタンはタイプをサブミットにすると送信ボタンになり、送信しないボタンにはボタンを明示します。

58
00:04:51.936 --> 00:04:54.698
特に大切なのが、各入力欄のネームです。

59
00:04:54.698 --> 00:05:01.241
ネームがない項目はサーバーへ送られないため、送信したい項目には必ずネームを付けてください。

60
00:05:01.241 --> 00:05:05.022
ここを忘れると、見た目は完成でもデータが届きません。

61
00:05:05.022 --> 00:05:10.547
部品一つひとつの役割が分かると、フォーム全体の読み書きがぐっと楽になります。

62
00:05:10.547 --> 00:05:12.292
順に覚えていきましょう。

63
00:05:12.292 --> 00:05:14.601
ファイルを送る場合の注意です。

64
00:05:14.601 --> 00:05:20.219
画像などのファイルをフォームで送信するときは、メソッドをポストにし、エンタイプにマルチパート、

65
00:05:20.219 --> 00:05:25.837
フォームデータを指定する組み合わせが基本になります。

66
00:05:25.837 --> 00:05:32.148
この指定がないと、ファイル名だけが送られ、中身が届かないといった失敗が起こります。

67
00:05:32.148 --> 00:05:38.151
画面の例のように、ファイル用のインプットとセットで書く形を覚えておきましょう。

68
00:05:38.151 --> 00:05:45.694
あわせて、受け取り側のサーバーでも、ファイルを受け付ける処理と容量の制限を確認する必要があります。

69
00:05:45.694 --> 00:05:50.619
形式と受け取り側、両方がそろって初めてファイル送信が成立します。

70
00:05:50.619 --> 00:05:57.392
試すときは、小さな画像ファイルから始めて、届くかどうかを落ち着いて確かめてみてください。

71
00:05:57.392 --> 00:05:59.569
ブラウザー互換性を確認します。

72
00:05:59.569 --> 00:06:06.391
記事が参照するエムディーエヌのデータでは、フォーム要素は、クロームが一以降、

73
00:06:06.391 --> 00:06:13.213
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで非常に古くから対応しています。

74
00:06:13.213 --> 00:06:18.293
アクションやメソッド、エンタイプといった基本属性も同じ範囲で使えます。

75
00:06:18.293 --> 00:06:22.139
一方で、オートコンプリートはクローム十四以降、ノーバリデートはクローム十以降など、

76
00:06:22.139 --> 00:06:25.986
属性ごとに差があります。

77
00:06:25.986 --> 00:06:33.098
新しい属性を使うときは、要素本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。

78
00:06:33.098 --> 00:06:38.178
基本のフォームであれば、対応を心配せず安心して使える要素だといえます。

79
00:06:38.178 --> 00:06:40.500
古くからWebを支えてきました。

80
00:06:40.500 --> 00:06:43.101
よくある間違いを三つ紹介します。

81
00:06:43.101 --> 00:06:48.464
一つ目は、パスワードなどの秘密情報をゲットで送ってしまうことです。

82
00:06:48.464 --> 00:06:53.503
値はユーアールエルに残り、履歴や共有から漏れる危険があります。

83
00:06:53.503 --> 00:06:57.241
二つ目は、入力欄にネームを付け忘れることです。

84
00:06:57.241 --> 00:07:01.142
見た目は入力できても、その項目は送信されません。

85
00:07:01.142 --> 00:07:05.531
三つ目は、ブラウザーの入力チェックだけに頼ることです。

86
00:07:05.531 --> 00:07:12.845
リクワイアードなどの検証は利用者への助けにはなりますが、改ざんされた送信までは防げません。

87
00:07:12.845 --> 00:07:18.534
受け取り側のサーバーでも必ず検証を行う、この原則を忘れないでください。

88
00:07:18.534 --> 00:07:20.972
公開前の確認が安全を守ります。

89
00:07:20.972 --> 00:07:26.660
間違いの多くは、送信後にアドレスバーや届いたデータを見れば気づけます。

90
00:07:26.660 --> 00:07:28.936
送信まで試すことが大切です。

91
00:07:28.936 --> 00:07:31.003
最後にまとめとチェックです。

92
00:07:31.003 --> 00:07:38.236
フォームは入力項目をまとめ、アクションで送信先、メソッドで送信方式を決めてサーバーへ送る要素です。

93
00:07:38.236 --> 00:07:45.469
ゲットは検索のようにユーアールエルに出てよい内容に、ポストは個人情報やファイル送信に使い分けます。

94
00:07:45.469 --> 00:07:51.595
公開前には、目的に合った方式か、必要な項目にネームがあるか、タブやエンターなど標準の操作で使えるか、

95
00:07:51.595 --> 00:07:57.721
三百二十ピクセル程度の狭い画面でも欠けていないかを確認しましょう。

96
00:07:57.721 --> 00:08:03.921
自分のページで入力を受け付ける場面があれば、ぜひフォームを正しく使ってみてください。

97
00:08:03.921 --> 00:08:05.250
お疲れさまでした。

98
00:08:05.250 --> 00:08:12.188
まずは検索フォームのような小さな例から作り、送信の流れを一度体験してみることをおすすめします。