echo-forms
.echo-form
を繰り返すための領域を作成する。
.echo-forms-header, .echo-forms-contents > .echo-form
を交互に繰り返す前提となり、(breakpoint)が lg
以上でグリッド状に表示される。
.echo-forms-header
の幅は、最もコンテンツが多い要素に揃う。
ヘッダ .echo-forms-header
には、ラベル .echo-forms-label
が含まれる前提となっている。
ラベルに兄弟要素がある場合は整列される。ここでは例として .echo-forms-meta.echo-labels
でラベル群を含めている。
Internet Explorer 11では、grid-template-columns
プロパティを使用している関係で、すべての .echo-form
が余白がない状態で縦に並び、入力に著しい支障が生じる。
IEで同じ体裁とする場合は、このコンポーネントを使用せず、 .echo-table.echo-table-0to12
等に書き換えること。
.echo-form-grow の挙動の確認のため、 .echo-container で幅を制限している。
任意
好きな食べ物
いくつでも選択できます。
<div class="echo-container echo-container-sm">
<p class="echo-margin-bottom-lg">.echo-form-grow の挙動の確認のため、 .echo-container で幅を制限している。</p>
<div class="echo-forms">
<div class="echo-forms-header">
<label for="forms-01" class="echo-forms-label">氏名</label>
<div class="echo-forms-meta echo-labels">
<ul class="echo-labels-list">
<li class="echo-labels-item"><span class="echo-label echo-label-style-a echo-label-important">必須</span></li>
</ul><!-- /.echo-labels-list -->
</div><!-- /.echo-labels -->
</div><!-- /.echo-forms-header -->
<div class="echo-forms-contents">
<div class="echo-form">
<label for="forms-01" class="echo-form-label">姓</label>
<input type="text" class="echo-input" id="forms-01" name="forms_01" size="10" value="" placeholder="山田">
<label for="forms-02" class="echo-form-label">名</label>
<input type="text" class="echo-input" id="forms-02" name="forms_02" size="10" value="" placeholder="一郎">
</div><!-- /.echo-form -->
</div><!-- /.echo-forms-contents -->
<div class="echo-forms-header">
<label for="forms-03" class="echo-forms-label">フリガナ</label>
<div class="echo-forms-meta echo-labels">
<ul class="echo-labels-list">
<li class="echo-labels-item"><span class="echo-label echo-label-style-a echo-label-important">必須</span></li>
<li class="echo-labels-item"><span class="echo-label echo-label-style-b echo-label-info">カタカナ</span></li>
</ul><!-- /.echo-labels-list -->
</div><!-- /.echo-labels -->
</div><!-- /.echo-forms-header -->
<div class="echo-forms-contents">
<div class="echo-form">
<label for="forms-03" class="echo-form-label">セイ</label>
<input type="text" class="echo-input" id="forms-03" name="forms-03" size="10" value="" placeholder="ヤマダ">
<label for="forms-04" class="echo-form-label">メイ</label>
<input type="text" class="echo-input" id="forms-04" name="forms_04" size="10" value="" placeholder="イチロウ">
</div><!-- /.echo-form -->
</div><!-- /.echo-forms-contents -->
<div class="echo-forms-header">
<label for="forms-05" class="echo-forms-label">メッセージ</label>
</div><!-- /.echo-forms-header -->
<div class="echo-forms-contents">
<div class="echo-form echo-form-grow">
<textarea id="forms-05" class="echo-input" name="forms_05" rows="5" cols="50" placeholder="メッセージをどうぞ"></textarea>
</div><!-- /.echo-form -->
</div><!-- /.echo-forms-contents -->
<div class="echo-forms-header">
<label class="echo-forms-label" for="forms-06">好きな映画</label>
<span class="echo-label echo-label-style-b echo-label-info">任意</span>
</div><!-- /.echo-forms-header -->
<div class="echo-forms-contents">
<div class="echo-form">
<div class="echo-select">
<select id="forms-06" name="forms_06">
<option value="">選択してください</option>
<option value="raputa">天空の城ラピュタ</option>
<option value="charlie">チャーリーとチョコレート工場</option>
<option value="schindler">シンドラーのリスト</option>
</select>
</div><!-- /.echo-select -->
</div><!-- /.echo-form -->
</div><!-- /.echo-forms-contents -->
<div class="echo-forms-header">
<span class="echo-forms-label">好きな食べ物</span>
</div><!-- /.echo-forms-header -->
<div class="echo-forms-contents">
<div class="echo-form">
<label class="echo-checkbox" for="forms-07-01"><input type="checkbox" name="forms_07[]" id="forms-07-01" value="りんご"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">りんご</span></label>
<label class="echo-checkbox" for="forms-07-02"><input type="checkbox" name="forms_07[]" id="forms-07-02" value="バナナ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">バナナ</span></label>
<label class="echo-checkbox" for="forms-07-03"><input type="checkbox" name="forms_07[]" id="forms-07-03" value="ぶどう"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">ぶどう</span></label>
<label class="echo-checkbox" for="forms-07-04"><input type="checkbox" name="forms_07[]" id="forms-07-04" value="みかん"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">みかん</span></label>
<label class="echo-checkbox" for="forms-07-05"><input type="checkbox" name="forms_07[]" id="forms-07-05" value="キウイ"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">キウイ</span></label>
<label class="echo-checkbox" for="forms-07-06"><input type="checkbox" name="forms_07[]" id="forms-07-06" value="かき"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">かき</span></label>
<label class="echo-checkbox" for="forms-07-07"><input type="checkbox" name="forms_07[]" id="forms-07-07" value="メロン"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">メロン</span></label>
<label class="echo-checkbox" for="forms-07-08"><input type="checkbox" name="forms_07[]" id="forms-07-08" value="いちご"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">いちご</span></label>
<label class="echo-checkbox" for="forms-07-09"><input type="checkbox" name="forms_07[]" id="forms-07-09" value="マンゴー"><span class="echo-checkbox-icon"></span><span class="echo-checkbox-label">マンゴー</span></label>
</div><!-- /.echo-form -->
<p class="echo-text-info echo-margin-top-sm echo-margin-bottom-0">いくつでも選択できます。</p>
</div><!-- /.echo-forms-contents -->
</div><!-- /.echo-forms -->
</div><!-- /.echo-container -->