<input type=checkbox> …… チェックボックスの入力欄を表す

<input type=checkbox>は、チェックボックスの入力欄を表す際に使用します。

input要素のtype属性の値に checkbox を指定すると、 input要素はチェックされている状態（true）とチェックされていない状態（false）の いずれかの状態を表すコントロールを表します。

■属性

■使用例

以下のサンプルは、ピザの注文画面を想定しています。 ラジオボタンとチェックボックスの違いは、 複数の選択肢から1つを選択するか、 複数の選択肢から複数を選択するかの違いです。

<form method="post" enctype="application/x-www-form-urlencoded" action="order.cgi">
 <p><label>お名前: <input name="custname"></label></p>
 <p><label>電話番号: <input type=tel name="custtel"></label></p>
 <p><label>メール: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend>ピザのサイズ</legend>
  <p><label><input type=radio name=size value="small">Small</label></p>
  <p><label><input type=radio name=size value="medium">Medium</label></p>
  <p><label><input type=radio name=size value="large">Large</label></p>
 </fieldset>
 <fieldset>
  <legend>ピザのトッピング</legend>
  <p><label><input type=checkbox name="topping" value="bacon">ベーコン</label></p>
  <p><label><input type=checkbox name="topping" value="cheese">チーズ</label></p>
  <p><label><input type=checkbox name="topping" value="onion">オニオン</label></p>
  <p><label><input type=checkbox name="topping" value="mushroom">マッシュルーム</label></p>
 </fieldset>
 <p><label>希望配達時間: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>ご希望など: <textarea name="comments"></textarea></label></p>
 <p><button>上記内容で注文する</button></p>
</form>

■使用例

以下のサンプルは、script要素で関数を定義して、計算結果を表示するウェブアプリです。 input type=checkboxで作成するチェックボックスはチェックを付けたり外したりできますが、 ユーザーがチェックボックスを操作した際の変化をonchangeイベントで拾っています。

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>

<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
 <fieldset>
  <legend>車体価格を自動見積</legend>
  <p>基本料金: £52000.</p>
  <p>追加オプション:</p>
  <div><label><input type=checkbox name=brakes>セラミックブレーキ (£1000)</label></div>
  <div><label><input type=checkbox name=radio>衛星ラジオ (£2500)</label></div>
  <div><label><input type=checkbox name=turbo>ターボチャージャー (£5000)</label></div>
  <div><label><input type=checkbox name=sticker>ステッカー (£250)</label></div>
  <p><strong>合計: £<output name=result></output></strong></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目

Sponsors