HTML - input 要素

概要

名前
input
カテゴリー
  • Flow content
  • Phrasing content
  • Interactive content: hidden 属性を持たない場合のみ。
  • Palpable content: hidden 属性を持たない場合のみ。
  • Form-associated element
  • Labelable element: hidden 属性を持たない場合のみ。
  • Listed element
  • Submittable element
  • Resettable element
配置できる場所
Phrasing content が期待される場所。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
input 要素は、入力や選択が可能な様々な種類のフォーム部品になる要素です。type 属性に指定するキーワードによって、どのフォーム部品になるのか決定します。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLInputElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1111
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性・入力型

属性・入力型サポートブラウザ
属性名・入力型 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
autocomplete
autofocus
disabled
form
list
name
readonly
required
tabindex
type
type="button"111
type="checkbox"
type="color"×14292012.11212.24.4
type="date"×125720×115
type="datetime-local"×12×20×11
type="email"105113.1
type="file"11111
type="hidden"1112
type="image"
type="month"×12×20×11
type="number"1012
type="password"21112
type="radio"
type="range"10122343.1115.14.4
type="reset"111
type="search"101245510.6
type="submit"111
type="tel"1011
type="text"111
type="time"×125720×10×
type="url"10111
type="week"×12×20×11
value
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
autocomplete
文字列で、入力欄がどの種類の自動補完機能を提供するのかを記述します。自動補完のよくある実装は、単に以前同じ入力欄に入力された値を再呼び出ししますがもっと複雑な自動補完もあり得ます。例えば、ブラウザが端末の連絡先リストと連携して email 入力欄でメールアドレスを自動補完したりすることです。ただし、この属性は、数値またはテキストデータを返さない checkboximage のような入力型では効果がありません。
autofocus
論理属性で、もしあれば、ページの読み込みが完了したとき、またはその要素を含む dialog が表示されたときに、自動的にその入力欄がフォーカスを持つことを示します。autofocus 属性がついた要素は、DOMContentLoaded イベントが発行される前にフォーカスを得ることがあります。文書中でひとつの要素だけが autofocus 属性を持つことができ、また autofocushidden 型の入力欄には、フォーカスを受け取ることができないため、使用することができません。
disabled
論理属性で、もしあれば、ユーザが入力欄と対話できないことを示します。無効の入力欄は、より薄い色で表示したり、その他の形で示したりしてフィールドが使用できないことを示します。特に、無効になった入力欄は click イベントを受け取らず、フォームと共に送信されることもありません。
form
文字列で、入力欄が関連づけられた form 要素を指定します。この文字列値は、同一文書内の form 要素id と一致しなければなりません。この属性が指定されない場合は、input 要素は直近の内包するフォームに関連付けられます。form 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。入力欄はひとつのフォームとしか関連付けることができません。
list
この入力欄でユーザに提案する定義済み値のリストを提供する、同一文書内にある datalist 要素id を指定します。リスト中で type と互換性がない値は、提案の選択肢に含まれません。list 属性は hidden, password, checkbox, radio, file またはボタン型では対応していません。
name
入力コントロールの名前を指定する文字列です。この名前は form 要素elements オブジェクトで保持され、フォームデータが送信される時にコントロールの値と共に送信されます。name が指定されなかったり name が空欄だったりした場合は、その入力欄の値はフォームと共に送信されません。
readonly
論理属性で、ユーザが入力欄の値を編集できないことを示します。disabledreadonly の違いは、readonly はコントロールが機能するのに対し、disabled はコントロールが一般に有効化されるまで機能しないという点です。テキスト入力のコントロールのみが読み取り専用にすることができるのに対し、その他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効化の識別がしにくいので、readonly 属性は適用されません。
list
required は論理属性であり、所有するフォームが送信される前に、ユーザが入力欄の値を指定しなければならないことを示します。required 属性は color, hidden, range, submit, image, reset, button を除いたすべての入力型で対応しています。入力欄に required 属性がある場合、:required 疑似クラスも適用されます。逆に required 属性がない入力欄 (対応していない要素を除く) には :optional 疑似クラスが適用されます。
tabindex
省略可能な数値で、入力欄が Tab キーを使用してフォーカスを受け取るかどうか、また要素が連続的なフォーカス操作に加わるかどうかを定義します。この値は Tab キーを使用して要素に達する順序も指定します。tabindex の値は符号によって特別な意味を持ちます。
  • 負の tabindex の値は、ユーザが要素にフォーカスを与えられるようにするものの、連続的なキーボード操作を使用するべきではないことを示します。常に -1 の値を使用することが推奨され、その他の値を使用すると問題が発生する場合があります。
  • tabindex0 であると、要素はフォーカス可能で連続的なキーボード操作で到達できるべきであり、タブ順序はユーザエージェントに任せ、ユーザのプラットフォームの習慣を適用するべきであることを意味します。これは通常、フォーカス可能でキーボード操作に加わる場合、タブ順序を自分自身で管理しようとするより最適な値です。
  • 正の tabindex の値は、要素のタブ順序を示します。ユーザが Tab キーを押下するたびに、次に高い tabindex の値を持つ要素にフォーカスが与えられます。多くのプラットフォームでは逆タブ機能を提供しており、一般的に Shift + Tab の組み合わせでタブ順を逆にたどります。
