component-form

c-form

システムで可能な限りフォームの各入力セットを包括し、下余白を確保する。
フォーム内のパーツは .m-input, .m-radio, .m-select, .m-checkbox, .m-btn を参照。

テキストボックスなどの幅は固定していない。幅を伸ばす場合は、別途スタイルを追加するか、後述の.c-form-inline, .c-form-growを併用すること。

好きな食べ物(いくつでも選択できます)
好きな映画
<div class="c-form">
    <label for="demo01-01" class="c-form-label">氏名</label>
    <input type="text" class="m-input" id="demo01-01" name="demo00" size="30" value="" placeholder="山田一郎">
</div><!-- /.c-form -->

<div class="c-form">
    <span class="c-form-label">好きな食べ物(いくつでも選択できます)</span>
    <label class="m-checkbox u-margin-right-md" for="checkbox1"><input type="checkbox" name="checkbox[]" id="checkbox1" value="りんご"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">りんご</span></label>
    <label class="m-checkbox u-margin-right-md" for="checkbox2"><input type="checkbox" name="checkbox[]" id="checkbox2" value="バナナ"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">バナナ</span></label>
    <label class="m-checkbox u-margin-right-md" for="checkbox3"><input type="checkbox" name="checkbox[]" id="checkbox3" value="ぶどう"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">ぶどう</span></label>
    <label class="m-checkbox u-margin-right-md" for="checkbox4"><input type="checkbox" name="checkbox[]" id="checkbox4" value="みかん"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">みかん</span></label>
    <label class="m-checkbox u-margin-right-md" for="checkbox5"><input type="checkbox" name="checkbox[]" id="checkbox5" value="キウイ"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">キウイ</span></label>
    <label class="m-checkbox u-margin-right-md" for="checkbox6"><input type="checkbox" name="checkbox[]" id="checkbox6" value="かき"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">かき</span></label>
    <label class="m-checkbox" for="checkbox7"><input type="checkbox" name="checkbox[]" id="checkbox7" value="メロン"><span class="m-checkbox-icon"></span><span class="m-checkbox-label">メロン</span></label>
</div><!-- /.c-form -->

<div class="c-form">
    <span class="c-form-label">好きな映画</span>
    <div class="m-select">
        <select>
            <option>選択してください</option>
            <option value="raputa">天空の城ラピュタ</option>
            <option value="charlie">チャーリーとチョコレート工場</option>
            <option value="schindler">シンドラーのリスト</option>
        </select>
    </div><!-- /.m-select -->
</div><!-- /.c-form -->

<div class="c-form">
    <label for="demo01-02" class="c-form-label">メッセージ</label>
    <textarea id="demo01-02" class="m-input" name="demo02" rows="5" cols="50" placeholder="メッセージをどうぞ"></textarea>
</div><!-- /.c-form -->

c-form-inline

フォームの入力欄とボタン、またはラベルをインラインで表示する。
複数並べた場合の、モバイル環境でのオーバーフローを想定していないことに注意。

好きな映画
<div class="c-form c-form-inline">
    <label for="demo02-01" class="c-form-label">姓</label>
    <input type="text" class="m-input" id="demo02-01" name="demo02_01" size="20" value="" placeholder="山田">
    <label for="demo02-02" class="c-form-label">名</label>
    <input type="text" class="m-input" id="demo02-02" name="demo02_02" size="20" value="" placeholder="一郎">
    <span class="c-form-label">好きな映画</span>
    <div class="m-select">
        <select>
            <option>選択してください</option>
            <option value="raputa">天空の城ラピュタ</option>
            <option value="charlie">チャーリーとチョコレート工場</option>
            <option value="schindler">シンドラーのリスト</option>
        </select>
    </div><!-- /.m-select -->
</div><!-- /.c-form -->

<div class="c-form c-form-inline">
    <label for="demo02-03" class="c-form-label">アカウント名</label>
    <input type="text" class="m-input" id="demo02-03" name="demo02_03" size="20" value="" placeholder="山田">
    <label for="demo02-04" class="c-form-label">パスワード</label>
    <input type="text" class="m-input" id="demo02-04" name="demo02_04" size="20" value="" placeholder="一郎">
    <button class="m-btn m-btn-gray">ログイン</button>
</div><!-- /.c-form -->

c-form-grow

.c-form-inlineと併用する。
フォームの入力欄が .c-form 全体を埋めるように伸びる。

好きな映画
<div class="c-form c-form-inline c-form-grow">
    <label for="demo02-01" class="c-form-label">姓</label>
    <input type="text" class="m-input" id="demo02-01" name="demo02_01" size="20" value="" placeholder="山田">
    <label for="demo02-02" class="c-form-label">名</label>
    <input type="text" class="m-input" id="demo02-02" name="demo02_02" size="20" value="" placeholder="一郎">
    <span class="c-form-label">好きな映画</span>
    <div class="m-select">
        <select>
            <option>選択してください</option>
            <option value="raputa">天空の城ラピュタ</option>
            <option value="charlie">チャーリーとチョコレート工場</option>
            <option value="schindler">シンドラーのリスト</option>
        </select>
    </div><!-- /.m-select -->
</div><!-- /.c-form -->

<div class="c-form c-form-inline c-form-grow">
    <label for="demo02-03" class="c-form-label">アカウント名</label>
    <input type="text" class="m-input" id="demo02-03" name="demo02_03" size="20" value="" placeholder="山田">
    <label for="demo02-04" class="c-form-label">パスワード</label>
    <input type="text" class="m-input" id="demo02-04" name="demo02_04" size="20" value="" placeholder="一郎">
    <button class="m-btn m-btn-gray">ログイン</button>
</div><!-- /.c-form -->

c-form-append

.c-form-inlineと併用する。
.m-input.m-btn が接していた場合は角丸を解除する。

<div class="c-form c-form-inline c-form-append">
    <input type="text" class="m-input" name="search" size="30" placeholder="Keyword">
    <button class="m-btn m-btn-gray">検索</button>
</div><!-- /.c-form -->

c-form-error

フォームの入力を間違えたときの補助テキストを表示する。

フリガナはカタカナで入力してください。

<div class="c-form c-form-inline">
    <label for="demo01-01" class="c-form-label">フリガナ</label>
    <input type="text" class="m-input is-error" id="demo01-01" name="demo00" size="30" value="山田一郎">
    <p class="c-form-error">フリガナはカタカナで入力してください。</p>
</div><!-- /.c-form -->

c-form-submit

フォームの送信ボタンを、上余白を確保しつつ表示する。 .m-btn-xl の使用が望ましい。

<div class="c-form-submit">
    <input type="submit" class="m-btn m-btn-xl m-btn-gray" value="入力内容の確認">
</div><!-- /.c-form-submit -->

c-form-submit-2col

ボタンを複数個表示する場合に、.c-form-submit と併用する。
ブレークポイントが md 以上のときにボタンが横並びとなり、かつ lg 以上のときに、最後のボタン以外の幅を詰め、最後のボタンを強調して表示する。

<div class="c-form-submit c-form-submit-2col">
    <input type="submit" class="m-btn m-btn-xl m-btn-gray m-btn-bordered" value="入力画面にもどる">
    <input type="submit" class="m-btn m-btn-xl m-btn-gray" value="この内容で送信">
</div><!-- /.c-form-submit -->