ウェブフォームの基本！HTMLでお問い合わせページを作ろう

INDEX

はじめに
1. この記事の対象者
2. この記事で学べること
お問い合わせフォームの仕様
お問い合わせページのマークアップ
次のステップ

はじめに

この記事は「お問い合わせフォームを作ってみよう」チュートリアルの一部であり、このチュートリアルの【HTMLマークアップ編】として書かれています。

この記事では、お問い合わせフォームでよく使用されるHTML要素を使用してお問い合わせページのマークアップを行い、具体的なフォーム部品の使用方法について学びます。

また、この記事以降はここで作成するHTMLファイルを使用して学習を進めていきます。

この記事の対象者

ウェブ制作初心者の方
お問い合わせページの作成について学びたい方

この記事で学べること

お問い合わせページのHTMLの基本構造
主要なフォーム部品の具体的な使用方法

お問い合わせフォームの仕様

まずは、ここで作成するお問い合わせページの仕様について簡単にご説明します。

お問い合わせフォームに配置するフォーム部品は以下のとおりです。

お問い合わせの種類
- フォーム部品：ドロップダウンメニュー
- 項目：
  - 「ウェブ制作の学び方について」
  - 「記事の内容について」
  - 「このサイトの使い方について」
  - 「このサイトの管理者について」
- 初期値：「ウェブ制作の学び方について」
- 入力必須：なし
お名前
- フォーム部品：単一行テキスト入力欄
- 初期値：なし
- 入力必須：あり
性別
- フォーム部品：ラジオボタン
- 項目：
  - 男性
  - 女性
- 初期値：なし
- 入力必須：なし
メールアドレス
- フォーム部品：メールアドレス入力欄
- 初期値：なし
- 入力必須：あり
学習中の言語
- フォーム部品：チェックボックス
- 項目：
  - 「 HTML 」
  - 「 CSS 」
  - 「 JavaScript 」
  - 「 PHP 」
- 初期値：「 HTML 」にチェック
- 入力必須：なし
お問い合わせ内容
- フォーム部品：複数行テキスト入力欄
- 初期値：なし
- 入力必須：あり
個人情報保護方針の同意
- フォーム部品：チェックボックス
- 初期値：なし
- 入力必須：あり
送信ボタン
- フォーム部品：送信ボタン
- ボタンテキスト：「お問い合わせ内容を送信」

それではHTMLでマークアップを行います。

お問い合わせページのマークアップ

まずはHTMLの基本構文をマークアップしていきます。簡易的ではありますが、ヘッダーとフッターも配置します。

分かりやすい場所に index.html を作成し、以下を記述します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>LOGO</h1>
  </header>

  <main>
    <h2>お問い合わせ</h2>
    <!-- ここにお問い合わせフォームをマークアップします。 -->
  </main>

  <footer>&copy;copyright.</footer>
</body>

</html>

ウェブページの構成として最低限のものだけ記述しました。ちなみに、 style.css の読み込む記述がありますがまだ style.css は作成していません。

お問い合わせフォームは main 要素の中にマークアップしていきます。以下の手順で行います。

form 要素の設置
お問い合わせの種類を select 要素と option 要素で定義
お名前入力欄を input 要素で定義
性別のラジオボタンを input 要素で定義
メールアドレス入力欄を input 要素で定義
学習中の言語のチェックボックスを input 要素で定義
お問い合わせの内容を textarea 要素で定義
個人情報保護方針の同意のチェックボックスを input 要素で定義
送信ボタンを button 要素で定義

それでは、 form 要素の設置から行います。

form要素の設置

main 要素内に form 要素を設置します。以下を記述してください。

<main>
  <h2>お問い合わせ</h2>
  <form id="form" action="" method="GET">

  </form>
</main>

このシリーズでは実際にお問い合わせフォームを動作させるところまでは行わないので、 action 属性は空にしておきます。

method 属性の値はGETにしており、これは実際に送信される値を確認することを目的としています。

実際のお問い合わせフォームではセキュリティの関係上、 method 属性にはPOSTの値を指定します。

続いて、お問い合わせの種類をマークアップしていきます。

お問い合わせの種類

お問い合わせの種類はドロップダウメニューで実装します。お問い合わせの種類の選択肢は以下です。

