VIDEO LESSON

HTMLのformタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の七十六本目は、フォーム、タグです。
0:07フォームは、テキスト入力欄やチェックボックス、送信ボタンといった入力項目をひとまとめにし、
0:12利用者が入力した内容をサーバーへ送るための入れ物です。
0:17検索窓やお問い合わせ、ログイン画面など、利用者とやり取りする場面には欠かせません。
0:22今回は、このフォームの役割と、送信の仕組みを順番に確認していきましょう。
0:27入力を受け付ける仕組み全体の土台になる要素です。
0:30身近なサイトの多くで使われている、利用者参加の入り口だと考えるとイメージしやすくなります。
0:36基本の書き方を確認します。
0:38フォームは開始タグと終了タグを両方書き、その間に入力欄やボタンを置きます。
0:44画面の例では、ラベルと入力欄、そして送信ボタンをフォームの中に並べています。
0:50この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。
0:55置き場所はボディの中です。
0:58注意点として、フォームの中に別のフォームを入れる入れ子はできません。
1:03送信したい項目は、必ず一つのフォームの中に収めるようにしましょう。
1:08まずはこの基本形を正確に書けることが土台になります。
1:12書いたあとは、タグの対応が取れているかを目で追って確認する習慣を付けましょう。
1:18地味ですが大切な作業です。
1:21次に、送信の要となる二つの属性を見ます。
1:23アクションはデータの送信先ユーアールエルを指定し、メソッドは送信方式を指定します。
1:29画面の例では、検索用のパスへ、ゲット方式で送る設定になっています。
1:34ここで大切なのは、タグを置いただけでは受け取り処理は自動で生まれないことです。
1:40送信先には、実際にデータを受け取って処理するサーバー側の仕組みが必要です。
1:45フロント側の見た目と、受け取り側の処理はセットで考える、と覚えておきましょう。
1:51この二つがフォームの設計の出発点になります。
1:54送信先を間違えるとデータは届かないため、パスやファイル名の写し間違いにも注意してください。
2:01メソッドの代表的な二つ、ゲットとポストの違いを整理します。
2:06ゲットは入力した値がユーアールエルの末尾に付いて送られるため、検索キーワードのように、
2:12共有したり再読み込みしたりしてもよい内容に向いています。
2:18一方ポストは、値がユーアールエルには表示されず、リクエストの本文として送られます。
2:26パスワードなどの秘密情報は、履歴や画面に残りやすいゲットでは絶対に送らないでください。
2:33目的に合わせて二つを使い分けることが、安全なフォーム作りの第一歩です。
2:39長文の送信もポストが基本です。
2:42迷ったときは、その情報がアドレスバーに見えてよいかどうかを基準に判断すると選びやすくなります。
2:50記事の活用事例を読み解きます。
2:53例は、教材名を入力して検索条件として送る、シンプルな検索フォームです。
2:59ラベルと入力欄は、フォーとアイディーを一致させて対応付け、入力欄のネームが送信時の項目名になります。
3:08必須を意味するリクワイアードを付けると、空のままでは送信できなくなります。
3:15試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、
3:19保存後に再読み込みしてください。
3:24そして送信後のユーアールエルに、入力した値がどう付くかを目で確認すると、
3:29ゲットの仕組みがよく分かります。
3:33ブラウザーのアドレスバーに注目すると、送信の動きが目に見えて、仕組みへの理解が深まります。
3:41そのほかの主な属性を確認します。
3:44エンタイプはポスト送信時のデータ形式を指定し、ターゲットは送信結果をどこに表示するかを決めます。
3:52オートコンプリートは自動入力の助けになる指定で、ノーバリデートはブラウザーの標準チェックを外す真偽属性です。
4:00真偽属性は、あるかないかで決まる点にも注意してください。
4:05たとえば、無効化したくないのに属性を書き残すと、意図と違う動きになります。
4:11属性は便利ですが、付ける理由を一つずつ説明できる範囲で使うのがコツです。
4:17名前を表すネーム属性もフォームの識別に使えます。
4:21すべてを一度に覚える必要はありません。
4:24使う場面が来たら、そのつど確認しながら書き足していきましょう。
4:29フォームの中に置く部品との関係を整理します。
4:32実際の入力欄はインプットやテキストエリア、セレクトなどが担い、フォーム自体はそれらを束ねて送る役割です。
4:40ラベルは各入力欄の説明で、クリックでも入力欄を選べるようになります。
4:45ボタンはタイプをサブミットにすると送信ボタンになり、送信しないボタンにはボタンを明示します。
4:51特に大切なのが、各入力欄のネームです。
4:54ネームがない項目はサーバーへ送られないため、送信したい項目には必ずネームを付けてください。
5:01ここを忘れると、見た目は完成でもデータが届きません。
5:05部品一つひとつの役割が分かると、フォーム全体の読み書きがぐっと楽になります。
5:10順に覚えていきましょう。
5:12ファイルを送る場合の注意です。
5:14画像などのファイルをフォームで送信するときは、メソッドをポストにし、エンタイプにマルチパート、
5:20フォームデータを指定する組み合わせが基本になります。
5:25この指定がないと、ファイル名だけが送られ、中身が届かないといった失敗が起こります。
5:32画面の例のように、ファイル用のインプットとセットで書く形を覚えておきましょう。
5:38あわせて、受け取り側のサーバーでも、ファイルを受け付ける処理と容量の制限を確認する必要があります。
5:45形式と受け取り側、両方がそろって初めてファイル送信が成立します。
5:50試すときは、小さな画像ファイルから始めて、届くかどうかを落ち着いて確かめてみてください。
5:57ブラウザー互換性を確認します。
5:59記事が参照するエムディーエヌのデータでは、フォーム要素は、クロームが一以降、
6:06エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで非常に古くから対応しています。
6:13アクションやメソッド、エンタイプといった基本属性も同じ範囲で使えます。
6:18一方で、オートコンプリートはクローム十四以降、ノーバリデートはクローム十以降など、
6:22属性ごとに差があります。
6:25新しい属性を使うときは、要素本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。
6:33基本のフォームであれば、対応を心配せず安心して使える要素だといえます。
6:38古くからWebを支えてきました。
6:40よくある間違いを三つ紹介します。
6:43一つ目は、パスワードなどの秘密情報をゲットで送ってしまうことです。
6:48値はユーアールエルに残り、履歴や共有から漏れる危険があります。
6:53二つ目は、入力欄にネームを付け忘れることです。
6:57見た目は入力できても、その項目は送信されません。
7:01三つ目は、ブラウザーの入力チェックだけに頼ることです。
7:05リクワイアードなどの検証は利用者への助けにはなりますが、改ざんされた送信までは防げません。
7:12受け取り側のサーバーでも必ず検証を行う、この原則を忘れないでください。
7:18公開前の確認が安全を守ります。
7:20間違いの多くは、送信後にアドレスバーや届いたデータを見れば気づけます。
7:26送信まで試すことが大切です。
7:28最後にまとめとチェックです。
7:31フォームは入力項目をまとめ、アクションで送信先、メソッドで送信方式を決めてサーバーへ送る要素です。
7:38ゲットは検索のようにユーアールエルに出てよい内容に、ポストは個人情報やファイル送信に使い分けます。
7:45公開前には、目的に合った方式か、必要な項目にネームがあるか、タブやエンターなど標準の操作で使えるか、
7:51三百二十ピクセル程度の狭い画面でも欠けていないかを確認しましょう。
7:57自分のページで入力を受け付ける場面があれば、ぜひフォームを正しく使ってみてください。
8:03お疲れさまでした。
8:05まずは検索フォームのような小さな例から作り、送信の流れを一度体験してみることをおすすめします。

この動画で学べること

formタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。入力項目をまとめます。action と method で送信先・方式を設定し、受け取り側でも検証します。

解説記事・サンプルコードを読む：HTMLのformタグとは？属性・使い方・ブラウザー互換性と活用例 →