iPentec.com / Document / カテゴリ: HTML / タグ: HTML HTMLタグ HTML チェックボックス

チェックボックスを表示する

概要

HTMLでチェックボックスを表示する場合は、inputタグを利用します。inputタグのtype属性に "checkbox" を指定するとチェックボックスが表示できます。

書式

<input type="checkbox" />

表示時にチェックをつけた状態で表示する場合は、checked 属性に "checked" を設定します。

<input type="checkbox" checked="checked"/>

例

コード

下記のHTMLを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

  チェックボックスの表示テスト<br />
  <div>
    <input type="checkbox" />
  </div>
  <div>
    <input type="checkbox" checked="checked" />
  </div>

</body>
</html>

解説

inputタグを記述してチェックボックスを表示します。checked 属性を記述しない表示と、checked="checked" を記述した表示の2つのチェックボックスを表示します。

表示結果

上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
チェックされていないチェックボックスと、チェックされたチェックボックスが表示できています。

チェックボックスを表示する:画像1

補足:チェックボックスのラベル

チェックボックスのinputタグに続けて文字列を記述するとチェックボックスの右側に文字列を表示できます。しかし、チェックボックス右側の文字列をクリックしてもチェックボックスのチェック状態は変化しません。
チェックボックスのキャプションをクリックした際にチェックボックスのチェック状態を変える動作にしたい場合はこちらの記事を参照してください。

  <div>
    <input type="checkbox" />チェックボックスです。
  </div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  チェックボックスの表示テスト<br />
  <div>
    <input type="checkbox" />ぺんぎんクッキー
  </div>
  <div>
    <input type="checkbox" checked="checked" />らくだキャラメル
  </div>
</body>
</html>

上記のページをWebブラウザで表示すると下図の表示となります。チェックボックス右側のテキストをクリックしてもチェックボックスのチェックは変化しません。
チェックボックスを表示する:画像2