echo-form
フォームの各入力欄を包括する。
フォーム内の各オブジェクトは .echo-input, .echo-radio, .echo-select, .echo-checkbox, .echo-button
を参照。
各ラベルには .echo-form-label
クラスを付与する。
複数のフォームをグリッド状に揃える場合は、 layout > .echo-forms
を使用すること。
(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 -->