Form

フォームタグに関する機能の説明と使用例です。

テキスト入力(一行)

データの入力が可能なテキストエリアです。
フォームタグには別途のclassなしでresetに関するcssが宣言されています。
また、実際のフォームタグは変数の中に含まれているため、形態の編集はできません。

<!-- デフォルト -->
<input type="text" />
 <!-- 無効 -->
<input type="text" disabled>

テキスト入力(複数行)

複数行にわたるデータの入力が可能なテキストエリアです。

<!-- 有効 -->
<textarea>内容の入力が可能なエリアです。</textarea>
<!-- 無効 -->
<textarea disabled="disabled"></textarea>

ラジオボタン

複数の選択肢の中から答えを一つだけ選択する場合に使用できます。

<!-- ラジオボタン - デフォルト/有効/無効 -->
<input type="radio">
 <input type="radio" checked>
 <input type="radio" disabled>
 <!-- input + lable - 有効/無効 -->
<input type="radio" checked><label>ラジオボタン</label>
<input type="radio"><label>ラジオボタン</label>
<!-- lable > input - 有効/無効 -->
<label><input type="radio" checked>ラジオボタン</label>
<label><input type="radio">ラジオボタン</label>
<!-- ec-base-label - 有効/無効 -->
<span class="ec-base-label">
    <input type="radio" checked><label>ラジオボタン</label>
</span>
<span class="ec-base-label">
    <input type="radio"><label>ラジオボタン</label>
</span>

チェックボックス

複数の選択肢の中から答えを複数選択する場合に使用できます。

<!-- ラジオボタン - デフォルト/有効/無効 -->
<input type="checkbox">
 <input type="checkbox" checked>
 <input type="checkbox" disabled>
 <!-- input + lable - 有効/無効 -->
<input type="checkbox" checked><label>ラジオボタン</label>
<input type="checkbox"><label>ラジオボタン</label>
<!-- lable > input - 有効/無効 -->
<label><input type="checkbox" checked>ラジオボタン</label>
<label><input type="checkbox">ラジオボタン</label>
<!-- ec-base-label - 有効/無効 -->
<span class="ec-base-label">
    <input type="checkbox" checked><label>ラジオボタン</label>
</span>
<span class="ec-base-label">
    <input type="checkbox"><label>ラジオボタン</label>
</span>

セレクトボックス

選択肢をドロップダウンリストで提示する場合に使用できます。

<!-- デフォルト -->
<select>
    <option>オプション1</option>
    <option>オプション2</option>
    <option>オプション3</option>
</select>
<!-- 無効 -->
<select disabled>
    <option>オプション1</option>
    <option>オプション2</option>
    <option>オプション3</option>
</select>