HTMLInputElement - HTMLのinput要素

公開日: 2017/02/27

HTMLInputElementは、HTMLのinput要素が実装するインターフェイスです。

概要

名前

HTMLInputElement

継承

実装

実装するインターフェイスはありません。

IDL

[HTMLConstructor]
interface HTMLInputElement : HTMLElement {
  [CEReactions] attribute DOMString accept;
  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute boolean defaultChecked;
  attribute boolean checked;
  [CEReactions] attribute DOMString dirName;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly 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;
  [CEReactions] attribute DOMString inputMode;
  readonly attribute HTMLElement? 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, TreatNullAs=EmptyString] attribute DOMString value;
  attribute object? valueAsDate;
  attribute unrestricted double valueAsNumber;
  [CEReactions] attribute unsigned long width;

  void stepUp(optional long n = 1);
  void stepDown(optional long n = 1);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  void setCustomValidity(DOMString error);

  [SameObject] readonly attribute NodeList labels;

  void select();
  attribute unsigned long? selectionStart;
  attribute unsigned long? selectionEnd;
  attribute DOMString? selectionDirection;
  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

enum SelectionMode {
  "select",
  "start",
  "end",
  "preserve" // default
};

仕様書

https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement

説明

HTMLInputElementを作成する例です。

JavaScript

// 要素を作成する
var element = document.createElement( "input" ) ;	// <input>

// 属性をセットする
element.type = "text" ;	// →<input type="text">
element.defaultValue = "SYNCER" ;	// →<input type="text" value="SYNCER">

プロパティ

Node、Element、HTMLElementのプロパティを利用できます。

HTMLInputElement.accept

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

accept属性を反映します。

HTMLInputElement.alt

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

alt属性を反映します。

HTMLInputElement.autocomplete

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 6.0+
Opera: ●
iOS: ● 6.0+
Android: ● 4.4+

autocomplete属性を反映します。

HTMLInputElement.autofocus

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ●
Opera: ●
iOS: ●
Android: ●

autofocus属性を反映します。

HTMLInputElement.checked

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

現在のチェック状態を反映します。

HTMLInputElement.defaultChecked

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

checked属性(初期値)を反映します。

HTMLInputElement.defaultValue

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

フォームのリセットを実行した時にセットされる初期値を返します。

HTMLInputElement.dirName

Chrome: ● 17+
Firefox: ×
Edge: ×
IE: ×
Safari: ● 6.0+
Opera: ● 12+
iOS: ● 6.0+
Android: ● 4.4+

dirname属性を反映します。

HTMLInputElement.disabled

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

disabled属性を反映します。

HTMLInputElement.files

Chrome: ●
Firefox: ●
Edge: ×
IE: ×
Safari: ●
Opera: ●
iOS: ●
Android: ●

入力されている全てのファイルを、FileListで返します。

HTMLInputElement.form

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

この要素が関連付けられているform要素を返します。

HTMLInputElement.formAction

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ● 4.0+

formaction属性を反映します。

HTMLInputElement.formEnctype

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ● 4.0+

formenctype属性を反映します。

HTMLInputElement.formMethod

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ● 4.0+

formmethod属性を反映します。

HTMLInputElement.formNoValidate

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

formnovalidate属性を反映します。

HTMLInputElement.formTarget

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ● 4.0+

formtarget属性を反映します。

HTMLInputElement.height

Chrome: ● 21+
Firefox: ● 16+
Edge: ●
IE: ●
Safari: ● 7.1+
Opera: ● 12+
iOS: ● 6.0+
Android: ● 4.4+

height属性を反映します。

HTMLInputElement.indeterminate

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ● 11.6+
iOS: ●
Android: ●

チェックボックスの不確定状態を調整できます。

HTMLInputElement.inputMode

Chrome: ×
Firefox: ×
Edge: ×
IE: ×
Safari: ×
Opera: ×
iOS: ×
Android: ×

inputmode属性を反映します。

HTMLInputElement.labels

