お問い合わせフォームをアレンジ!HTMLのフォームを構成するタグを紹介

html フォーム web制作

Webサイトを運営していれば、アンケートや問い合わせを受け付けたいときが多々あります。そこで登場するのがHTMLの「フォーム」という機能です。

WordPressでは簡単にお問い合わせフォームを作成できるプラグインがあります。Web初心者でも簡単にブログを始められる、WordPressならではの機能です。

しかしサイトが大きくなってくると、プラグインの機能だけでは物足りなく感じます。

オリジナルのフォームを作ろうとすると、CGIなどのプログラムが必要で難しいですが、フォームがどんな要素で出来ているかを知ることで、ちょっとしたアレンジは可能です。

ということで、今回はフォームを構成する要素を見ていきたいと思います。

はじめにHTMLの勉強をしてからのほうが、理解しやすいかもしれません。

HTMLを独学で学ぶ!web専門学校で学んだHTMLの基本まとめ
ここではweb専門学校で最初に学んだ、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

1つしか選択できない選択肢を作る時に使います。

<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>

1行以上の文字列を入力できるテキストエリアを表示します。

最後に

webサイトでよく見かけるお問い合わせフォームは、ほとんどこれらのタグで構成されています。

実際フォームを作る時は、見やすいようにテーブルを作って、その中にフォームを構成するタグを埋め込むことが多いです。