tabindex が省略されたり、妥当な整数でなかったりした場合は、ユーザエージェントはどのようにするか、プラットフォームの習慣に従います。
type
文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには checkbox の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に text が使用され、テキストの入力欄が生成されます。input の動作は type 属性の値に応じて大きく異なります。この属性を指定しない場合の既定の型は text です。以下の値を指定できます。
button
既定の動作を持たないプッシュボタン。
checkbox
選択または未選択のうちひとつの値をとることができるチェックボックス。
color
色を指定するためのコントロール。色を選択するユーザインターフェイスは、単純な色を文字列で受け付ける以上の機能は要求されていません。
datetime
UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロール。ただし、この機能は WHATWG HTML からは削除されたため、非推奨の入力型です。
date
日付 (時刻を除く年、月、日) を入力するためのコントロール。
datetime-local
タイムゾーン情報がない日付と時刻を入力するためのコントロール。
email
電子メールアドレスを入力するための欄。
file
ユーザにファイルを選択させるコントロール。コントロールで選択できるファイルの種類を定義するには accept 属性をして下さい。
hidden
非表示のコントロールですが、その値はサーバに送信されます。
image
画像による送信ボタン。画像のソースを定義するために src 属性と、代替文字列を定義するために alt 属性を使用しなければなりません。height および width 属性を使用して、画像の寸法をピクセル値で定義できます。
month
タイムゾーン情報がない年と月を入力するためのコントロール。
number
数値を入力するためのコントロール。
password
入力値を隠す 1 行テキストフィールド。入力可能な最大文字数を指定するには maxlength および minlength 属性を使用してください。また、パスワードなどの機密情報を扱うフォームは HTTPS で提供するべきです。一般的なブラウザでは、安全でないフォームに対して警告を表示する仕組みを実装しています。
radio
複数の選択肢からひとつの値を選択できるラジオボタン。
range
正確な値であることが重要ではない数値を入力するためのコントロール。
reset
フォームのコントロールを既定値にリセットするボタン。
search
検索文字列を入力するための1行入力フィールド。改行は自動的に入力値から取り除かれます。
submit
フォームを送信するボタン。
tel
電話番号を入力するためのコントロール。
text
1 行入力フィールド。改行は自動的に入力値から取り除かれます。
time
タイムゾーン情報がない時刻を入力するためのコントロール。
url
URL を入力するための欄。
week
年と週番号で構成される日付を入力するためのコントロール。週番号はタイムゾーンを伴いません。
value
入力コントロールの値です。HTML の中で指定されると初期値となり、その後で JavaScript を使用してそれぞれの HTMLInputElement オブジェクトの value プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。value 属性は常に省略可です。チェックボックスとラジオボタンは他の入力コントロールと異なり、値が現在チェックされていた場合 (checked) のみ送信されるデータに含められます。この場合、value 属性は入力値として報告されます。例えば、namestatus のチェックボックスで valueactive になっており、チェックボックスがチェックされていると、送信されるフォームデータには status=active が含まれます。チェックボックスがアクティブでなければ、フォームデータ内には全く現れません。チェックボックスやラジオボタンの既定の valueon です。

メソッド

以下のメソッドは DOM 内で input を表現する HTMLInputElement インターフェイスで提供されます。親インターフェイスである HTMLElement, Element, Node, EventTarget で指定されているメソッドも使用できます。

checkValidity()
要素の妥当性チェックを直ちに実行し、値が妥当でない場合は文書に対して invalid イベントを要素に発生させます。
reportValidity()
要素の値が妥当性チェックを通った場合は true を返します。そうでなければ false を返します
select()
要素が選択可能な場合、input 要素の内容を選択します。選択可能なテキストコンテンツがない要素 (カラーピッカーまたはカレンダー日付入力など) では、このメソッドは何もしません。
setCustomValidity()
入力要素の値が妥当ではないときに表示するカスタムメッセージを設定します。
setRangeText()
入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。selectMode 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。
setSelectionRange()
テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。
stepDown()
数値入力欄の値を既定で 1、または指定された数値の単位だけ減少させます。
stepUp()
数値入力欄の値を既定で 1、または指定された数値の単位だけ増加させます。

サンプルコード

input 要素のサンプルコードは以下のとおりです。

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32">
input 要素のサンプルコード

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
163
Shares:
1
Tag:
HTML