Chrome: ●
Firefox: ×
Edge: ×
IE: ×
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ● 4.0+

関連付けられている全てのlabel要素を、NodeListで返します。

HTMLInputElement.list

Chrome: ● 20+
Firefox: ●
Edge: ●
IE: ● 10+
Safari: × -5.1
Opera: ●
iOS: ×
Android: ×

list属性を反映します。

HTMLInputElement.max

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

max属性を反映します。

HTMLInputElement.maxLength

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

maxlength属性を反映します。

HTMLInputElement.min

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

min属性を反映します。

HTMLInputElement.minLength

Chrome: ● 40+
Firefox: ● 51+
Edge: ×
IE: ×
Safari: ×
Opera: ● 27+
iOS: ×
Android: ×

minlength属性を反映します。

HTMLInputElement.multiple

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ●
Opera: ●
iOS: ●
Android: ●

multiple属性を反映します。

HTMLInputElement.name

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

name属性を反映します。

HTMLInputElement.pattern

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

pattern属性を反映します。

HTMLInputElement.placeholder

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ●
Opera: ●
iOS: ●
Android: ●

placeholder属性を反映します。

HTMLInputElement.readOnly

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

readonly属性を反映します。

HTMLInputElement.required

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

required属性を反映します。

HTMLInputElement.selectionDirection

Chrome: ● 15+
Firefox: ● 8+
Edge: ●
IE: ×
Safari: ● 6.0+
Opera: ● 15+
iOS: ● 6.0+
Android: ● 4.4+

範囲選択の方向を表す文字列を返します。

HTMLInputElement.selectionEnd

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

選択の終了位置のオフセットを返します。

HTMLInputElement.selectionStart

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

選択の開始位置のオフセットを返します。

HTMLInputElement.size

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

size属性を反映します。

HTMLInputElement.src

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

src属性を反映します。

HTMLInputElement.step

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

step属性を反映します。

HTMLInputElement.type

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

type属性を反映します。

HTMLInputElement.validationMessage

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

入力内容の検証エラーメッセージを文字列で返します。

HTMLInputElement.validity

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

入力内容の検証結果の情報を表すValidityStateを返します。

HTMLInputElement.value

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

value属性を反映します。

HTMLInputElement.valueAsDate

Chrome: ●
Firefox: × -23
Edge: ●
IE: ×
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

値をDate型として返します。

HTMLInputElement.valueAsNumber

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

値を数値として返します。

HTMLInputElement.width

Chrome: ● 21+
Firefox: ● 16+
Edge: ●
IE: ●
Safari: ● 7.1+
Opera: ● 12+
iOS: ● 6.0+
Android: ● 4.4+

width属性を反映します。

HTMLInputElement.willValidate

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素が、検証候補の場合はtrue、検証候補じゃない場合はfalseを返します。

メソッド

EventTarget、Node、Element、HTMLElementのメソッドを利用できます。

HTMLInputElement.checkValidity()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

入力内容を検証し、検証エラーがある場合にinvalidイベントを発生させます。

HTMLInputElement.reportValidity()

Chrome: ● 40+
Firefox: ● 49+
Edge: ×
IE: ×
Safari: ×
Opera: ● 27+
iOS: ×
Android: ×

入力内容を検証し、検証エラーがある場合にinvalidイベントを発生させ、さらに、検証エラーメッセージを表示します。

HTMLInputElement.select()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

入力されている全ての文字を選択状態にします。

HTMLInputElement.setCustomValidity()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

カスタム検証エラー状態にします。または、カスタム検証エラー状態を解除します。

HTMLInputElement.setRangeText()

Chrome: ● 24+
Firefox: ● 27+
Edge: ×
IE: ×
Safari: ● 7.1+
Opera: ● 15+
iOS: ● 7.0+
Android: ● 4.4+

指定した範囲にテキストを挿入します。

HTMLInputElement.setSelectionRange()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

指定した範囲を選択状態にします。

HTMLInputElement.stepDown()

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

数値を減算します。

