webデザイン用語「formタグ」を全部教えて！

こんにちは、ハナさん。私はトータルネットジャパンのリュウと申します。WEBデザインに欠かせない「formタグ」について教えてあげますね。formタグは、WEBページでフォームを作成するためのタグです。入力欄や送信ボタンを設置することができ、ユーザーが簡単に入力できるようになります。また、formタグには様々な属性があります。例えば、method属性を指定することでフォーム送信時のHTTPのメソッドを指定できます。また、action属性を指定することでフォームの送信先を指定できます。これらの属性をうまく使いこなすことで、ユーザーにとって使いやすいWEBページを作ることができます。是非、課題達成のために役立ててくださいね。

このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

Table of Contents

何ができるの？formタグの機能一覧

ハナ：リュウさん、formタグって何ができるの？

リュウ：formタグは、ウェブサイトのフォーム（入力欄や送信ボタンなど）を作るために使います。例えば、お問い合わせフォームやユーザー登録フォームなどですね。

ハナ：へぇ、でも、具体的にどんな機能があるの？

リュウ：formタグには、入力された情報を受け取るための「action」と、入力欄の種類を指定する「input type」、送信ボタンのラベルを指定する「button」という機能があります。また、必須入力チェックやメールアドレス形式のチェックなどのバリデーション機能もありますよ。

ハナ：なるほど！actionって何ですか？

リュウ：actionはフォームが送信されたときに、どのURLに送信するかを指定する属性です。例えば、「/contact」に送信すると、お問い合わせフォームが送信されたときに、/contactというURLに送信されます。ここでは「/contact」は例えばの一つです。

formタグって何？基本情報を教えて！

ハナ：リュウさん、formタグって何？基本情報を教えて！

リュウ：ハナさん、formタグとは、Webページ上で情報を入力する場合に使用するHTMLのタグの1つです。例えば、お問い合わせやログインフォームなどで使われます。このタグを使うことで、Webサイト上でユーザーが入力した情報をサーバーに送信することができます。分かりやすい例えとしては、手紙を送る際に封筒に宛先や差出人を書くようなものだと思ってください。それでは分かりましたか？

formタグの属性って何がある？

ハナ:リュウさん、formタグって何があるの？

リュウ:そうですね、formタグにはいろんな属性がありますよ。例えば、action属性はフォームのデータを送信する先のURLを指定するものです。また、method属性は送信時のHTTPメソッドを指定するもので、一般的にはGETやPOSTが使われますよ。

ハナ:なるほど。他にも何か属性があるの？

リュウ:はい、例えばname属性ではフォームのデータをサーバに送信する際のキーとなる名前を指定したり、placeholder属性では入力欄の初期表示文字を指定したりすることができます。他にもいろいろありますよ。

ハナ:なるほど、勉強になりました。ありがとうございました！

リュウ:どういたしまして、ハナさん。また何かわからないことがあったら聞いてくださいね。

formタグのaction属性って何？

ハナ:リュウさん、formタグのaction属性って何？

リュウ:ふむふむ、ハナさん。formタグのaction属性というのは、フォームから送信されたデータを転送する先のURLを指定する方法だよ。例えば、『お問い合わせ』フォームを作った時、『送信』ボタンを押したらどこに送信されるかをaction属性で指定するんだ。

formタグのmethod属性って何？

ハナ：リュウさん、formタグのmethod属性って何？

リュウ：ハナさん、formタグのmethod属性というのは、フォームから送信するときに使うHTTPメソッドを指定するものです。例えば、GETやPOSTなどがあります。

ハナ：HTTPメソッドって何ですか？

リュウ：HTTPメソッドとは、WebブラウザとWebサーバーがやりとりする際に使用する命令のことです。それぞれのHTTPメソッドには、使い方や役割があります。GETだと、リソースの取得、POSTだと、リソースの送信や更新などができます。

ハナ：なるほど、GETとPOSTの違いが分かりました。ありがとうございます！

