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