備忘録的プログラミングリファレンス

<input type="checkbox">

 <input type="checkbox"> は複数の選択肢からいくつかの選択ができる <form> の入力部品です。 <input type="checkbox"> エレメントは複数の選択を可能にする入力部品です。

<input type="buttom">
<label><input name="example_check" type="checkbox" value="dog" />いぬ</label>
<label><input name="example_check" type="checkbox" value="cat" />ねこ</label>
<label><input name="example_check" type="checkbox" value="monkey" />さる</label>
上記を実行

 <label> エレメントは項目名や説明のために付けることができます。

 複数の選択肢から1つだけを選択できる入力部品は <input type="radio"> です。<input type="radio"> を参照してください。

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
name*必須。タグエレメントを特定するための属性です。
classcssに使います。同名のclassは同じスタイルが適応されます。
type 扱うデータタイプまたはinputタグの形状
maxlength 最大入力数
size 入力ボックスの幅

 以下の編集方法は、項目ごとに「value値=項目名」と編集します。最初の値はvalue値で、次の値が項目名です。
 checkedを付けることでデフォルトの値として指定できます。


ブラウザでの見え方(このページのスタイルが反映されています)

関連typeについて

  • button... 汎用ボタン。scriptに利用する
  • checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
  • color... カラーピッカー。色選択に使用します。
  • date... 日付け
  • datetime-local... 日付けと時刻(ローカルタイムゾーン)
  • email... emailアドレス
  • file... ファイルのアップロード
  • hidden... 画面に表示しないがサーバーに送信するデータ
  • image... 任意の画像を利用したカスタム用ボタン
  • month... 年度と月度
  • number... 数値
  • password... パスワード入力
  • radio... 選択肢が必要な場合
  • range... 調整バーによる数値入力
  • reset... リセットボタン。入力データをクリア
  • search... 検索用
  • submit... 送信ボタン
  • tel... 電話番号
  • text... テキスト入力。改行を含む場合は<textarea>を
  • time... 時刻
  • url... URL
  • week... 年度の第何週目か