“input”要素:入力欄｜HTML－havin' a coffee break

＃

入力欄の種類

“type”属性の値	説明	サンプル
hidden	非表示の送信されるデータ
text	1行のテキスト入力欄
search	検索テキストの入力欄
tel	電話番号の入力欄
url	URLの入力欄
email	メールアドレスの入力欄
password	パスワードの入力欄
date	日付の入力欄
month	月の入力欄
week	週の入力欄
time	時刻の入力欄
datetime-local	日時の入力欄
number	数値の入力欄
range	大まかな数値の入力欄
color	色の入力欄
checkbox	チェックボックス
radio	ラジオボタン
file	ファイルの送信欄
submit	送信ボタン
image	画像の送信ボタン
reset	リセットボタン
button	汎用的なボタン

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
なし
任意属性
グローバル属性
accept=""	入力欄が受け入れるファイル形式	audio/*	音声ファイルを受け入れる
		video/*	動画ファイルを受け入れる
		image/*	画像ファイルを受け入れる
		MIMEタイプ	入力欄が受け入れるファイル形式
		.拡張子	入力欄が受け入れるファイル形式
alt=""	画像の代替テキスト	テキスト	画像の代わりになるテキスト
autocomplete=""	【“type”属性の値が“hidden”である時】フォームで送信する値の種類	トークン	フォームで送信する値の種類
	【“type”属性の値が“hidden”ではない時】ブラウザーによるオートコンプリートの可否	トークン	オートコンプリートで表示されるべき入力候補の種類
		on	オートコンプリートを行う
		off	オートコンプリートを行わない
checked=""	選択された状態にする	checked	選択された状態にする
dirname=""	送信するデータの書字方向に関する値のクエリ名	文字列	送信するデータの書字方向に関する値のクエリ名
disabled=""	入力欄を無効化	disabled	入力欄を無効化
form=""	関連付けるフォーム	ID名	関連づける“form”要素の“id”属性の値
formaction=""	フォームに入力されたデータの送信先	URL	フォームに入力されたデータの送信先のURL
formenctype=""	フォームが送信するデータの形式	application/x-www-form-urlencoded	入力されたデータをURLエンコードして送信
		multipart/form-data	入力されたデータをマルチパートデータとして送信
		text/plain	入力されたデータをプレーンテキストとして送信
formmethod=""	フォームを送信時のHTTPメソッド	get	入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信
		post	入力されたデータをHTTPリクエストの本文として送信
		dialog	フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる
formnovalidate=""	フォームの送信時に入力内容の妥当性をチェックしない	formnovalidate	フォームの送信時に入力内容の妥当性をチェックしない
formtarget=""	フォームの送信時の応答画面の表示方法	_blank	新しいブラウジング・コンテキストに表示
		_self	現在のブラウジング・コンテキストに表示
		_parent	現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
		_top	現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
		ブラウジング・コンテキスト名	任意のブラウジング・コンテキストに表示
height=""	画像の高さ	正の整数	画像の大きさの高さのピクセル数
list=""	入力値の候補と関連付ける	ID名	関連づける“datalist”要素の“id”属性の値
max=""	入力可能な最大値	日付	【“type”属性の値が“date”である時】機械可読な形式の日付(“YYYY-MM-DD”)
		月	【“type”属性の値が“month”である時】機械可読な形式の月(“YYYY-MM”)
		週	【“type”属性の値が“week”である時】機械可読な形式の週(“yyyy-Www”)
		時刻	【“type”属性の値が“time”である時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
		日時	【“type”属性の値が“datetime-local”である時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
		数値	【“type”属性の値が“number”、“range”である時】入力可能な最大値
maxlength=""	入力可能な最大の文字数	正の整数	入力可能な最大の文字数
min=""	入力可能な最小値	日付	【“type”属性の値が“date”である時】機械可読な形式の日付(“YYYY-MM-DD”)
		月	【“type”属性の値が“month”である時】機械可読な形式の月(“YYYY-MM”)
		週	【“type”属性の値が“week”である時】機械可読な形式の週(“yyyy-Www”)
		時刻	【“type”属性の値が“time”である時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
		日時	【“type”属性の値が“datetime-local”である時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
		数値	【“type”属性の値が“number”、“range”である時】入力可能な最小値
minlength=""	入力可能な最小の文字数	正の整数	入力可能な最小の文字数
multiple=""	複数の値を入力を可能にする	multiple	複数の値を入力を可能にする
name=""	入力欄の名前	文字列	入力欄の名前
		isindex	【“type”属性の値が“text”、“search”である時】フォームの送信時にこの入力欄の入力値のみ送信する
		_charset_	【“type”属性の値が“hidden”である時】送信するデータはフォームの送信に使用する文字エンコーディングの情報
pattern=""	入力可能な値の書式	正規表現	JavaScriptの正規表現で表した入力可能な値の書式
placeholder=""	入力欄のプレースホルダー	テキスト	入力欄のプレースホルダー
popovertarget=""	表示状態を切り替えるポップオーバー要素	ID名	表示状態を切り替えるポップオーバー要素の“id”属性の値
popovertargetaction=""	ポップオーバー要素の表示状態の切り替え方法	toggle	ポップオーバー要素の表示状態を切り替える
		show	ポップオーバー要素を表示する
		hide	ポップオーバー要素を閉じる
readonly=""	入力値を編集できなくする	readonly	入力値を編集できなくする
required=""	入力を必須にする	required	入力を必須にする
size=""	入力欄の横幅	正の整数	入力欄が表示できる文字数
src=""	画像ファイルの指定	URL	ボタンとする画像ファイルのURL
step=""	入力可能な数値の間隔	any	どのような値も入力可能(無段階)
		日数	【“type”属性の値が“date”である時】入力可能な日付の間隔
		月数	【“type”属性の値が“month”である時】入力可能な月の間隔
		週数	【“type”属性の値が“week”である時】入力可能な週の間隔
		秒数	【“type”属性の値が“time”、“datetime-local”である時】入力可能な時刻の間隔
		数値	【“type”属性の値が“number”、“range”である時】入力可能な数値の間隔
title=""	要素に補足情報を付ける	テキスト	【“pattern”属性を指定しない時】補足情報
title=""	入力可能な値の書式の説明	テキスト	【“pattern”属性を指定する時】入力可能な値の書式の説明
type=""	入力欄の種類	hidden	非表示の送信されるデータ
		text	1行のテキスト入力欄
		search	検索テキストの入力欄
		tel	電話番号の入力欄
		url	URLの入力欄
		email	メールアドレスの入力欄
		password	パスワードの入力欄
		date	日付の入力欄
		month	月の入力欄
		week	週の入力欄
		time	時刻の入力欄
		datetime-local	日時の入力欄
		number	数値の入力欄
		range	大まかな数値の入力欄
		color	色の入力欄
		checkbox	チェックボックス
		radio	ラジオボタン
		file	ファイルの送信欄
		submit	送信ボタン
		image	画像の送信ボタン
		reset	リセットボタン
		button	汎用的なボタン
value=""	フォームで送信する値の初期値	テキスト	【“type”属性の値が“hidden”、“text”、“search”、“tel”、“password”である時】フォームで送信する値の初期値
		URL	【“type”属性の値が“url”である時】妥当な形式のURL
		メールアドレス	【“type”属性の値が“email”である時】妥当な形式のメールアドレス
		日付	【“type”属性の値が“date”である時】機械可読な形式の日付(“YYYY-MM-DD”)
		月	【“type”属性の値が“month”である時】機械可読な形式の月(“YYYY-MM”)
		週	【“type”属性の値が“week”である時】機械可読な形式の週(“yyyy-Www”)
		時刻	【“type”属性の値が“time”である時】機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
		日時	【“type”属性の値が“datetime-local”である時】機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
		数値	【“type”属性の値が“number”、“range”である時】数値
		色	【“type”属性の値が“color”である時】16進数カラーコード(“#rrggbb”)
	【“type”属性の値が“checkbox”、“radio”である時】フォームで送信される値	文字列	フォームで送信される値
	【“type”属性の値が“submit”である時】ボタンに表示されるラベル、フォームで送信される値	テキスト	ボタンに表示されるラベル、フォームで送信される値
	【“type”属性の値が“reset”、“button”である時】ボタンに表示されるラベル	テキスト	ボタンに表示されるラベル
width=""	画像の横幅	正の整数	画像の大きさの横幅のピクセル数

“type”属性の値ごとの指定可能な属性はそれぞれの項目を参照してください。

“value”属性は必須属性はありませんが“type="radio"”、“type="hidden"”を指定した“input”要素ではほとんどの場合必要です。

“type="image"”を指定した“input”要素では“src”属性と“alt”属性は必須属性です。

“type="button"”を指定した“input”要素では“value”属性は必須属性です。

“name”属性は必須属性はありませんが、“input”要素の入力値をフォームが送信するために必要です。

グローバル属性の“title”属性は“pattern”属性を指定した“input”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。

過去に定義されていた属性

属性		値
属性	説明	値	説明
align=""	垂直方向の位置	bottom	上端揃え
		middle	中央揃え
		top	下端揃え
	水平方向の位置	left	左寄せ
	水平方向の位置	right	右寄せ
tabindex=""	フォーカスの可否とフォーカスの移動順序を指定する	正の整数	順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
		0	順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
		負の整数	フォーカス可能だが順次ナビゲーションには加わらない
accesskey=""	要素にアクセスキーを割り当てる	文字	ユニコード1文字によるアクセスキー
usemap=""	クライアントサイドイメージマップ	#マップ名	イメージマップの名前(“map”要素の“name”属性の値)
ismap=""	サーバーサイドイメージマップ	ismap	サーバーサイドイメージマップ
onblur=""	フォーカスを失った時に実行されるスクリプト	スクリプト	フォーカスを失った時に実行されるスクリプト
onfocus=""	フォーカスされた時に実行されるスクリプト	スクリプト	フォーカスされた時に実行されるスクリプト
onselect=""	要素の入力内容が選択された時に実行されるスクリプト	スクリプト	要素の入力内容が選択された時に実行されるスクリプト
onchange=""	要素の入力内容に変化があった時に実行されるスクリプト	スクリプト	要素の入力内容に変化があった時に実行されるスクリプト
inputmode=""	要素に入力する時のソフトウェアキーボードの種類を指定する	none	ソフトウェアキーボードを表示しない
		text	ユーザーの地域に適切なテキストの入力
		tel	電話番号の入力
		url	URLの入力
		email	メールアドレスの入力
		numeric	数値の入力
		decimal	実数の入力
		search	検索用の入力
autofocus=""	要素に自動的にフォーカスする	autofocus	要素に自動的にフォーカスする
popoverhidetarget=""	ポップオーバー要素を閉じる	ID名	非表示状態にするポップオーバー要素の“id”属性の値
popovershowtarget=""	ポップオーバー要素を表示する	ID名	表示状態にするポップオーバー要素の“id”属性の値
popovertoggletarget=""	ポップオーバー要素の表示状態を切り替える	ID名	表示状態を切り替えるポップオーバー要素の“id”属性の値

＃

仕様書

“input”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<input>
hidden
text
search
tel
url
email
password
date
month
week
time
datetime-local
number
range
color
checkbox
radio
file
submit
image
reset
button


align=""
tabindex=""
accesskey=""
usemap=""
ismap=""
onblur=""
onchange=""
onfocus=""
onselect=""
autofocus=""
inputmode=""
popoverhidetarget=""
popovershowtarget=""
popovertoggletarget=""

DOMインターフェース




[Exposed=Window]

interface HTMLInputElement : HTMLElement {


[HTMLConstructor] constructor();



[CEReactions] attribute DOMString accept;

[CEReactions] attribute DOMString alt;

[CEReactions] attribute DOMString autocomplete;

[CEReactions] attribute boolean defaultChecked;

attribute boolean checked;

[CEReactions] attribute DOMString dirName;

[CEReactions] attribute boolean disabled;

readonly attribute HTMLFormElement? form;

attribute FileList? files;

[CEReactions] attribute USVString formAction;

[CEReactions] attribute DOMString formEnctype;

[CEReactions] attribute DOMString formMethod;

[CEReactions] attribute boolean formNoValidate;

[CEReactions] attribute DOMString formTarget;

[CEReactions] attribute unsigned long height;

attribute boolean indeterminate;

readonly attribute HTMLDataListElement? list;

[CEReactions] attribute DOMString max;

[CEReactions] attribute long maxLength;

[CEReactions] attribute DOMString min;

[CEReactions] attribute long minLength;

[CEReactions] attribute boolean multiple;

[CEReactions] attribute DOMString name;

[CEReactions] attribute DOMString pattern;

[CEReactions] attribute DOMString placeholder;

[CEReactions] attribute boolean readOnly;

[CEReactions] attribute boolean required;

[CEReactions] attribute unsigned long size;

[CEReactions] attribute USVString src;

[CEReactions] attribute DOMString step;

[CEReactions] attribute DOMString type;

[CEReactions] attribute DOMString defaultValue;

[CEReactions] attribute [LegacyNullToEmptyString] DOMString value;

attribute object? valueAsDate;

attribute unrestricted double valueAsNumber;

[CEReactions] attribute unsigned long width;



undefined stepUp(optional long n = 1);

undefined stepDown(optional long n = 1);



readonly attribute boolean willValidate;

readonly attribute ValidityState validity;

readonly attribute DOMString validationMessage;

boolean checkValidity();

boolean reportValidity();

undefined setCustomValidity(DOMString error);



readonly attribute NodeList? labels;



undefined select();

attribute unsigned long? selectionStart;

attribute unsigned long? selectionEnd;

attribute DOMString? selectionDirection;

undefined setRangeText(DOMString replacement);

undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");

undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);



undefined showPicker();



// also has obsolete members


};

HTMLInputElement includes PopoverInvokerElement;

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




input:is([type=hidden i]) {

 
 display: none !important;

 
}





input:is[type=tel i]:dir(ltr) {

 
 direction: plaintext;

 
}





input[dir=auto i]:is([type=search i], [type=tel i], [type=url i], [type=email i]) {

 
 unicode-bidi: ltr;

 
}





input {


 letter-spacing: initial;

 word-spacing: initial;

 line-height: initial;

 text-transform: initial;

 text-indent: initial;

 text-shadow: initial;

 text-align: initial;

 
}





input:is([type=reset i], [type=button i], [type=submit i]) {

 
 text-align: center;

 
}





input:is([type=reset i], [type=button i], [type=submit i], [type=color i],
[type=date i], [type=month i], [type=week i], [type=time i], [type=datetime-local i], [type=number i], [type=range i], [type=checkbox i], [type=radio i], [type=file i]) {

 
 display: inline-block;

 
}





input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]) {

 
 box-sizing: border-box;

 
}





input:is([type=text i], [type=search i], [type=tel i], [type=url i], [type=email i]) {

 
 display: inline-block;

 line-height: 1.0;

 
}

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、フォーム関連要素(リスト化要素、送信可能要素、リセット可能要素、自動大文字化継承要素)
カテゴリー	“type”属性の値が“hidden”ではない場合はインタラクティブ・コンテンツ、ラベル付け可能要素、パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	空
タグの省略	終了タグはありません

“input”要素:入力欄

要素について

サンプルコード

入力欄の種類

属性と値

仕様書