In 'n' Out | フォームの組み立て

フォームを完成形として理解するために

各フォームタグの役割は別ページにて解説してきましたが、実務ではタグを単体で使うことはほとんどありません。
入力欄・選択肢・送信ボタンを一つのフォームとして組み立て、JavaScriptで値を取得・操作することで、実用的なフォームになります。
このページでは、フォームを構成する要素を整理しながら、送信可能な状態まで組み立てる流れを解説していきます。

ワイヤーフレームから構造を考える

クライアントからワイヤーフレームを受け取り、よくある会員登録フォームで構いません、という依頼を受けたとします。

このような場合、いきなりHTMLを書き始めるのではなく、まずは各項目を「どの入力部品で実装するか」を整理します。
ここでは、その考え方を順に見ていきます。

お名前
文字を自由に入力する項目で、1行で十分なため、input type="text"を使用します。
性別
選択肢があらかじめ決まっており、1つだけ選択する項目のため、input type="radio"を使用します。
生年月日
数字が中心の入力ですが、スラッシュを考慮し、input type="text"を使用します。
郵便番号
数字が中心の入力ですが、先頭の0やハイフンを考慮し、input type="text"を使用します。
ご住所
文字を自由に入力する必要があるため、input type="text"を使用します。
郵便番号とは別にすることで、後からJavaScriptで住所を自動入力する処理を追加できます。
電話番号
電話番号の入力に適したキーボードを表示させるため、input type="tel"を使用します。
メールアドレス
メールアドレス形式の入力を想定しているため、input type="email"を使用します。
メールアドレス（確認用）
入力内容を確認する目的の項目のため、メールアドレスと同じくinput type="email"を使用します。
パスワード
入力内容を画面に表示しないようにするため、input type="password"を使用します。
当サイトを知ったきっかけ
複数の選択肢から、当てはまるものを複数選べる項目のため、input type="checkbox"を使用します。
メッセージ
複数行の文章を入力する項目のため、textareaを使用します。

タグを割り当てたフォームのワイヤーフレーム画像 — ワイヤーフレームのタグ割り当て例

ここでは、ワイヤーフレーム上の各項目に対して、使用する入力要素を割り当てました。
ただし、この割り当てに正解は1つではありません。
なぜその要素を選んだのかを説明できることが重要です。
このように理由を考えながら設計することで、後から仕様変更や機能追加があっても対応しやすくなります。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>株式会社サンプル食品 | 会員登録</title>
    <link rel="stylesheet" href="../css/formCss.css">
</head>
<body>
    <header>
        <h1>株式会社サンプル食品</h1>
        <p>
            あなたの未来の健康のためにできること。<br>
            安全な食品を提供することをお約束します。
        </p>
        <nav>
            <ul>
                <li><a href="">商品案内</a></li>
                <li><a href="">企業情報</a></li>
                <li><a href="">代表挨拶</a></li>
                <li><a href="">お問合せ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>会員登録</h2>
            <p>*がついている項目は必須項目となります。</p>
            <form action="" method="post">
                <div class="formItem">
                    <label for="name">お名前*</label>
                    <input id="name" name="name" type="text">
                </div>
                <div class="formItem">
                    <p>性別*</p>
                    <label for="male">
                        <input id="male" name="sex" type="radio" value="男性" checked>男性
                    </label>
                    <label for= "male">
                        <input id="female" name="sex" type="radio" value="女性">女性
                    </label>
                </div>
                <div class="formItem">
                    <label for="born">生年月日*</label>
                    <input id="born" name="born" type="text">
                </div>
                <div class="formItem">
                    <label for="zip">郵便番号*</label>
                    <input id="zip" name="zip" type="text">
                </div>
                <div class="formItem">
                    <label for="address">住所*</label>
                    <input id="address" name="address" type="text">
                </div>
                <div class="formItem">
                    <label for="tel">電話番号*</label>
                    <input id="tel" name="tel" type="tel">
                </div>
                <div class="formItem">
                    <label for="email">メールアドレス*</label>
                    <input id="email" name="email" type="email">
                </div>
                <div class="formItem">
                    <label for="confirmEmail">メールアドレス（確認用）*</label>
                    <input id="confirmEmail" name="confirmEmail" type="email">
                </div>
                <div class="formItem">
                    <label for="password">パスワード*</label>
                    <input id="password" name="password" type="password">
                </div>
                <div class="formItem">
                    <p>当サイトを知ったきっかけ*</p>
                    <input id="searhc" type="checkbox" name="reason[]" value="検索サイト"><label for="search">検索サイト</label>
                    <input id="ads"type="checkbox" name="reason[]" value="チラシ"><label for="ad">チラシ</label>
                    <input id="invitation" type="checkbox" name="reason[]" value="友人・知人の紹介"><label for="invitation">友人・知人の紹介</label>
                    <input id="shop" type="checkbox" name="reason[]" value="実店舗"><label for="shop">実店舗</label>
                    <input id="SNS" type="checkbox" name="reason[]" value="SNS"><label for="SNS">SNS</label>
                    <input id="other" type="checkbox" name="reason[]" value="その他"><label for="other">その他</label>
                    <input id="inputText" type="text">
                </div>
                <div class="formItem">
                    <label for="message">メッセージ（1500文字以内でお願いします。）</label>
                    <textarea name="message" id="message"></textarea>
                </div>
                <button type="submit">登録</button>
                <button type="button">キャンセル</button>
            </form>
        </section>
    </main>
    <footer>
        <p><a href="">個人情報の取り扱いについて</a></p>
        <p>〒000-0000　東京都○○区▲▲町1-2-3　サンプルビル3F</p>
        <p>電話番号（代表）00-0000-0000</p>
    </footer>
</body>
</html>

HTMLのrequired属性でも必須チェックは可能ですが、今回は使用していません。

フォームの構造にも正解はない

ここまでで、フォームに必要な項目を整理し、HTMLとして構造を組み立てました。
この時点では見た目は整っていませんが、HTMLではまず何の情報を扱うのか、どの項目がまとまりなのかを明確にすることが重要です。
最後にここをクリックして書いた内容を確認してみてください。

同じワイヤーフレームを使い、CSSでレイアウトを整える方法は、フォームのワイヤーフレームレイアウトで解説しています。
CSSの基本を一通り学習していると、より理解しやすくなります。