HTMLInputElement.stepUp()

Chrome: ●
Firefox: ● 16+
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ●
iOS: ●
Android: ●

数値を加算します。

定数

Nodeの定数を利用できます。

サポート状況

HTMLInputElementのサポート状況です。

ブラウザ	サポート状況	ブラウザ	サポート状況
Chrome	Supported	Firefox	Supported
Edge	Supported	Internet Explorer	Supported
Safari	Supported	Opera	Supported
iOS Safari	Supported	Android	Supported

Chrome

バージョン	サポート状況	公開時期	シェア
57	Supported	2017年3月頃	0.1%
56	Supported	2017年1月頃	12.02%
55	Supported	2016年12月頃	12.36%
54	Supported	2016年10月頃	0.44%
53	Supported	2016年9月頃	0.25%
52	Supported	2016年7月頃	0.27%
51	Supported	2016年6月頃	0.4%
50	Supported	2016年4月頃	0.32%
49	Supported	2016年3月頃	0.47%
48	Supported	2016年1月頃	0.02%
47	Supported	2015年12月頃	0.06%
46	Supported	2015年10月頃	0.56%
45	Supported	2015年9月頃	0.01%
44	Supported	2015年7月頃	0.83%
43	Supported	2015年5月頃	0.05%
42	Supported	2015年4月頃	0.05%
41	Supported	2015年3月頃	0.01%
40	Supported	2015年1月頃	0.59%
39	Supported	2014年11月頃	0.02%
38	Supported	2014年10月頃	0.08%
37	Supported	2014年8月頃	0.01%
36	Supported	2014年7月頃	0.01%
35	Supported	2014年5月頃	0.01%
34	Supported	2014年4月頃	0.14%
33	Supported	2014年2月頃	0.01%
32	Supported	2014年1月頃	0%
31	Supported	2013年11月頃	0.01%
30	Supported	2013年10月頃	0.03%
29	Supported	2013年8月頃	0%
28	Supported	2013年6月頃	0.03%
27	Supported	2013年5月頃	0.01%
26	Supported	2013年3月頃	0%
25	Supported	2013年2月頃	0%
24	Supported	2013年1月頃	0%
23	Supported	2012年11月頃	0%
22	Supported	2012年9月頃	0%
21	Supported	2012年7月頃	0%
20	Supported	2012年6月頃	0%
19	Supported	2012年5月頃	0%
18	Supported	2012年3月頃	0.01%
17	Supported	2012年2月頃	0.01%
16	Supported	2011年12月頃	0%
15	Supported	2011年10月頃	0%
14	Supported	2011年9月頃	0%

Firefox

バージョン	サポート状況	公開時期	シェア
52	Supported	2017年3月頃	0.12%
51	Supported	2017年1月頃	1.7%
50	Supported	2016年11月頃	0.78%
49	Supported	2016年9月頃	0.02%
48	Supported	2016年8月頃	0.07%
47	Supported	2016年6月頃	0.03%
46	Supported	2016年4月頃	0.01%
45	Supported	2016年3月頃	0.1%
44	Supported	2016年1月頃	0.01%
43	Supported	2015年12月頃	0.02%
42	Supported	2015年11月頃	0.01%
41	Supported	2015年9月頃	0%
40	Supported	2015年8月頃	0.02%
39	Supported	2015年7月頃	0.01%
38	Supported	2015年5月頃	0.02%
37	Supported	2015年3月頃	0%
36	Supported	2015年2月頃	0.01%
35	Supported	2015年1月頃	0%
34	Supported	2014年12月頃	0.01%
33	Supported	2014年10月頃	0%
32	Supported	2014年9月頃	0%
31	Supported	2014年7月頃	0.01%
30	Supported	2014年6月頃	0%
29	Supported	2014年4月頃	0%
28	Supported	2014年3月頃	0.01%
27	Supported	2014年2月頃	0%
26	Supported	2013年12月頃	0%
25	Supported	2013年10月頃	0%
24	Supported	2013年9月頃	0%
23	Supported	2013年8月頃	0%
22	Supported	2013年6月頃	0%
21	Supported	2013年5月頃	0%
20	Supported	2013年4月頃	0%
19	Supported	2013年2月頃	0%
18	Supported	2013年1月頃	0%
17	Supported	2012年11月頃	0%
16	Supported	2012年10月頃	0%
15	Supported	2012年8月頃	0%
14	Supported	2012年7月頃	0%
13	Supported	2012年6月頃	0%
12	Supported	2012年4月頃	0%
11	Supported	2012年3月頃	0%
10	Supported	2012年1月頃	0%
9	Supported	2011年12月頃	0%
8	Supported	2011年11月頃	0%
7	Supported	2011年9月頃	0%
6	Supported	2011年8月頃	0%
5	Supported	2011年6月頃	0%
4	Supported	2011年3月頃	0%