ウェブ制作の学び方について
記事の内容について
このサイトの使い方について
このサイトの管理者について

デフォルトで「ウェブ制作の学び方」が選択されている状態になるように実装します。 form 要素内に以下を記述します。

<form action="" method="GET">
  <div class="form-item">
    <label for="type" class="form-ttl">お問い合わせの種類</label>
    <select id="type" name="type">
      <option value="learn" selected>ウェブ制作の学び方について</option>
      <option value="article">記事の内容について</option>
      <option value="site">このサイトの使い方について</option>
      <option value="admin">このサイトの管理者について</option>
    </select>
  </div>
</form>

後にスタイリングを行うために、各フォーム部品は form-item というクラス名の div 要素内に記述していきます。

お問い合わせの種類はドロップダウンメニューでの実装なので、 select 要素を使用します。また、項目の見出しとして label 要素には form-ttl というクラス名を付け、各選択肢は option 要素でマークアップします。

<label for="type" class="form-ttl">お問い合わせの種類</label>

ドロップダウンメニューでは select 要素にのみ name 属性を指定します。 option 要素にはそれぞれ異なる value 属性の値を設定する必要があります。

<select id="type" name="type">
  <option value="learn" selected>ウェブ制作の学び方について</option>
  <option value="article">記事の内容について</option>
  <option value="site">このサイトの使い方について</option>
  <option value="admin">このサイトの管理者について</option>
</select>

また、お問い合わせの種類の初期値は「ウェブ制作の学び方について」という仕様なので、該当する option 要素に selected 属性を記述しています。

お問い合わせの種類のマークアップができました。ブラウザで確認すると以下のように表示されます。

お名前

お名前の入力欄は単一行のテキスト入力フィールドで実装します。また、仕様では入力必須の項目になっているのでこの実装も行います。

お問い合わせの種類の下に以下を記述します。

<div class="form-item">
  <label for="name" class="form-ttl">お名前<span class="required">必須</span></label>
  <p class="example-txt">例：山田　太郎</p>
  <input type="text" id="name" name="name" required>
</div>

単一行のテキスト入力フィールドなので input 要素に「 type=”text” 」を指定します。また、入力されていないときは送信できないように input 要素に対して require 属性を記述しています。

<input type="text" id="name" name="name" required>

入力が必須であることをユーザーに伝えるために required クラスを付けた span 要素を記述しています。

また、入力の例があると親切なので example-txt というクラス名の p 要素を配置しています。

<label for="name" class="form-ttl">お名前<span class="required">必須</span></label>
<p class="example-txt">例：山田　太郎</p>

ちなみに、 input 要素に placeholder 属性を指定することで、テキスト入力フィールド内に入力例を表示させることもできます。

<input type="text" placeholder="例：山田　太郎">

placeholder の問題として、入力フィールドにテキストを入力すると入力例が消えてしまうということが挙げられます。

実際どうするかはデザインやフォームの仕様によりますが、ここでは p 要素で入力例を表示しています。

お名前欄のマークアップができました。ブラウザで確認すると以下のように表示されます。

性別

性別の選択項目はラジオボタンで実装します。

お名前の下に以下を記述します。

<div class="form-item">
  <fieldset>
    <legend class="form-ttl">性別</legend>
    <label for="male"><input type="radio" id="male" name="gender" value="male">男性</label>
    <label for="female"><input type="radio" id="female" name="gender" value="female">女性</label>
  </fieldset>
</div>

ラジオボタンなので input 要素に「 type=”radio” 」を指定しています。スタイリングしやすくするために label 要素の中に input 要素を配置しています。

<label …><input type="radio" …>男性</label>

また、ラジオボタンのグループを示すために fieldset 要素と legend 要素を使用しています。

legend 要素の内容は項目の見出しとしての役割があるので、 form-ttl クラスを付けています。

<legend class="form-ttl">性別</legend>

各ラジオボタンの name 属性は統一させる必要があります。

<input type="radio" id="male" name="gender" value="male">
<input type="radio" id="female" name="gender" value="female">

性別のマークアップができました。ブラウザで確認すると以下のように表示されます。

メールアドレス

メールアドレスはメールアドレス入力フィールドで実装します。メールアドレスも入力必須の項目になっているのでこの実装も行います。

