なんと、お問い合わせフォームやメール送信フォームはパパッと簡単に作れてしまいます。難しいのは、サーバー側での処理ですが、今回はいくつかの記事に分けて細かく詳しく説明していきます(>ω<)
この記事では、htmlでメールフォームを作る時に使われるformタグ、inputタグ、selectタグ、textareaタグについて説明します。
実は、facebookのログイン画面やTwitterのアカウント登録画面、アンケートなどで入力するフォームもhtmlのformを使って記述されています。一度覚えてしまえば何かと使えそうですね！
基本要素「formタグ」と「action属性」「method属性」
htmlでメールフォームを作るには、formタグを使います。
formタグにはaction属性とmethod属性を指定してあげることが必要です。
formタグ
- 入力フォームや送信フォームを表示させたい時に使う
- formタグの間に他のタグを入れることによって様々な部品を配置することができる
- 表示されたフォームに入力されたデータは、送信ボタンを押すとCGIプログラムなどに送信されて処理される
- 処理の仕方を属性で指定する
<form>
...
</form>
form
...
action属性
- formタグに指定する属性で、必ず指定しなければならない
- フォームの送信ボタンを押して送信されるデータの送信先を指定する
- データの送信先のことをURIという
- 指定するのはデータを受け渡す処理をしてくれるサーバーのCGIプログラムのURI
<form action="CGIプログラムのURI">
...
</form>
form action="CGIプログラムのURI"
CGIプログラム
- Common Gateway Interface(コモンゲートウェイインターフェイス)の略
- CGIとはWebサーバーかプログラムを実行するときのルールのこと
- CGIの仕組みによって起動されるプログラムのことを主にCGIプログラムという
- メールフォームの場合は、メールフォームに入力されて送信されたデータを受け取ってあとの応答をCGIプログラムで処理される
- CGIプログラムはRubyやJava、C言語など様々なものを使用して記述できる
method属性
- formタグに指定する属性で、必須ではない
- 送信するときの転送方法を指定する
- postとgetがある
method属性-get
- formタグのmethodをgetに指定すると、入力したフォーム内容のデータがURIにくっついて送信される
- 例 http://www.hogehoge.com/cgi.php?name=pippi&old=21&address=tokyo
- 例2 Googleで検索してURLが表示されるエリアを見ると、似たような文字列があるはず。これはあなたが検索したキーワードをURIの一番最後にくっつけて送信している
※その際、日本語で入力すると特殊なコードに変換されて文字化けするので、英語(アルファベット)で検索した方がわかりやすい。
<form action="CGIプログラムのURI" method="get">
...
</form>
form action="CGIプログラムのURI" method="get"
method属性-post
- formタグのmethodをgetに指定すると、入力したフォーム内容はURIとは別の場所に保管されてデータが送信される
- 入力したフォーム内容のデータは外側からの表示では見ることができないので安全性が高い
<form action="CGIプログラムのURI" method="post">
...
</form>
form action="CGIプログラムのURI" method="post"
getとpostの違い
- getには送信するデータ量の制限がある
- getは送信したデータ内容が送信先のサーバーにログとして残ってしまうことがある
- postには送信するデータ量の制限がない
- 一概には言えないがgetはサーバー側にあるデータの取得に適している
- 一概には言えないがpostはユーザー側が情報を送信するのに適している