formタグの使い方

formはサーバーにデータを送信するための仕組みです。GETメソッド・POSTメソッドの違いについて解説します。

formタグの説明

フォームとは、サーバーにデータを送信する時に必要となるものです。

具体的には掲示板やアンケート・お問い合わせフォームなどに使用します。

フォームで送信したデータをWebサーバに送り、フォームの内容を処理実行し、データベースの内容結果をHTMLなどにして返したり、送信内容をメールで送信したりします。

よく利用する例として、GmailやFacebookなどのWEBサービスへの登録などをおこなったことがあるのではないでしょうか。その際、個人情報を入力して、最後に送信ボタンを押します。そうすると登録完了のお知らせが届いたりしますね。このデータを送信する部分がフォームの機能です。

1. action属性
   サーバ側プログラムのurlを記述します。要するに宛先です。
2. method属性
   フォームデータの送信方法を指定する。GET方式とPOST方式があります。
3. enctype属性
   method属性にPOST方式を指定した場合

 

  パスワード
 
 

  
 

GETとPOSTの違い

上記までの説明でHTTP通信によって、クライアント側からサーバー側にデータのリクエストを送信できることはご理解いただけたのではないでしょうか。

formの機能は送信ボタンを押した時 action 属性が指定するURLにアクセスします。その際のデータの受け渡し方法を method 属性の役割です。method にはGETとPOSTのいずれかを指定します。

２つの違いを簡単にいうと、POSTの方がセキュリティー面で安全性が高いことです。GETの場合は情報が筒抜けになりますので、ユーザーのログイン情報などの機密性の高いデータを扱う場合はつねにPOSTを使います。POSTの場合、クエリがURLではなくhttpd headerのメッセージbodyに格納されるためです。

一方GETのリクエストはURLにクエリが残るのでURLに表示された情報を再度再現したい場合には役立ちます。例えばGoogle検索で「えび」を検索したとします。すると下のようなURLになっていることに気づくでしょう。GoogleにGETメソッドでリクエストしたということを表す良い例です。

https://www.google.co.jp/search?q=%E3%81%88%E3%81%B3&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&ei=XaZYWfybAavU8Aee0brABA

これはそのままブックマークなどに保存しておくことができます。

注）当サイトでは基礎知識のみの記載になっております。より詳しく知りたい方は、サーバーに関する書籍で学んでいただくのがよろしいかと思います。

イラストが豊富で初心者の方がWebの勉強をするにはちょうどいい書籍です。ホームページを開発するには俯瞰的に全体像を掴める本を先に読んでおくと後々役に立ちます。クリックするとAmazonのページが開きます。
イラスト図解式 この一冊で全部わかるWeb技術の基本

formタグとよく一緒に使われるタグ

formタグを利用するには inputタグ・textareaタグ・select/optionタグを使うことが多いので詳細を知りたい方は下記の対象ページも同時に読み進めてください。

inputタグの使い方
textareaタグの使い方
select/optionタグの使い方