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

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

By Takayuki Miyoshi on November 20, 2009

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

Checkbox、Checkbox*、Radio

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

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

checkbox、checkbox*、radio で利用可能なオプション
オプション 使用例 説明
id:(id) id:foo ラッパー要素の id 属性値。
class:(class) class:bar ラッパー要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを並べる。
tabindex:(num) tabindex:10 最初の input 要素の tabindex 属性値。
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 が使えない状態では機能しない。また、ラジオボタンはこのオプションをサポートしない。

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

例: 

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

Select と Select*

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

select と select* で利用可能なオプション
オプション 使用例 説明
id:(id) id:foo select 要素の id 属性値。
class:(class) class:bar select 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを並べる。
tabindex:(num) tabindex:10 select 要素の tabindex 属性値。
default:(num) default:2
default:1_2_3		 デフォルトで選択されたオプション。default: の後の整数が項目の位置を示す。先頭は 1 になる。2個以上の項目を選択したい場合は、それらの整数をアンダーバー (_) で連結して、default:1_2_3 のようにする。
multiple ドロップダウンメニューを複数選択可能にする。
include_blank 空の項目をドロップダウンメニューの先頭に追加する。

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

例: 

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

参照

デモ

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

Select Country (required)

Select Sports
Football Tennis Pole-vault 

Select Fruit (required)
 Apple Banana Grape

Select Browser (required)

Select Ghkdsjdf

上のフォームのソース:

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

Posted in

Comments are closed.