1. Home
  2. HTMLタグ
  3. フォームタグ
  4. チェックボックスを作る

チェックボックスを作る


<input type="checkbox">

ブラウザ
IE
Fx
Sf
Cr
O
分類
インライン要素
空要素
要素
input要素

input要素type="checkbox" を指定すると、チェックボックスを作成することができます。(選択肢の中から複数選べるタイプ)



<input type="checkbox" name="example" value="サンプル">サンプル

<input type="checkbox" name="example" value="サンプル" checked>サンプル


属性 説明
type="" checkbox チェックボックスを作成
name="" 文字列 部品の名前を指定
value="" 文字列 送信される文字列を指定
checked 値は不要 選択された状態を指定

■type="checkbox" (チェックボックスを作成)

type属性の値に checkbox を指定すると、チェックボックスを作成できます。

■name="" (部品の名前を指定)

フォーム部品を識別するための名前を指定します。

複数のチェックボックスに同じ部品名を付けることで、1つのグループを作ることができます。チェックボックスでは、そのグループの中から複数を選択することができます。

この属性の値は、value属性の値とセットで送信されることになります。

■value="" (送信される文字列を指定)

この属性の値は、そのチェックボックスが選択されている時に送信されることになります。

チェックボックスには、このvalue属性が必須となります。

■checked (選択された状態を指定)

この属性を指定したチェックボックスは、最初から選択された状態になります。


【その他の属性】

以下の属性で、部品の無効化を指定することができます。(主に、JavaScript等と組み合わせて使用することになります)

属性 説明
disabled 値は不要 部品を無効化する

■disabled (部品を無効化する)

この属性が指定された部品は、選択することができなくなります。


使用例


<form method="post" action="example.cgi">

<p>デフォルト<br>
<input type="checkbox" name="q1" value="その1"> その1
<input type="checkbox" name="q1" value="その2"> その2
<input type="checkbox" name="q1" value="その3"> その3
<input type="checkbox" name="q1" value="その4"> その4
<input type="checkbox" name="q1" value="その5"> その5
</p>

<p>「その2」と「その4」を選択済みに<br>
<input type="checkbox" name="q2" value="その1"> その1
<input type="checkbox" name="q2" value="その2" checked> その2
<input type="checkbox" name="q2" value="その3"> その3
<input type="checkbox" name="q2" value="その4" checked> その4
<input type="checkbox" name="q2" value="その5"> その5
</p>

<p>「その2」と「その4」を無効化<br>
<input type="checkbox" name="q3" value="その1"> その1
<input type="checkbox" name="q3" value="その2" disabled> その2
<input type="checkbox" name="q3" value="その3"> その3
<input type="checkbox" name="q3" value="その4" disabled> その4
<input type="checkbox" name="q3" value="その5"> その5
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

デフォルト
その1 その2 その3 その4 その5

「その2」と「その4」を選択済みに
その1 その2 その3 その4 その5

「その2」と「その4」を無効化
その1 その2 その3 その4 その5

※サンプルのため送信できません。


フォームタグ

ページの先頭へ


inserted by FC2 system