component-form

c-form

システムで可能な限りフォームの各入力セットを包括する。
幅の調整が必要な場合は .u-width-(percentage) を併用すること。
フォーム内のパーツは .m-input, .m-radio, .m-select, .m-checkbox, .m-btn を参照。

好きな食べ物
好きな映画
<div class="c-form">
    <label for="demo01-01" class="c-form-label">氏名</label>
    <input type="text" class="m-input u-width-50" id="demo01-01" name="demo00" 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="checkbox1" id="checkbox1" class="u-margin-right-sm" value="りんご">りんご</label>
    <label class="m-checkbox u-margin-right-md for="checkbox2"><input type="checkbox" name="checkbox2" id="checkbox2" class="u-margin-right-sm" value="バナナ">バナナ</label>
    <label class="m-checkbox" for="checkbox3"><input type="checkbox" name="checkbox3" id="checkbox3" class="u-margin-right-sm" value="メロン">メロン</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" name="demo02" rows="5" class="m-input u-width-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" value="" placeholder="山田" />
    <label for="demo02-02" class="c-form-label"></label>
    <input type="text" class="m-input" id="demo02-02" name="demo02_02" 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" value="" placeholder="山田" />
    <label for="demo02-04" class="c-form-label">パスワード</label>
    <input type="text" class="m-input" id="demo02-04" name="demo02_04" 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="demo03-01" class="c-form-label">氏名</label>
    <input type="text" class="m-input" id="demo03-01" name="demo00" value="" placeholder="山田一郎" />
</div>
<div class="c-form c-form-inline c-form-grow">
    <label for="demo03-02" class="c-form-label">アカウント名</label>
    <input type="text" class="m-input" id="demo03-02" name="demo03_02" value="" placeholder="山田" />
    <label for="demo03-03" class="c-form-label">パスワード</label>
    <input type="text" class="m-input" id="demo03-03" name="demo03_03" 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 -->
    <button class="m-btn m-btn-gray">ログイン</button>
</div>

c-form-append

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

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

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 u-width-50 is-error" id="demo01-01" name="demo00" value="山田一郎" />
    <p class="c-form-error">フリガナはカタカナで入力してください。</p>
</div><!-- /.c-form -->

c-form-submit

フォームの送信ボタンを表示する。 .m-btn-xl を使用する前提となっている。

<div class="c-form-submit">
    <button class="m-btn m-btn-xl m-btn-first">入力内容の確認</button>
</div>

c-form-submit-2col

.c-form-submitと併用する。
ボタンを複数個表示する場合に、最後のボタン以外の幅を詰め、最後のボタンを強調して表示する。

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