フォーム

コーディング規約に従ってフォームを作るとPCで表示した際に自動で2列レイアウトに変換します。

コーディング規約

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

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

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

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

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

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

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

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

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タグそのままレイアウトで表示します。

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

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>が対象になります。