問題
10formタグの基本
HTML formタグは、お問い合わせフォームや会員登録フォームなどで入力された情報をサーバーへ送信するために使用されるタグです。formタグだけではフォームは完成せず、inputタグなどの入力部品と組み合わせて利用します。この問題では、action属性やmethod属性の役割を理解しながら、HTML formタグの基本的な使い方を学んでいきましょう。
【HTML】 formタグとは
formタグの役割
formタグは、ユーザーが入力した情報をまとめてサーバーへ送信するためのHTMLタグです。フォーム全体を管理する役割を持ち、お問い合わせページや会員登録画面など、多くのWebサイトで利用されています。
action属性とmethod属性の役割
HTML formタグでは、action属性とmethod属性を使用してフォーム送信の設定を行います。action属性は入力データの送信先を指定し、method属性はデータの送信方法を指定します。特にお問い合わせフォームや会員登録フォームではPOSTが利用されることが多く、formタグを学ぶうえで重要な基本知識のひとつです。
【中級】HTML formタグを使ったフォーム作成に挑戦しよう
問題
「formタグの基本」
① formタグにaction属性とmethod属性を設定し、送信先を「ninja.php」、送信方法を「post」に指定してください。
② inputタグのtype属性を利用して、1行のテキスト入力欄と送信ボタンを作成してください。
③ テキスト入力欄にはname属性を設定し、「your-name」という名前を付けてください。
HTML formタグの基本的な使い方を確認しながらフォームを作成してみましょう。
期待する画面
解答と解説（formタグの基本）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
HTML formタグは、ユーザーが入力した情報をサーバーへ送信するためのフォームを作成する際に使用されるタグです。お問い合わせフォームや会員登録フォーム、ログインフォームなど、多くのWebサイトで利用されています。
今回の問題では、まずformタグにaction属性とmethod属性を設定しています。action属性はフォームの送信先を指定するための属性で、今回は「ninja.php」を設定しています。method属性はデータの送信方法を指定する属性で、主にGETとPOSTが使用されます。個人情報を送信するフォームではPOSTが利用されることが一般的です。なお、この問題で使用している「ninja.php」は実際には存在しないため、送信処理は行われません。
次に、formタグの中にinputタグを配置しています。inputタグはユーザーが情報を入力するためのフォーム部品で、type属性によって役割が変わります。type="text"を指定すると1行のテキスト入力欄が作成され、type="submit"を指定すると送信ボタンを表示できます。
また、name属性は入力された値に名前を付けるための重要な属性です。今回は「your-name」を指定しています。フォームが送信されると、サーバー側ではname属性をもとに入力内容を識別するため、実務でも必須となる設定です。
初心者がよく間違えるポイントとして、inputタグだけを作成してformタグを書かないケースがあります。しかし、formタグがなければ入力内容を送信できません。HTML formタグはフォーム全体を管理する役割を持つため、inputタグとセットで理解しておくことが重要です。
補足
HTML formタグとinputタグは、お問い合わせフォームや会員登録フォームなどで利用される基本タグです。フォーム作成では、action属性・method属性・name属性の役割を理解しておくことが重要です。関連問題やHTML入門講座も活用しながら、フォーム周りの理解を深めていきましょう。
・フォーム関連問題：selectタグでプルダウンメニューを作ろう
・input応用：テキストボックスの文字を変化させよう
・問題集一覧：HTML問題集トップ
・HTMLの基礎から学びたい方：HTML入門講座
HTML formタグのポイント
formタグとinputタグの関係を理解しよう
HTML formタグはフォーム全体を管理する役割を持ち、inputタグはユーザーが情報を入力するための部品として利用されます。formタグだけでは入力欄は表示されず、inputタグだけでは入力内容を送信できません。実際のWeb制作では、両方のタグを組み合わせて利用するため、それぞれの役割の違いを理解しておくことが大切です。
HTML formタグはWeb制作の基礎スキル
HTML formタグは、お問い合わせフォームやログインフォーム、会員登録フォームなど多くのWebサイトで利用されています。今後はtextareaタグやselectタグ、JavaScriptによる入力チェックなども学ぶことで、より実践的なフォームを作成できるようになります。
独学でフォーム作成につまずいた場合は、実務経験者へ相談しながら学習を進めるのもおすすめです。
