HTML5：タグだけで簡単に「お問い合わせフォーム」を作成する (サンプルあり)

この記事について

HTML5 で大幅強化された form 要素を使って問い合わせフォームを作ってみるエントリーです。
form 周りの要素だけでも膨大な情報量になりますので、今回はその中から更に問い合わせフォーム作成に必要な情報のみに絞ってのご紹介となります。

なお、HTML5 は未だ各ブラウザで対応中の技術です。
お使いのブラウザで正しく表示されない可能性がございます。
推奨ブラウザは Opera 11.52 です。

form タグとは？

データの入力・送信フォームを構築するタグです。
input や textarea や select など、たくさんの要素と組み合わせることで様々な入力形態を持ったフォームを構築することも可能です。
HTML5 で強化され、JavaScript に頼らずに入力データの書式チェックなどが行えるようになりました。
form タグによって送信されたデータを処理するには PHP などのサーバーサイドスクリプトが別途必要になります。

問い合わせフォーム作成に必要な要素と属性の解説

フォームデータの送信先 URL を指定する

action 属性ではフォームデータの送信先 URL を指定できます。

&lt;<span style="color: #0066ff">form</span> action="<span style="color: #ff6600">submit.php</span>"&gt;
  ～
&lt;/<span style="color: #0066ff">form</span>&gt;

氏名欄を作成する

お名前：

お名前：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">name</span>"&gt;

氏名欄を作成するには上記の様に記述します。
input タグの中に type=”text” と記述することで通常の文字列を入力できるようになります。
name 属性は入力されたデータを処理する際に必要となります。

氏名欄を入力必須項目にする

お名前：(必須)

お名前：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">name</span>" <span style="color: #ff0000">required</span>&gt;(必須)

input タグの中に required 属性を指定することでその要素は入力必須項目となります。
未入力の状態でデータを送信しようとするとエラーメッセージが表示されます。

以下は未入力エラーのメッセージ表示サンプル画像です。

メールアドレス欄を作成する

ご連絡先(メールアドレス)：

ご連絡先(メールアドレス)：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">email</span>" name="<span style="color: #ff6600">mail</span>"&gt;

メールアドレス欄を作成するには input タグの中で type=”email” を記述します。
こうすることで半角英数字以外の入力を弾くことができます。

以下はエラーのメッセージ表示サンプル画像です。

電話番号欄を作成する

ご連絡先(電話番号)：

ご連絡先(電話番号)：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">tel</span>" name="<span style="color: #ff6600">telephone</span>"&gt;

電話番号欄を作成するには input タグの中で type=”tel” を記述します。

電話番号欄に入力できる最大文字数を指定する

ご連絡先(電話番号)：

ご連絡先(電話番号)：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">tel</span>" name="<span style="color: #ff6600">telephone</span>" <span style="color: #ff0000">maxlength</span>="<span style="color: #ff6600">12</span>"&gt;

input タグの中で maxlength=(最大入力文字数) と記述すると入力できる最大文字数を指定することができます。
これにより電話番号として不自然な桁数の入力を防ぐことができます。

件名欄を作成する

お問い合わせ件名：

お問い合わせ件名：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">subject</span>"&gt;

氏名欄の時と同じように指定します。
記述する際に name の値が氏名欄と一致しないように気をつけてください。

問い合わせ本文欄を作成する

お問い合わせ内容：

お問い合わせ内容：&lt;<span style="color: #0066ff">textarea</span> name="<span style="color: #ff6600">inquiry</span>"&gt;&lt;/<span style="color: #0066ff">textarea</span>&gt;

改行を含むテキストを入力する際には textarea 要素を使用します。

問い合わせ本文欄のサイズを変更する

お問い合わせ内容：

お問い合わせ内容：&lt;<span style="color: #0066ff">textarea</span> name="<span style="color: #ff6600">inquiry</span>" cols="<span style="color: #ff6600">40</span>" rows="<span style="color: #ff6600">8</span>"&gt;&lt;/<span style="color: #0066ff">textarea</span>&gt;

textarea 要素は文字を入力するエリアのサイズを変更することが可能です。
cols=”(最大文字数)” と記述することで1行あたりの最大文字数を指定できます。
rows=”(桁数)” と記述することで行数を指定できます。

input 要素にガイドテキストを設定する

お名前：

お名前：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">name</span>" placeholder="<span style="color: #ff6600">例：山田太郎</span>"&gt;

input タグの中で placeholder=”(入力例)” と記述することでガイドテキストを表示することができます。
ガイドテキストは半透明で表示され、入力する際には自動で消えてくれます。

フォームデータの送信ボタンを作成する

&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">submit</span>" value="<span style="color: #ff6600">送信</span>"&gt;

送信ボタンを作成するには input タグの中で type=”submit” と記述します。
value=”(テキスト)” と記述することでボタンの中に表示するテキストを指定できます。

フォームデータのリセットボタンを作成する

&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">reset</span>" value="<span style="color: #ff6600">リセット</span>"&gt;

送信ボタンを作成するには input タグの中で type=”reset” と記述します。
こちらも value=”(テキスト)” と記述することでボタンの中に表示するテキストを指定できます。

問い合わせフォームサンプル

&lt;<span style="color: #0066ff">form</span> action="<span style="color: #ff6600">submit.php</span>"&gt;
  &lt;p&gt;お名前：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">name</span>" <span style="color: #ff0000">required</span>&gt;(必須)&lt;/p&gt;
  &lt;p&gt;ご連絡先(メールアドレス)：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">email</span>" name="<span style="color: #ff6600">mail</span>" <span style="color: #ff0000">required</span>&gt;(必須)&lt;/p&gt;
  &lt;p&gt;ご連絡先(電話番号)：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">tel</span>" name="<span style="color: #ff6600">telephone</span>" <span style="color: #ff0000">maxlength</span>="<span style="color: #ff6600">12</span>"&gt;&lt;/p&gt;
  &lt;p&gt;お問い合わせ件名：&lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">text</span>" name="<span style="color: #ff6600">subject</span>" <span style="color: #ff0000">required</span>&gt;(必須)&lt;/p&gt;
  &lt;div&gt;お問い合わせ内容：(必須)&lt;/div&gt;
  &lt;p&gt;&lt;<span style="color: #0066ff">textarea</span> name="<span style="color: #ff6600">inquiry</span>" cols="<span style="color: #ff6600">60</span>" rows="<span style="color: #ff6600">8</span>" <span style="color: #ff0000">required</span>&gt;&lt;/<span style="color: #0066ff">textarea</span>&gt;&lt;/p&gt;
  &lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">submit</span>" value="<span style="color: #ff6600">送信</span>"&gt;
  &lt;<span style="color: #0066ff">input</span> type="<span style="color: #ff6600">reset</span>" value="<span style="color: #ff6600">リセット</span>"&gt;
&lt;/<span style="color: #0066ff">form</span>&gt;

最後に

HTML5 は 2011/11/15 現在ではまだ仕様が確定しておらず今回ご紹介した form タグも仕様変更する可能性がございます。
その際にはこのエントリーを更新、もしくは新しいエントリーとして投稿いたしますのでまた一緒に学習していきましょう。