チェックボックス、ラジオボタン、メニュー

This page is also available in English.

Contact Form 7 はチェックボックス、ラジオボタン、それからドロップダウンメニューを表現するフォームタグをいくつか用意しています。この記事では、それらのフォームタグの詳細な使用方法とセマンティクスについて説明します。

チェックボックスとラジオボタン

checkbox と checkbox* はどちらもチェックボックス (HTML における <input type="checkbox">) のグループを表現します。checkbox* はユーザーに対して、少なくともひとつのチェックボックスを選択することを求めます。

radio はラジオボタン (HTML における <input type="radio">) のグループを表現します。入力必須版の radio (“radio*”) はありません。Contact Form 7 が “radio*” を提供しない理由は、そもそもラジオボタンとは入力必須のものだからです。このあたりのことについては HTML の仕様を見た方が早いでしょう。

オプション	使用例	説明
id:(id)	`id:foo`	ラッパー要素の `id` 属性値。
class:(class)	`class:bar`	ラッパー要素の `class` 属性値。2個以上のクラスを設定する場合は複数の `class:` オプションを並べる。
default:(num)	`default:2` `default:1_2_3`	デフォルトで選択されたオプション。`default:` の後の整数が項目の位置を示す。先頭は 1 になる。2個以上の項目を選択したい場合は、それらの整数をアンダーバー (_) で連結して、`default:1_2_3` のようにする。
label_first		デフォルトではチェックボックス(またはラジオボタン)が先に、そのラベルが後に表示される。`label_first` オプションの追加によりこの順序を反転することができる。
use_label_element		個々のチェックボックス(またはラジオボタン)を `<label>` タグで囲む。
exclusive		チェックボックスを排他化する。何を言っているかというと、グループ内のチェックボックスのひとつがチェックされると、その他のチェックボックスはチェックが外される。このため、全体として常に 0 または 1個だけがチェックされた状態になる。これは JavaScript のギミックを使っているので JavaScript が使えない状態では機能しない。また、ラジオボタンはこのオプションをサポートしない。
free_text		最後の項目に自由記入のテキスト項目を付加する。
data:(name)	`data:countries`	Listo から値を取得する。

これらのタイプのタグは1個以上の値を持つことができ、これらの値はチェックボックス(またはラベル)の値とラベルとして使われます。

例:

[checkbox your-country "China" "India" "San Marino"]

ドロップダウンメニュー

select と select* はどちらもドロップダウンメニュー (HTML における <select>) を表現します。select* はユーザーに対して少なくともひとつの項目を選択することを求めます。

オプション	使用例	説明
id:(id)	`id:foo`	`select` 要素の `id` 属性値。
class:(class)	`class:bar`	`select` 要素の `class` 属性値。2個以上のクラスを設定する場合は複数の `class:` オプションを並べる。
default:(num)	`default:2` `default:1_2_3`	デフォルトで選択されたオプション。`default:` の後の整数が項目の位置を示す。先頭は 1 になる。2個以上の項目を選択したい場合は、それらの整数をアンダーバー (_) で連結して、`default:1_2_3` のようにする。
multiple		ドロップダウンメニューを複数選択可能にする。
include_blank		空の項目をドロップダウンメニューの先頭に追加する。
first_as_label		最初の値をラベルとして使う。
data:(name)	`data:countries`	Listo から値を取得する。
autocomplete:(value)	`autocomplete:country-name`	フォーム自動補完のためのオプション

これらのタイプのタグは1個以上の値を持つことができ、これらの値はドロップダウンメニューの項目として使われます。

例:

[select your-country "China" "India" "San Marino"]

デモ

注意: これはデモです。このフォームが実際にメールを送信することはありません。

上のフォームのソース:

Select Country (required)
[checkbox* your-country use_label_element "China" "India" "San Marino"]

Select Sports
[radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]

Select Fruit (required)
[checkbox* your-fruit exclusive "Apple" "Banana" "Grape"]

Select Browser (required)
[select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"]

Select Ghkdsjdf
[select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"]

[submit "Send"]

Contact Form 7