デザインコンポーネント - フォーム

コーディング規約

• フォーム項目は<dl>で記述します。
• フォームの項目名は<dt>、フォームコンポーネントは<dd>で記述します。
• 同一の項目を<div>で囲みます。
• 項目名が存在しないチェックボックスやサブミットボタンの場合は、<dl>を使用せず、任意のタグで記述します。
• <section>を<form>で囲みます。

シンプルなログインフォームを作る

コーディング規約通りに作ることでPCで表示した際には左側にフォームの項目名、右側にフォームコンポーネントが表示されます。

ソースコード

HTML

<main>
    <form action="./" method="POST">
        <section>
            <h1>ログイン</h1>
            <dl>
                <div class="fieldgroup">
                    <dt>ユーザーID</dt>
                    <dd><input type="text" name="xxx"></dd>
                </div>
                <div class="fieldgroup">
                    <dt>パスワード</dt>
                    <dd><input type="password" name="xxx"></dd>
                </div>
            </dl>
        </section>
        <section>
            <p class="submit"><input type="submit" value="ログイン"></p>
        </section>
    </form>
</main>

CSS

input{
    width:100%;
    padding: 10px 0;
}
dt,dd,.submit {
    padding: 20px;
}
dt {
    background: #ccccff;
}
dd {
    margin: 0;
}
.fieldgroup {
    margin: 10px 0;
}
.submit {
    text-align: center;
}

お問い合わせフォームを作る

お問い合わせフォームの様にコンポーネント数が増えた場合も同様に、コーディング規約に従ってフォームを実装します。

ソースコード

HTML

<main>
    <form action="./" method="POST">
        <section>
            <h1>お問い合わせ内容</h1>
            <dl>
                <div class="fieldgroup">
                    <dt>ご利用の製品</dt>
                    <dd><select name="xxx"><option>XXXXX</option></select></dd>
                </div>
                <div class="fieldgroup">
                    <dt>ご質問やご意見など</dt>
                    <dd><textarea name="xxx"></textarea></dd>
                </div>
            </dl>
        </section>

        <section>
            <h1>ご連絡先</h1>
            <dl>
                <div class="fieldgroup">
                    <dt>お名前</dt>
                    <dd><input type="text" name="xxx"></dd>
                </div>
                <div class="fieldgroup">
                    <dt>メールアドレス</dt>
                    <dd><input type="text" name="xxx"></dd>
                </div>
            </dl>
        </section>

        <section>
            <label for="checkbox"><input id="checkbox" type="checkbox">利用規約に同意する</label>
            <p class="submit"><input type="submit" class="submit" value="送信する"></p>
        </section>
    </form>
</main>

CSS

input[type=text],input[type=submit],select,textarea{
    width:100%;
    padding: 10px 0;
}
dt,dd,.submit {
    padding: 20px;
}
dt {
    background: #ccccff;
}
dd {
    margin: 0;
}
label {
    text-align: center;
    display: block;
}
.fieldgroup {
    margin: 10px 0;
}
.submit {
    text-align: center;
}

検索フォームを作る

検索フォームではテキストボックスとボタンが横並びにしたいケースがあります。その場合は、MFセクション内に<form>を配置し、記述したHTMLタグそのままレイアウトで表示します。

ソースコード

HTML

<main>
    <section>
        <form action="./" method="post">
            <p>検索したいキーワードを入力してください。</p>
            <input type="search" name="search" placeholder="キーワードを入力">
            <input type="submit" name="submit" value="検索">
        </form>
    </section>
</main>

CSS

form {
    padding: 20px;
}
input {
    margin: 10px 0;
    padding: 10px;
}

備考

• MFセクション内に<form>を書いた場合はレイアウト変換は行いません。<main>直下にある<form>が対象になります。