formタグのenctype属性って何？

ハナ：リュウさん、formタグのenctype属性って何？

リュウ：そうですね、ハナさん。enctype属性は、formタグで送信するデータ形式を指定するものですよ。例えば、ファイルを送信する場合は、multipart/form-dataと指定します。

ハナ：送信するデータって、どんなものがあるの？

リュウ：例えば、お問い合わせフォームの場合、名前やメールアドレスなどのテキストデータが送信されます。また、ファイルをアップロードする場合もあります。どちらも、enctype属性で指定した形式で送信されます。

ハナ：なるほど、わかりました。もう少し詳しく教えてもらえますか？

リュウ：例えば、テキストデータを送信する場合は、デフォルトでapplication/x-www-form-urlencodedという形式になります。しかし、ファイルを送信する場合は、この形式だと不適切なので、multipart/form-dataと指定します。これによって、ファイルのデータも正しく送信されますよ。

formタグのtarget属性って何？

ハナ：リュウさん、formタグのtarget属性って何？

リュウ：ハナさん、formタグのtarget属性は、フォームで入力されたデータを送信する先を指定するものです。つまり、データを送る先のURLを指定することができます。

ハナ：わかりました！でも、「_blank」とか書く場合もあるじゃないですか。それはどういう意味？

リュウ：そうですね。”_blank”は、フォームの送信先を新しいウィンドウやタブで開くことを指定する属性です。例えば、フォームで送信された結果を、別ウィンドウで表示させたい場合などに使われますよ。

ハナ：なるほど！でも、「_self」とか「_parent」とかでも指定できるって聞いたことがあります。それはどういう時に使うんですか？

リュウ：”_self”は、フォームの送信先を現在のウィンドウで開くことを指定する属性です。”_parent”は、親ウィンドウに対してフォームのデータを送信する属性です。例えば、親ウィンドウとポップアップウィンドウで、フォームに入力されたデータを共有したい場合に使われます。

ハナ：なるほど！ありがとうございました、リュウさん！

リュウ：どういたしまして、ハナさん。気になることがあればいつでも聞いてくださいね。

formタグとinputタグの違いは？

ハナ：リュウさん、formタグとinputタグの違いは何ですか？

リュウ：ふぅん、いい質問だね。formタグは、Webページにフォームを作るためのタグだよ。例えば、お問い合わせフォームやログインフォームを作るときに使うんだ。一方、inputタグは、フォームに表示される入力欄やボタンなどを作るためのタグだよ。例えば、名前を入力する欄や送信ボタンを作るときに使うんだ。わかりやすいかな？

formタグとbuttonタグの違いは？

ハナ：リュウさん、質問があるんですけど、formタグとbuttonタグの違いって何ですか？

リュウ：ふむふむ、いい質問だね、ハナさん。formタグとbuttonタグは、どちらもHTMLでWebページを作るときに使うものなんだけど、使い方が違うよ。

ハナ：そうなんですね、具体的にどう違うんですか？

リュウ：formタグは、ユーザーが入力したデータをサーバーに送るときに使うよ。例えば、ログインフォームやお問い合わせフォームなど、ユーザーがデータを入力する部分をformタグで囲って、送信ボタンを押すと送信される仕組みだね。
一方、buttonタグは、ユーザーがクリックするだけで何らかのアクションを起こしたいときに使うよ。
例えば、メニューのボタンやポップアップウィンドウを表示するボタンなどね。

ハナ：なるほど、そういう使い方があるんですね。ありがとうございます、リュウさん！

リュウ：どういたしまして、ハナさん。いつでも質問してね！

formタグとselectタグの違いは？

ハナ: リュウさん、formタグとselectタグの違いは何ですか？

リュウ: ふむふむ、良い質問だね、ハナさん。formタグは、フォーム全体を囲むタグで、ユーザーが入力するテキストやボタンなどの要素を指定するんだよ。一方、selectタグは、プルダウンメニュー（選択肢をドロップダウンさせて選ぶ方式）を作るために使われるタグだよ。たとえば、アンケートフォームで性別や年齢など、選択肢がある場合に使われるんだ。

