<INPUT type="checkbox">チェックボックスを作る

<INPUT>タグのtype属性に「checkbox」と指定すると、チェックボックスを作成する事ができます。チェックボックスでは、質問に対する答えの一覧などから、複数の項目の選択などができます。 例えば、複数の選択項目の中から、該当する項目を複数選択できるようにする場合などに使用されます。

またname属性では、このボタン(チェックボックス)に名前を付ける事ができます。 付けた名前は<FORM>のデータが送信される時に、value属性の値とセットになって送られてきます。

ですが同じ名前のボタンは同一のグループとして認識されるため、共通の項目に対する選択肢として使用するチェックボックスには、すべて同じ名前を付ける必要があります。 またどの項目が選択されたのかを見分けるためには、個別の値をvalue属性に指定して下さい。

なおチェックボックスを予め選択された状態で表示したい場合は、checked属性を使用します。 通常は「checked」とだけ記述することも可能ですが、XHTMLの場合は省略できませんので、checked="checked"という様に記述して下さい。 これはラジオボタンに使用する時も同様です。

使用した時の例

<p>好きな食べ物は?<br />
<input type="checkbox" name="food" value="takenoko" checked="checked">たけのこの山
<input type="checkbox" name="food" value="kinoko">キノコの里
<input type="checkbox" name="food" value="alfort">アルフォート
</p>

ブラウザ上の表示例

好きな食べ物は?
たけのこの山 キノコの里 アルフォート

書式

  • <input type="checkbox" name="名前" value="送信文字"> ・・・・・・ チェックボックスを作る

属性

name="任意の名前" チェックボックスに名前をつける
value="" 選択された時に送信されるテキスト
checked="checked" 最初からチェックボックスにチェックを付ける

対応ブラウザなどのデータ

形式 <INPUT type="checkbox"> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~