blocs/blocs: 選択肢フォーム（radio / checkbox / select）

blocs/blocs: 選択肢フォーム（radio / checkbox / select）

select・radio・checkbox は、テンプレートから選択肢（menu）を JSON キャッシュに登録し、表示・保存・確認画面のラベル変換に使われます。定義ファイル自動生成（No.3.1）以外で手書きテンプレートを作る場合の記法です。

共通の仕組み

コンパイル時に <select> / <option> / <input type="radio|checkbox"> を解析し、menu キーへ選択肢一覧を保存します。確認画面でのラベル表示は No.2.2 の val() / data-val の menu 変換が使われます。

複数 checkbox の値は、保存時にタブ区切り（\t）の1文字列にまとめられます（Base の prepareRequest()）。

select（プルダウン）

<select> 内の <option> から選択肢が抽出されます。

<select name="category" class="form-control">
    <option value="">選択してください</option>
    <option value="a">カテゴリA</option>
    <option value="b">カテゴリB</option>
</select>

動的に選択肢を追加する場合は addOption()（No.5.2）を併用します。

radio（単一選択）

<div class="form-check">
    <input class="form-check-input" type="radio" name="type" value="a" id="type_a">
    <label class="form-check-label" for="type_a">タイプA</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="type" value="b" id="type_b">
    <label class="form-check-label" for="type_b">タイプB</label>
</div>

編集画面で初期選択を付けるには checked 属性を data-attribute で付与します（develop の form.html 参照）。

checkbox（複数選択）

name は配列形式（name[]）にします。

<div class="form-check">
    <input class="form-check-input" type="checkbox" name="role[]" value="admin" id="role_admin">
    <label class="form-check-label" for="role_admin">管理者</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" name="role[]" value="member" id="role_member">
    <label class="form-check-label" for="role_member">メンバー</label>
</div>

DB には "admin\tmember" のようにタブ区切りで保存するのが BLOCS 管理画面の慣例です（No.1.2 の role カラム参照）。

checked / selected の自動付与

コンパイル後の PHP では Common::addChecked() が呼ばれ、現在の値と一致する radio / checkbox に checked、select の option に selected が付与されます。コントローラーから $val に値を渡すか、編集画面で old() / モデル値がセットされていれば反映されます。

バリデーション

選択肢にも No.2.10 の data-validate（コメント記法）が使えます。

<!-- !category="required" data-lang="カテゴリは必須です。" -->
<select name="category">...</select>
@error("category") <div class="invalid-feedback">{{ $message }}</div> @enderror

関連ナレッジ

• 定義ファイルからの自動生成: No.3.1（select / radio / checkbox タイプ）
• 選択肢の動的追加: No.5.2
• 確認画面でのラベル表示: No.2.2