ハナ: なるほど、そういうことなんですね！リュウさん、分かりやすく教えてくれてありがとうございます！

リュウ: どういたしまして、ハナさん。何か他に聞きたいことがあったら、また聞いてね！

formタグとtextareaタグの違いは？

ハナ：リュウさん、formタグとtextareaタグの違いってなんですか？

リュウ：あ、それはね、formタグは入力フォームや送信ボタンなどをまとめるタグで、textareaタグはコメントやメッセージなどを入力するための大きな枠を作るタグだよ。例えば、学校のプールに行くときに、プールに入るための入り口があるじゃない？

ハナ：うん、あるよ。

リュウ：プールに入るためにはそこから入って受付で申し込みをする必要があるでしょ？その受付がformタグで、申し込み用紙がtextareaタグに似ているイメージだよ。どちらも必要だけど、役割が少し違うんだ。分かったかな？

formタグとlabelタグの違いは？

ハナ:リュウさん、formタグとlabelタグの違いは何ですか？

リュウ:ふぉーむタグとれーべるタグの違いですね。ふぉーむタグは、ウェブサイトの入力フォームを作るのに使います。例えば、ログイン画面やお問い合わせフォームなどです。一方、れーべるタグは、フォームのラベルを作るために使います。フォームのラベルとは、例えば、名前とか、メールアドレスとか、入力する欄の横に表示されるテキストのことです。

ハナ:ふむふむ、それで、labelタグはfor属性と組み合わせて使うんですよね？

リュウ:そうですね！for属性を入力欄のIDと同じにすると、入力欄とラベルが紐付けられるので、ユーザーが入力欄を選んだときに、ラベルが強調されるようになります。入力欄が多い場合は、ラベルが生きてくるので、ぜひ活用してみてくださいね！

formタグとfieldsetタグの違いは？

ハナ:リュウさん、formタグとfieldsetタグの違いって何ですか？

リュウ:ハナさん、formタグとfieldsetタグは、どちらもHTMLで使う表示のためのタグですが、使い方に違いがありますよ。

ハナ:どういう違いがあるんですか？

リュウ:formタグは、フォームの集合体を作るためのタグで、ユーザーが入力をするときに使います。一方、fieldsetタグは、フォーム要素のグループ化をするためのタグです。つまり、formタグはユーザーが入力する部分全体を囲むのに対して、fieldsetタグは、入力欄をグループにして分けるのに使います。

ハナ:例えば、どんな風に使い分けるんですか？

リュウ:例えば、お問い合わせフォームを作る場合には、formタグで全体を囲み、入力欄をグループに分ける必要があるときにfieldsetタグを使います。また、フォーム要素がどのグループに属するかがわかるように、legendタグを併用することも多いですね。

ハナ:なるほど、そうやって使い分けるんですね。ありがとうございました、リュウさん！

リュウ:どういたしまして、ハナさん。HTMLのタグはたくさんあって、最初はどれが何の役割なのかわからないことも多いですが、徐々に理解していけば、素晴らしいWEBデザイナーになれると思いますよ！

formタグとlegendタグの違いは？

ハナ：リュウさん、formタグとlegendタグの違いってなんですか？

リュウ：ふむふむ、良い質問だね。formタグとlegendタグは、共にHTMLでフォームを作る時に使われるタグだよ。formタグは、フォーム全体を囲むタグで、入力項目を設置していくための土台になるんだ。一方のlegendタグは、フォーム内の入力項目(xxx、yyyなど)に対して、その目的を説明する要素で、伝わりやすく使われることが多いんだ。

ハナ：なるほど、フォームの土台と説明要素ってことですね。ありがとうございます、リュウさん！

formタグとoptgroupタグの違いは？

ハナ：リュウさん、formタグとoptgroupタグの違いを教えてください！

