<input>タグは、フォーム入力欄を表す際に使用します。
input要素は、type属性の値によって様々なフォームコントロールに変化します。
input要素には、type属性以外にも様々な属性が用意されています。
以下の表は、input要素がどの状態のときに、
コンテンツ属性、IDL属性とメソッド、イベントのどれを適用できるかをまとめたものです。
input要素の状態→
↓使用可能な属性など
|
Hidden |
Text,
|
URL,
|
Date,
Week,
|
|||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
コンテンツ属性 | |||||||||||||||
accept |
· | · | · | · | · | · | · | · | · | · | · | 〇 | · | · | · |
alt |
· | · | · | · | · | · | · | · | · | · | · | · | · | 〇 | · |
autocomplete |
〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · |
checked |
· | · | · | · | · | · | · | · | · | · | 〇 | · | · | · | · |
dirname |
· | 〇 | · | · | · | · | · | · | · | · | · | · | · | · | · |
formaction |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | · |
formenctype |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | · |
formmethod |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | · |
formnovalidate |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | · |
formtarget |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | · |
height |
· | · | · | · | · | · | · | · | · | · | · | · | · | 〇 | · |
list |
· | 〇 | 〇 | 〇 | · | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · |
max |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
maxlength |
· | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · | · | · | · | · |
min |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
minlength |
· | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · | · | · | · | · |
multiple |
· | · | · | 〇 | · | · | · | · | · | · | · | 〇 | · | · | · |
pattern |
· | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · | · | · | · | · |
placeholder |
· | 〇 | 〇 | 〇 | 〇 | · | · | 〇 | · | · | · | · | · | · | · |
popovertarget |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | 〇 |
popovertargetaction |
· | · | · | · | · | · | · | · | · | · | · | · | 〇 | 〇 | 〇 |
readonly |
· | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · | · |
required |
· | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | 〇 | 〇 | · | · | · |
size |
· | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · | · | · | · | · |
src |
· | · | · | · | · | · | · | · | · | · | · | · | · | 〇 | · |
step |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
width |
· | · | · | · | · | · | · | · | · | · | · | · | · | 〇 | · |
IDL属性とメソッド | |||||||||||||||
checked |
· | · | · | · | · | · | · | · | · | · | 〇 | · | · | · | · |
files |
· | · | · | · | · | · | · | · | · | · | · | 〇 | · | · | · |
value |
default | value | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
valueAsDate |
· | · | · | · | · | 〇 | · | · | · | · | · | · | · | · | · |
valueAsNumber |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
list |
· | 〇 | 〇 | 〇 | · | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · |
select() |
· | 〇 | 〇 | 〇※ | 〇 | 〇※ | 〇※ | 〇※ | · | 〇※ | · | 〇※ | · | · | · |
selectionStart |
· | 〇 | 〇 | · | 〇 | · | · | · | · | · | · | · | · | · | · |
selectionEnd |
· | 〇 | 〇 | · | 〇 | · | · | · | · | · | · | · | · | · | · |
selectionDirection |
· | 〇 | 〇 | · | 〇 | · | · | · | · | · | · | · | · | · | · |
setRangeText() |
· | 〇 | 〇 | · | 〇 | · | · | · | · | · | · | · | · | · | · |
setSelectionRange() |
· | 〇 | 〇 | · | 〇 | · | · | · | · | · | · | · | · | · | · |
stepDown() |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
stepUp() |
· | · | · | · | · | 〇 | 〇 | 〇 | 〇 | · | · | · | · | · | · |
イベント | |||||||||||||||
input event |
· | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · |
change event |
· | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | · | · | · |
↑使用可能なイベントなど
input要素の状態→
|
Hidden |
Text,
|
URL,
|
Date,
Week,
|
HTMLの仕様では、input要素には終了タグ</input>はありません。