性別の下に以下を記述します。

<div class="form-item">
  <label for="email" class="form-ttl">メールアドレス<span class="required">必須</span></label>
  <p class="example-txt">例：hogehoge@example.com</p>
  <input type="mail" id="email" name="email" required>
</div>

input 要素の type 属性が「 type=”email” 」になっているところ以外はほとんどお名前と一緒です。

メールアドレスのマークアップができました。ブラウザで確認すると以下のように表示されます。

学習中の言語

学習中の言語はチェックボックスで実装します。学習中の言語の選択肢は以下です。

HTML
CSS
JavaScript
PHP

デフォルトでHTMLにチェックが入るように実装します。メールアドレスの下に以下を記述します。

<div class="form-item">
  <fieldset>
    <legend class="form-ttl">学習中の言語</legend>
    <label for="html"><input type="checkbox" id="html" name="learning" value="html" checked>HTML</label>
    <label for="css"><input type="checkbox" id="css" name="learning" value="css">CSS</label>
    <label for="javascript"><input type="checkbox" id="javascript" name="learning" value="javascript">JavaScript</label>
    <label for="php"><input type="checkbox" id="php" name="learning" value="php">PHP</label>
  </fieldset>
</div>

チェックボックスのマークアップは、 input 要素に対して「type=”checkbox”」と指定する以外はほとんどラジオボタンと同じです。

また、「 HTML 」の選択肢にデフォルトでチェックを入れるという仕様があるので、該当するラジオボタンには checked 属性を指定しています。

<input type="checkbox" id="html" name="learning" value="html" checked>

学習中の言語のマークアップができました。ブラウザで確認すると以下のように表示されます。

お問い合わせ内容

お問い合わせ内容は複数行のテキストフィールドで実装します。こちらもお名前やメールアドレスと同様で必須項目なので、この実装も行います。

学習中の言語の下に以下を記述します。

<div class="form-item">
  <label for="content" class="form-ttl">お問い合わせ内容<span class="required">必須</span></label>
  <textarea id="content" name="content" rows="20" required></textarea>
</div>

複数行のテキストフィールドなので textarea 要素を使用しています。 id 属性と label との紐付けや name 属性の指定、 required 属性の指定などは input 要素と同じ方法です。

ここでは textarea 要素に対して「 row=”20″ 」と指定しており、20行のテキストフィールドであることを定義しています。

<textarea id="content" name="content" rows="20" required></textarea>

また、1行あたりの文字数はコンテンツ幅によって可変させるので cols 属性は指定していません。

お問い合わせ内容ができました。ブラウザで確認すると以下のように表示されます。

個人情報保護方針の同意

個人情報保護方針の同意はチェックボックスで実装します。お問い合わせ内容の下に以下を記述します。

<div class="policy-check-wrap">
  <label for="policy-check">
    <input
      type="checkbox"
      id="policy-check"
      name="policy-check"
      required>個人情報保護方針に同意します。
  </label>
</div>

コードを見やすくするために各属性指定のところで改行をしていますが、これはお好みで構いません。

また、チェックボックスとテキストを label 要素で囲んでいます。これもスタイリング目的ではなくコードを見やすくするために行っています。

input要素がlabel要素の外にあっても問題ありませんが、コードが見づらいという理由でinput要素とlabel要素の間に改行を入れてしまうと、改行が半角スペースとして表示されるので気を付けましょう。

<!-- 以下は半角スペースが入りません。 -->
<div class="policy-check-wrap">
  <input type="checkbox" id="policy-check" name="policy-check" value="true" required><label for"policy-check">個人情報保護方針に同意します。</label>
</div>

<!-- 以下は半角スペースが入ります。 -->
<div class="policy-check-wrap">
  <input type="checkbox" id="policy-check" name="policy-check" value="true" required>
  <label for"policy-check">個人情報保護方針に同意します。</label>
</div>

label 要素を policy-check-wrap というクラス名を付けた div 要素で囲っています。これは、他のフォーム部品とは異なるスタイルを適用するためのものです。

「個人情報保護方針の同意」においての label 要素は、他の項目のように見出しとしての役割を持っていません。なので、 form-ttl というクラス名もこの label 要素には必要ありません。

