問題

10
HTML

formタグとinputタグを使って簡易的なフォームを作ろう

この問題では、Webサイトの問い合わせフォームなどで見かけるフォームを作る為のタグについて学習します。 フォームとは、入力欄や送信ボタンをひとまとめにしたものを指します。フォームを使用することで、名前やメールアドレスなどブラウザで入力した情報をサーバーへ送ることができます。

ポイント

formタグとは

formタグとは、入力、送信フォームを作成する際に使用されるHTMLのタグです。
formタグで囲った部分がひとまとめにフォームとなり、フォームの中にinputタグやtextareaタグなど記述していきます。

また、action属性を使用することでどのプログラムに値を渡すか、どのようなメソッド(送信方法)でデータを送信するかを決めることができます。

inputタグとは

inputタグとは、テキスト入力欄や実行ボタンなどを構成する部品作成のHTMLタグです。
type属性を用いることで、テキストボックス、ラジオボタン、実行ボタン、リセットボタンなどの部品を種類を指定することができます。

HTMLの問題に挑戦しよう!

問題

formタグとinputタグを使って簡易的なフォームを作ろう

①formタグにaction属性とmethod属性用いて、送信先・送信方法を指定しましょう。
(送信先:ninja.php 送信方法:post)
②inputタグのtype属性を使用して1行のテキスト入力フォームと送信ボタンを作成してください。
③テキスト入力フォームにはname属性を使って名前を付けてください。
(名前:your-name)

期待する画面を確認しながら作成していきましょう。

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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を使う事が多いです。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET