ボタンと送信について
本日の教材動画はこちら
最後に今まで習ったフォーム関連の仕上げともいえる、送信ボタンについてです。
<ボタン>の種類について
まずボタンには下記の2タイプ(2タグ)が存在します。
【 inputタグ / type="submit" 】
入力したデータを送信するときに押すボタン。そのままですね!データ送信以外には基本使われないらしい。ボタンとして表示したい文字は value="〇〇" で指定。使い方は<input type="submit" value="〇〇">となる。
【 buttonタグ / Javascrip】
こちらはJavaScripなどを使って処理を実行するのに使うボタン。重要なのは送信ボタンなわけではなく、あくまで「処理を実行するためのボタン」であること。処理が「送信する」という内容なら結果的に送信ボタンになるが、内容が別なら勿論その処理内容を実行する形になる。使い方は今回の動画で教えてもらえず。(javaだからか?)
<送信方式>について
データを送る方法も下記の2タイプ(2方式)が存在する。送りたい内容によって使い分けるといい。
【 GET方式 】
データをURLの一部として送る方法。たまに長ーいURLがありますが(http:/xxx.info?param!!1=value&!!=24!&~~… みたいなの)ああいうのがGET方式となります。URLが宛名(住所)だとしたら、宛名の後ろに手紙の内容も書いちゃおうという感じですね!なのであまり長い内容は送ることができません。(URLがあまりに長くなるため)内容がURLに書いてあるため、郵便配達員さんなどには内容がばれてしまう欠点がある。
【 POST方式 】
データを裏でまとめて送る方式。データは見えない状態で送られるため、GET方式とは違いURLは長くならない。こっちは宛名を書いて、さらに内容を書いた紙を封筒に入れて送るようなイメージですね。こっちは封筒にいれているため、郵便配達員さんでも中身を知ることはできず(無理やりあけたら見れますが)、封筒に何枚でも手紙は入れれるため内容の長さに制限などもない。
フォームなどのデータを送る場合は基本POSTで送ることがほとんどとのこと。ちなみに送信方式を何も設定しなかった場合の初期値はGETになる模様。
<form>タグ
送信方式を決めたら、今度は「どこからどこまでのデータを送るか?」を指定してあげる必要がある。そこで使うのがformタグだ!つまりこのformタグを設定してあげないとデータを送信することはできない。入力フォーム全体を囲むことで、ひとつのデータとして送信する単位を決めることができる。
使い方は送りたいフォーム内容を<form></form>で囲う。更にプラスして method="〇〇"で「どんな方式で送るのか(POSTかGETか)」と、action属性で「どこに送るのか」を一緒に設定してあげる必要がある。
<action>属性について
上記の「どこに送るのか」を指定してあげるのがこのaction属性となる。ページの動作確認のため自分に送りたい場合は action="#"としてあげるといい。送信ボタンをおしてページが更新(選択した内容が白紙に戻る)されるようならきちんと作動していることになる。
使い方がよくわからず、試しに自分のメールアドレスを" "内にいれてみたが何も起きなかった…。そういう使い方ではないらしい。調べてみたらactionは厳密には「送信先URLを指定」するという意味があるらしく、ここに書かれる内容は mail.php など、サーバーの情報が入るようだ。
<フォーム内容を送信>するためには
上記を全てまとめると、フォーム内容を送信するにはこのような書き方をすればいい
・フォーム内容を作る(今まで習ったタグを詰め込んで好きに作る)
・フォームの最後に送信ボタンをつける( input type="submit" タグ)
・最後に作ったフォーム内容をformタグで囲む(送信方式と送信先も設定してあげる)
<form method="〇〇" action="〇〇"></form>
以上でHTMLの勉強はおしまいだ!!!ぶっちゃけ実際にフォーム内容送れてないし、まだわからんだらけの所も多いが、CSSやJavaなど他の要素と組み合わせて使う前提だろうし今後学習していくのであろうな!多分!
【参考サイト】