Webサイトを運営していれば、アンケートや問い合わせを受け付けたいときが多々あります。そこで登場するのがHTMLの「フォーム」という機能です。
WordPressでは簡単にお問い合わせフォームを作成できるプラグインがあります。Web初心者でも簡単にブログを始められる、WordPressならではの機能です。
しかしサイトが大きくなってくると、プラグインの機能だけでは物足りなく感じます。
オリジナルのフォームを作ろうとすると、CGIなどのプログラムが必要で難しいですが、フォームがどんな要素で出来ているかを知ることで、ちょっとしたアレンジは可能です。
ということで、今回はフォームを構成する要素を見ていきたいと思います。
はじめにHTMLの勉強をしてからのほうが、理解しやすいかもしれません。
フォームの基本要素「formタグ」
フォームはこのタグで囲まれています。
<form> ～ </form>
実際にフォームに入力したデータを送信するには、フォームタグにデータをどう処理するかを書きこむ必要があります。次はそれを見ていきます。
action属性
- action=”送信先のプログラムまたはメールアドレス”
アクション属性は、入力されたデータをどこに送信するかを表しています。
<form action=” 送信先のプログラムまたはメールアドレス”> ～ </form>
method属性
- method=”getまたはpost”
メソッド属性は入力されたデータの送信形式を表しています。
getは送信サイズが小さいとき（検索キーワードなど）に使われ、postは送信サイズが大きいとき（アンケートなど）に使います。
お問い合わせフォームはpostを使います。
<form method=”getまたはpost”> ～ </form>
これがフォームの大枠となります。
action属性とmethod属性はデータを確実に送信できるように、必ず記述する必要があります。
フォームの入力欄を作るためのタグ
次は実際にフォーム中にいくつも登場する入力欄を作るタグを見ていきます。
名前を入力する欄や、選択肢からチェックするものなど色々な種類があります。
inputタグ
type属性
○の部分にこれから紹介する値を入れることで、色々な形の入力欄を作ることが出来ます。
<input type=”○”>
- text
文字列の入力が出来ます。氏名や住所の入力欄に使います。
<input type=”text”>
- password
パスワードの入力欄に使われます。近くの人に入力した文字が分からないように、文字が●などに置き換わります。
<input type=”password”>
- checkbox
複数選択可能な選択肢を作る時に使います
<input type=”checkbox” value=”選択肢の名前”>
- radio
１つしか選択できない選択肢を作る時に使います。
<input type=”radio” value=”選択肢の名前”>
- submit
送信ボタンを表示します。
<input type=”submit”>
- image
好きな画像で送信ボタンを表示します。
<input type=”image” src=”画像のパス”>
name属性
送信されてきた時、何のデータなのかわかるように名前を付けておきます。
nameをつけておかないと、入力されたデータしか送られてきません。
例）
メールに送信されてきたときに、入力したデータが氏名だということが分かるようにカテゴリーを付けました。
<input type=”text” name=”氏名”>
value属性
各入力欄の初期値を入力します。チェックボックスとラジオボタンには必ず付けます。
<input type=”checkbox” value=”選択肢の名前”>
select、optionタグ
プルダウンメニューを表示します。
<select> <option>リスト①</option> <option>リスト②</option> </select>
textareaタグ
<textarea name=”コントロール名” rows=”行数” cols=”文字数”>～</textarea>
１行以上の文字列を入力できるテキストエリアを表示します。
最後に
webサイトでよく見かけるお問い合わせフォームは、ほとんどこれらのタグで構成されています。
実際フォームを作る時は、見やすいようにテーブルを作って、その中にフォームを構成するタグを埋め込むことが多いです。
