layout-forms

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 -->