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

<input>,<label>

 <input>は単一のデータ入力を受け付ける<FORM>の部品です。 <label>は、<input>の項目名や説明のためのエレメントです。

<input>

 単一のデータ入力部品やコントロールウィジェットが作成できます。データによってtypeと送信方法(POST、GET)を変更しなければなりません。
 改行のある文章は<textarea>を使います。
 複数の選択肢がある場合で、一覧からの選択には<select>、選択肢を並べてひとつだけを選択するには<input type="radio"> 、選択肢を並べて複数個の選択するには<input type="checkbox">を使います。

type属性について

 <input>には様々なtype属性が用意されており、入力値によって選択することができます。

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

属性

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

AttributeValueExtra information
name*必須。タグエレメントを特定するための属性です。
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
type 扱うデータタイプまたはinputタグの形状
value 初期値または設定値
placeholder 例として表示
maxlength 最大入力数
size 入力ボックスの幅
readonly 表示のみで編集不可

 target 属性も設定できます。target 属性に指定できる値は以下があります。

  • _blank... 別タブまたはウィンドウに表示
  • _self... リンク元に表示
  • _parent... ひとつ上の親フレームに表示
  • _top... フレームがあれば全て解除して表示
Window<iframe> の name 属性の値を指定することもできます。

 もしデータを送信しない場合は、「 disabled 」属性を true または disabled に設定します。

<label>


JavaScript

 <input> を定義しているのは、HTMLInputElement インターフェイスです。 詳しくは HTMLInputElement を参照してください。