input タグエレメント

　input タグエレメントは、単一のデータ入力やコントロールウィジェットが作成できる HTML タグエレメントです。<FORM>の部品として利用します。
　<label> によって、input の項目名や説明を付加することができます。

　入力するデータによって type 属性値を指定する必要があります。例えば、テキスト入力には type="text"、数値は number です。
　type 属性値については以下のtype属性についてを参照してください。

<input>

<label>テキスト入力 : <input name="val_tel" type="text" value=""></input></label>

表示例

テキスト入力 :

　改行のある長文は <textarea> を使います。

　複数の選択肢がある場合で、一覧からの選択には <select>、ひとつだけを選択するには <input type="radio"> 、複数個の選択するには <input type="checkbox"> を使います。

　入力候補は、datalist タグで定義することもできます。

<datalist> エレメント

<input list="test">

<datalist id="test">
	<option value="tokyo" />
	<option value="nagoya" />
	<option value="kyoto" />
	<option value="osaka" />
	<option value="fukuoka" />
</datalist>

表示例

　入力候補はフォーカスされるか、またはフォーカスされてからクリックすると表示されます。

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... 年度の第何週目か

　type="file" といった type 属性値によっては、enctype 属性といった <FORM> の属性値を適切に指定しなければなりません。

属性

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

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

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

_blank... 別タブまたはウィンドウに表示
_self... リンク元に表示
_parent... ひとつ上の親フレームに表示
_top... フレームがあれば全て解除して表示

Window や <iframe> の name 属性の値を指定することもできます。

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

<label>

項目名（label）:

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

JavaScript

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

input タグエレメント

type 属性について

属性

<label>

JavaScript

関連（Related）