<div class="policy-check-wrap">
  <label for="policy-check">
    <input … >個人情報保護方針に同意します。
  </label>
</div>

個人情報保護方針の同意ができました。ブラウザで確認すると以下のように表示されます。

送信ボタン

送信ボタンは button 要素で実装します。個人情報保護の同意の下に以下を記述します。

<div class="btn-wrap">
  <button type="submit" id="submit">お問い合わせ内容を送信</button>
</div>

button 要素に対して「type=”submit”」とすることで、送信ボタンとして機能します。ボタンテキストは「お問い合わせ内容を送信」としています。

また、 button 要素を btn-wrap というクラス名を付けた div 要素で囲っています。これは button 要素の配置に関するスタイルを適用するためのものです。

送信ボタンができました。これでお問い合わせページのマークアップの完成です。ブラウザで確認すると以下のように表示されます。

これでお問い合わせページのHTMLマークアップは完成です。全体のコードは以下です。

サンプルコードの全体

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>LOGO</h1>
  </header>

  <main>
    <h2>お問い合わせ</h2>
    <form id="form" action="" method="GET">

      <div class="form-item">
        <label for="type" class="form-ttl">お問い合わせの種類</label>
        <select id="type" name="type">
          <option value="learn" selected>ウェブ制作の学び方について</option>
          <option value="article">記事の内容について</option>
          <option value="site">このサイトの使い方について</option>
          <option value="admin">このサイトの管理者について</option>
        </select>
      </div>

      <div class="form-item">
        <label for="name" class="form-ttl">お名前<span class="required">必須</span></label>
        <p class="example-txt">例：山田　太郎</p>
        <input type="text" id="name" name="name" required>
      </div>

      <div class="form-item">
        <fieldset>
          <legend class="form-ttl">性別</legend>
          <label for="male"><input type="radio" id="male" name="gender" value="male">男性</label>
          <label for="female"><input type="radio" id="female" name="gender" value="female">女性</label>
        </fieldset>
      </div>

      <div class="form-item">
        <label for="email" class="form-ttl">メールアドレス<span class="required">必須</span></label>
        <p class="example-txt">例：hogehoge@example.com</p>
        <input type="mail" id="email" name="email" required>
      </div>

      <div class="form-item">
        <fieldset>
          <legend class="form-ttl">学習中の言語</legend>
          <label for="html"><input type="checkbox" id="html" name="learning" value="html" checked>HTML</label>
          <label for="css"><input type="checkbox" id="css" name="learning" value="css">CSS</label>
          <label for="javascript"><input type="checkbox" id="javascript" name="learning" value="javascript">JavaScript</label>
          <label for="php"><input type="checkbox" id="php" name="learning" value="php">PHP</label>
        </fieldset>
      </div>

      <div class="form-item">
        <label for="content" class="form-ttl">お問い合わせ内容<span class="required">必須</span></label>
        <textarea id="content" name="content" rows="20" required></textarea>
      </div>

      <div class="policy-check-wrap">
        <label for="policy-check">
          <input
            type="checkbox"
            id="policy-check"
            name="policy-check"
            required>個人情報保護方針に同意します。
        </label>
      </div>

      <div class="btn-wrap">
        <button type="submit" id="submit">お問い合わせ内容を送信</button>
      </div>

    </form>
  </main>

  <footer>&copy;copyright.</footer>
</body>
</html>

次のステップ

お問い合わせフォームでよく使用されるHTML要素を使用してお問い合わせページのマークアップを行い、具体的なフォーム部品の使用方法について学びました。

今回は基本となる属性のみを扱いましたが、アクセシビリティやセキュリティなどを考慮する場合、HTML側で属性を指定することで、入力文字数の制限や入力形式の指定などを行うことも出来ます。

バリデーションチェックについては「お問い合わせフォームを作ってみよう【バリデーションチェック編（HTML）】」で解説します。

次のステップの「お問い合わせフォームを作ってみよう【CSSスタイリング編】」では、今回マークアップしたお問い合わせフォームをCSSでスタイリングしていきます。

フォーム部品はCSSによるスタイルの変更ができないものもいくつかあり、ブラウザやユーザーの環境によっても表示が変わることが多いです。それらの基本的な対策も含めて解説いたします。