form-group

システムで可能な限りフォームの各入力セットを包括する。
フォーム内のパーツは.input, .radio, .select, .checkbox, .btnを参照。

氏名

メッセージ

<div class="form-group">
    <label for="demo01-01" class="form-label">氏名</label>
    <input type="text" class="input form-50" id="demo01-01" name="demo00" value="" placeholder="山田一郎" />
</div>
<div class="form-group">
    <label for="demo01-02" class="form-label form-100">メッセージ</label>
    <textarea id="demo01-02" name="demo02" rows="5" class="input form-100" placeholder="メッセージをどうぞ"></textarea>
</div>

form-inline

フォームの各入力セットをインラインで表示する。

姓名

アカウント名パスワード

<div class="form-inline form-100">
    <label for="demo02-01" class="form-label">姓</label>
    <input type="text" class="form-input" id="demo02-01" name="demo02_01" value="" placeholder="山田" />
    <label for="demo02-02" class="form-label">名</label>
    <input type="text" class="form-input" id="demo02-02" name="demo02_02" value="" placeholder="一郎" />
</div>
<div class="form-inline">
    <label for="demo03-01" class="form-label">アカウント名</label>
    <input type="text" class="form-input" id="demo03-01" name="demo03_01" value="" placeholder="山田" />
    <label for="demo03-02" class="form-label">パスワード</label>
    <input type="text" class="form-input" id="demo03-02" name="demo03_02" value="" placeholder="一郎" />
    <div class="p-l"><button class="btn btn-second">ログイン</button></div>
</div>
<div class="form-inline form-100">
    <input type="text" name="search" class="form-input" placeholder="Keyword" />
    <button class="btn btn-second btn-square">検索</button>
</div>

form-flex

フォームの各入力セットをフレックスボックスで表示する。

form-label

フォームの追加テキストやラベルを整列する。

form-(percentage)

可能な要素であれば入力項目の幅を広げる。 15, 25, 33, 50, 75, 100 に対応している。

<div class="form-group">
    <input type="text" class="input form-15" name="demo04_01" size="10" value="15" />
</div>
<div class="form-group">
    <input type="text" class="input form-25" name="demo04_02" size="10" value="25" />
</div>
<div class="form-group">
    <input type="text" class="input form-33" name="demo04_03" size="10" value="33" />
</div>
<div class="form-group">
    <input type="text" class="input form-50" name="demo04_04" size="10" value="50" />
</div>
<div class="form-group">
    <input type="text" class="input form-75" name="demo04_05" size="10" value="75" />
</div>
<div class="form-group">
    <input type="text" class="input form-100" name="demo04_06" size="10" value="100" />
</div>

form-error

フォームの入力を間違えたときに表示される補助テキスト。

form-message

フォームの前書き部分。

form-preview

フォームの確認部分。

form-submit

フォームの送信ボタン部分。

form-10-return

フォームの送信後に指定したページへ誘導する部分。

component-form