リュウ：あら、ハナさん、素晴らしい質問ですね！formタグは、フォームの要素をグループ化するタグです。入力フォームや送信ボタンなど、フォームに必要な要素をまとめて指定することができます。optgroupタグは、selectタグの中で選択肢をグループ化するタグです。例えば、アイスクリームの味を選ぶセレクトボックスがあったとき、フレーバーごとにグループ化して表示することができます。

ハナ：なるほど、formタグは入力フォームをまとめるためのタグ、optgroupタグは選択肢をグループ化するためのタグですね！もっと勉強して、かっこいいウェブサイトを作りたいです！

リュウ：頑張ってくださいね、ハナさん！私たちも応援していますよ！

formタグとoptionタグの違いは？

ハナ: リュウさん、formタグとoptionタグの違いは何ですか？

リュウ: それはね、formタグはフォームを作るために使うタグで、ユーザーが入力する欄を作ったり、送信ボタンを作るのに使います。一方、optionタグは、プルダウンメニューの選択肢を作るために使うタグだよ。例えば、好きな果物を選ぶときに出てくるリストの中身を作れるんだ。

ハナ: なるほど、formタグはユーザーが入力する場所を作って、optionタグは選択肢のリストを作るんですね。ありがとうございます！

formタグとdatalistタグの違いは？

ハナ：リュウさん、formタグとdatalistタグの違いは何ですか？

リュウ：ハナさん、formタグは、ユーザーが入力する情報をサーバーに送信するときに使うタグです。例えば、ユーザーがお問い合わせフォームに名前やメールアドレスを入力して送信する場合に使います。一方、datalistタグは、ユーザーが選択する項目を表示するために使うタグです。例えば、自動で補完される都道府県入力欄などに使われます。

ハナ：なるほど、formタグは情報を送るためのタグで、datalistタグは選択肢を表示するためのタグなんですね。ありがとうございます！

リュウ：どういたしまして、分かりやすく説明できてよかったです。もし他にわからないことがあれば、また聞いてくださいね。

formタグが使われるシチュエーションは？

ハナ：リュウさん、formタグが使われるシチュエーションは？

リュウ：あのね、formタグはウェブページ上でユーザからの入力を受け取る時に使用するんだよ。例えば、お問い合わせフォームやログインフォームなどでね。それらの情報をサーバに送る時に、formタグが役に立つんだよ。わかるかな、ハナさん？

formタグのベストプラクティスは？

ハナ:リュウさん、こんにちは！Webデザイナーになりたいんです！formタグのベストプラクティスって何ですか？

リュウ:ハナさん、こんにちは！formタグは、Webフォームデータを送信するときに使うものです。ベストプラクティスというのは、いいやり方、最適な方法という意味ですね。例えば、formタグは必ず閉じる必要があります。閉じ忘れると意図しない動作になってしまう可能性があるんですよ。分かりやすいですか？

ハナ:わかりました！formタグは閉じないとダメなんですね。ありがとうございます！

formタグのトラブルシューティング

ハナ：リュウさん、formタグを使っているのですが、うまく動作しません。どうすればいいですか？

リュウ：ふむふむ、formタグがうまく動かないと困りますね。どのようなトラブルなのか、詳しく教えてくれませんか？

ハナ：フォームの送信ボタンをクリックしても、何も起こらないのです。

リュウ：なるほど、それは確かに問題ですね。formタグの中身を確認してみましょう。formタグの開始タグと終了タグの間に、inputやtextareaなどのフォーム要素が入っているはずです。それらのフォーム要素には、name属性とvalue属性が必要です。また、formタグのaction属性には、フォームが送信された時に移動するページのURLを指定する必要があります。これらを確認して、もう一度試してみてください。

ハナ：なるほど、name属性とvalue属性、action属性を確認してみます。ありがとうございました！

リュウ：どういたしまして。わからないことがあったら、いつでも聞いてくださいね。がんばって！

神戸ホームページ制作プロ公式ブログ