component-form

echo-form

フォームの各入力欄を包括する。
フォーム内の各オブジェクトは .echo-input, .echo-radio, .echo-select, .echo-checkbox, .echo-button を参照。

各ラベルには .echo-form-label クラスを付与する。

複数のフォームをグリッド状に揃える場合は、 layout > .echo-formsを使用すること。

文字サイズの変化 group: body
(breakpoint)(fontsize)
.echo-***
md以下sm
lg以上md

この表の解説




好きな食べ物(いくつでも選択できます)

モバイル環境でフォームが画面幅を超える場合は、自動改行される。

<div class="echo-form">
    <label for="form-default-01" class="echo-form-label">姓</label>
    <input type="text" class="echo-input" id="form-default-01" name="form_default_01" size="10" value="" placeholder="山田">
    <label for="form-default-02" class="echo-form-label">名</label>
    <input type="text" class="echo-input" id="form-default-02" name="form_default_02" size="10" value="" placeholder="一郎">
</div><!-- /.echo-form -->

<hr class="echo-margin-y-lg">

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

<hr class="echo-margin-y-lg">

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

<hr class="echo-margin-y-lg">

<div class="echo-form">
    <span class="echo-form-label">好きな食べ物(いくつでも選択できます)</span>
    <label class="echo-checkbox" for="form-default-04-01"><input type="checkbox" name="form_default_04[]" id="form-default-04-01" value="りんご"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">りんご</span></label>
    <label class="echo-checkbox" for="form-default-04-02"><input type="checkbox" name="form_default_04[]" id="form-default-04-02" value="バナナ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">バナナ</span></label>
    <label class="echo-checkbox" for="form-default-04-03"><input type="checkbox" name="form_default_04[]" id="form-default-04-03" value="ぶどう"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">ぶどう</span></label>
    <label class="echo-checkbox" for="form-default-04-04"><input type="checkbox" name="form_default_04[]" id="form-default-04-04" value="みかん"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">みかん</span></label>
    <label class="echo-checkbox" for="form-default-04-05"><input type="checkbox" name="form_default_04[]" id="form-default-04-05" value="キウイ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">キウイ</span></label>
    <label class="echo-checkbox" for="form-default-04-06"><input type="checkbox" name="form_default_04[]" id="form-default-04-06" value="かき"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">かき</span></label>
    <label class="echo-checkbox" for="form-default-04-07"><input type="checkbox" name="form_default_04[]" id="form-default-04-07" value="メロン"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">メロン</span></label>
</div><!-- /.echo-form -->

<hr class="echo-margin-y-lg">

<p>モバイル環境でフォームが画面幅を超える場合は、自動改行される。</p>

<div class="echo-form">
    <label for="form-default-05" class="echo-form-label">アカウント名</label>
    <input type="text" class="echo-input" id="form-default-05" name="form_default_05" size="20" value="">
    <label for="form-default-06" class="echo-form-label">パスワード</label>
    <input type="password" class="echo-input" id="form-default-06" name="form_default_06" size="20" value="">
    <button class="echo-button echo-button-style-a echo-button-info">ログイン</button>
</div><!-- /.echo-form -->

sub class echo-form-fixed

文字と余白が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

ボタン、入力欄のサイズは .echo-form-fixed に連動しない。変化させたくない場合は .echo-button-fixed, .echo-input-fixed, .echo-select-fixed クラスを付与すること。

<div class="echo-form echo-form-fixed">
    <label for="form-default-05" class="echo-form-label">アカウント名</label>
    <input type="text" class="echo-input echo-input-fixed" id="form-default-05" name="form_default_05" size="20" value="">
    <label for="form-default-06" class="echo-form-label">パスワード</label>
    <input type="password" class="echo-input echo-input-fixed" id="form-default-06" name="form_default_06" size="20" value="">
    <button class="echo-button echo-button-fixed echo-button-style-a echo-button-info">ログイン</button>
</div><!-- /.echo-form -->

sub class echo-form-grow

.echo-input, .echo-select.echo-form 全体を埋めるように伸びる。




チェックボックス・ラジオボタンは、このクラスを付与しても何も起きない。

好きな食べ物(いくつでも選択できます)
<div class="echo-form echo-form-grow">
    <label for="form-grow-01" class="echo-form-label">姓</label>
    <input type="text" class="echo-input" id="form-grow-01" name="form_grow_01" size="10" value="" placeholder="山田">
    <label for="form-grow-02" class="echo-form-label">名</label>
    <input type="text" class="echo-input" id="form-grow-02" name="form_grow_02" size="10" value="" placeholder="一郎">
</div><!-- /.echo-form -->

<hr class="echo-margin-y-lg">

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

<hr class="echo-margin-y-lg">

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

<hr class="echo-margin-y-lg">

<p>チェックボックス・ラジオボタンは、このクラスを付与しても何も起きない。</p>

<div class="echo-form echo-form-grow">
    <span class="echo-form-label">好きな食べ物(いくつでも選択できます)</span>
    <label class="echo-checkbox" for="form-grow-04-01"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-01" value="りんご"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">りんご</span></label>
    <label class="echo-checkbox" for="form-grow-04-02"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-02" value="バナナ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">バナナ</span></label>
    <label class="echo-checkbox" for="form-grow-04-03"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-03" value="ぶどう"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">ぶどう</span></label>
    <label class="echo-checkbox" for="form-grow-04-04"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-04" value="みかん"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">みかん</span></label>
    <label class="echo-checkbox" for="form-grow-04-05"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-05" value="キウイ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">キウイ</span></label>
    <label class="echo-checkbox" for="form-grow-04-06"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-06" value="かき"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">かき</span></label>
    <label class="echo-checkbox" for="form-grow-04-07"><input type="checkbox" name="form_grow_04[]" id="form-grow-04-07" value="メロン"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">メロン</span></label>
</div><!-- /.echo-form -->

sub class echo-form-append

.echo-input.echo-button が接していた場合は角丸を解除する。


<div class="echo-form echo-form-append">
    <input type="text" class="echo-input" name="search" size="30" placeholder="Keyword">
    <button class="echo-button echo-button-style-a">検索</button>
</div><!-- /.echo-form -->

<hr class="echo-margin-y-lg">

<div class="echo-form echo-form-grow echo-form-append">
    <input type="text" class="echo-input" name="search" size="30" placeholder="Keyword">
    <button class="echo-button echo-button-style-a">検索</button>
</div><!-- /.echo-form -->

echo-form-info

フォームの入力方法を説明する補助テキストを表示する。文字色は $info となる。

文字サイズは .echo-form の(fontsize)が一段階下がる。

プロフィールページのURL末尾の、英数字のIDを入力してください。

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

echo-form-error

フォームの入力を間違えたときの補助テキストを表示する。文字色は $important となる。

文字サイズは .echo-form の(fontsize)が一段階下がる。

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

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