問題
10formタグとinputタグを使って簡易的なフォームを作ろう
この問題では、Webサイトの問い合わせフォームなどで見かけるフォームを作る為のタグについて学習します。 フォームとは、入力欄や送信ボタンをひとまとめにしたものを指します。フォームを使用することで、名前やメールアドレスなどブラウザで入力した情報をサーバーへ送ることができます。
HTMLの問題に挑戦しよう！
問題
「formタグとinputタグを使って簡易的なフォームを作ろう」
①formタグにaction属性とmethod属性用いて、送信先・送信方法を指定しましょう。
(送信先:ninja.php 送信方法:post)
②inputタグのtype属性を使用して1行のテキスト入力フォームと送信ボタンを作成してください。
③テキスト入力フォームにはname属性を使って名前を付けてください。
(名前:your-name)
期待する画面を確認しながら作成していきましょう。
期待する画面
解答と解説（formタグとinputタグを使って簡易的なフォームを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
formタグを使って入力フォームを定義します。
action属性には指定されていた「ninja.php」、method属性にはpostを指定します。
※ここで使用するninja.phpは存在しないデータのため送信されません
次に入力形式を定義していきます。
formタグの中にinputタグを書いてtype属性でtextを指定します。
textは1行のテキストボックスを作成してくれます。
送信ボタンはtype属性にsubmitを指定します。
ボタンに表示される名前はvalue属性に書きます。
最後に要素を区別する為に使われるname属性を用いて
テキスト入力フォームにyour-nameを指定します。
同ページにボタンが複数あった場合などの特定に必要です。
補足
inputタグを用いてテキスト入力フォームと送信ボタンを作成できても
formタグで送信先と送信方法を指定していなければデータを送ることはできません。
送信先はaction属性で指定し、送信方法はmethod属性で指定します。
送信方法は主にgetまたはpostを指定します。
getはURLの末尾にデータを付けてWebサーバーに送信する形式で
postはデータを見えない所に付けた状態でWebサーバーに送信します。
一般的にはpostを使う事が多いです。
ポイント
formタグとは
formタグとは、入力、送信フォームを作成する際に使用されるHTMLのタグです。
formタグで囲った部分がひとまとめにフォームとなり、フォームの中にinputタグやtextareaタグなど記述していきます。
また、action属性を使用することでどのプログラムに値を渡すか、どのようなメソッド（送信方法）でデータを送信するかを決めることができます。
inputタグとは
inputタグとは、テキスト入力欄や実行ボタンなどを構成する部品作成のHTMLタグです。
type属性を用いることで、テキストボックス、ラジオボタン、実行ボタン、リセットボタンなどの部品を種類を指定することができます。