Edge

バージョン	サポート状況	公開時期	シェア
14	Supported	2016年2月頃	1.05%
13	Supported	2015年9月頃	0.08%

Internet Explorer

バージョン	サポート状況	公開時期	シェア
11	Supported	2013年10月頃	4.99%
10	Supported	2012年8月頃	0.09%
9	Supported	2011年3月頃	0.18%
8	Supported	2009年3月頃	0.04%
7	Supported	2006年10月頃	0.01%
6	Supported	2001年8月頃	0%

Safari

バージョン	サポート状況	公開時期	シェア
10	Supported	2016年10月頃	0%
9.1	Supported	2015年9月頃	0%
8.0	Supported	2014年10月頃	0%
7.1	Supported	2013年10月頃	0%
6.0	Supported	2012年7月頃	0%
5.1	Supported	2011年7月頃	0%
4	Supported	2009年6月頃	0%

Opera

バージョン	サポート状況	公開時期	シェア
43	Supported	2017年2月頃	0.06%
42	Supported	2016年12月頃	0.09%
41	Supported	2016年10月頃	0.01%
40	Supported	2016年9月頃	0%
39	Supported	2016年8月頃	0%
38	Supported	2016年6月頃	0%
37	Supported	2016年5月頃	0.01%
36	Supported	2016年3月頃	0.01%
35	Supported	2016年2月頃	0%
34	Supported	2015年12月頃	0%
33	Supported	2015年10月頃	0%
32	Supported	2015年9月頃	0%
31	Supported	2015年8月頃	0%
30	Supported	2015年6月頃	0%
29	Supported	2015年4月頃	0%
28	Supported	2015年3月頃	0%
27	Supported	2015年1月頃	0%
26	Supported	2014年12月頃	0%
25	Supported	2014年10月頃	0%
24	Supported	2014年9月頃	0%
23	Supported	2014年7月頃	0%
22	Supported	2014年6月頃	0%
21	Supported	2014年5月頃	0.01%
20	Supported	2014年3月頃	0%
19	Supported	2014年1月頃	0%
18	Supported	2013年11月頃	0%
17	Supported	2013年10月頃	0%
16	Supported	2013年8月頃	0%
15	Supported	2013年7月頃	0%
12	Supported	2012年6月頃	0.02%
11.6	Supported	2011年12月頃	0%
11.1	Supported	2011年4月頃	0%

iOS Safari

バージョン	サポート状況	公開時期	シェア
10.0	Supported	2016年9月頃	39.65%
9.1	Supported	2015年9月頃	5.39%
8.3	Supported	2014年9月頃	1.03%
7.0	Supported	2013年9月頃	0.24%
6.0	Supported	2012年9月頃	0.05%
5.1	Supported	2011年10月頃	0.03%

Android

バージョン	サポート状況	公開時期	シェア
4.4	Supported	2013年10月頃	0%
4.3	Supported	2013年7月頃	0%
4.2	Supported	2013年3月頃	0.03%
4.1	Supported	2012年12月頃	0%
4.0	Supported	2012年6月頃	1.61%
2.3	Supported	2011年10月頃	0%