From d749c2bee1911527b32261507655a14e0bf9e559 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 15 Feb 2022 01:28:48 +0900 Subject: 2022/02/02 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/input/index.md | 2548 ++++++++++++++++-------------- 1 file changed, 1341 insertions(+), 1207 deletions(-) diff --git a/files/ja/web/html/element/input/index.md b/files/ja/web/html/element/input/index.md index a045573951..d068c465a9 100644 --- a/files/ja/web/html/element/input/index.md +++ b/files/ja/web/html/element/input/index.md @@ -2,1364 +2,1498 @@ title: ': 入力欄 (フォーム入力) 要素' slug: Web/HTML/Element/input tags: - - Data entry - - Element - - Forms + - データ入力 + - 要素 + - フォーム - HTML - - HTML forms - - HTML input tag - HTML フォーム - - HTML:フローコンテンツ - - HTML:対話型コンテンツ - - HTML:記述コンテンツ + - HTML input tag - Input - MakeBrowserAgnostic - - Reference - - Web + - リファレンス - ウェブ - - データ入力 - - フォーム - - 要素 +browser-compat: html.elements.input translation_of: Web/HTML/Element/input --- -
{{HTMLRef}}
-

HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末と{{Glossary("user agent", "ユーザーエージェント")}}によりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。 <input> 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。

+{{HTMLRef}} + +**``** は [HTML](/ja/docs/Web/HTML) の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末と{{Glossary("user agent", "ユーザーエージェント")}}によりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。 `` 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。 + +{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}} + +## \ の型 + +`` の動作は {{htmlattrxref("type", "input")}} 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は `text` です。 + +利用可能な型は次の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
型説明基本的な例
{{HTMLElement("input/button", "button")}} + プッシュボタンで、既定の動作を持たず、 {{anch('attr-value', 'value')}} 属性の値 (既定では空) を表示します。 + + + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}} +
{{HTMLElement("input/checkbox", "checkbox")}}チェックボックスで、選択または未選択のうちひとつの値をとることができます。 + + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}} +
{{HTMLElement("input/color", "color")}} + 色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。 + + + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}} +
{{HTMLElement("input/date", "date")}} + 日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。 + + + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}} +
+ {{HTMLElement("input/datetime-local", "datetime-local")}} + + タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。 + + + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}} +
{{HTMLElement("input/email", "email")}} + 電子メールアドレスを編集するための欄です。 text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 + + + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}} +
{{HTMLElement("input/file", "file")}} + ユーザーがファイルを選択するコントロールです。 {{anch('attr-accept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。 + + + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}} +
{{HTMLElement("input/hidden", "hidden")}} + 表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。 + + + {{EmbedLiveSample("examplehidden",200,55,"","", "nobutton")}} +
{{HTMLElement("input/image", "image")}} + グラフィックの submit ボタンです。 src 属性で定義された画像を表示します。 {{anch('attr-alt', 'alt')}} 属性は {{anch('attr-src', 'src')}} の画像が見つからないときに表示されます。 + + + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}} +
{{HTMLElement("input/month", "month")}}タイムゾーン情報がない年と月を入力するためのコントロールです。 + + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}} +
{{HTMLElement("input/number", "number")}} + 数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。 + + + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}} +
{{HTMLElement("input/password", "password")}} + 入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。 + + + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}} +
{{HTMLElement("input/radio", "radio")}} + ラジオボタンで、同じ {{anch('attr-name', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。 + + + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}} +
{{HTMLElement("input/range", "range")}} + 厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 {{anch('attr-min', 'min')}} と {{anch('attr-max', 'max')}} の組み合わせで、受け入れる値の範囲を定義することができます。 + + + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}} +
{{HTMLElement("input/reset", "reset")}} + フォームのコントロールを既定値に初期化するボタンです。推奨しません。 + + + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}} +
{{HTMLElement("input/search", "search")}} + 検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、 Enter キーの代わりに検索アイコンを表示します。 + + + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}} +
{{HTMLElement("input/submit", "submit")}}フォームを送信するボタンです。 + + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}} +
{{HTMLElement("input/tel", "tel")}} + 電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。 + + + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}} +
{{HTMLElement("input/text", "text")}} + 既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。 + + + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}} +
{{HTMLElement("input/time", "time")}}タイムゾーン情報がない時刻を入力するためのコントロールです。 + + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}} +
{{HTMLElement("input/url", "url")}} + URL を入力するための入力欄です。 text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 + + + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}} +
{{HTMLElement("input/week", "week")}} + 年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。 + + + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}} +
廃止された値
{{HTMLElement("input/datetime", "datetime")}} + {{deprecated_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。 + + + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}} +
-
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+## 属性 + +`` 要素は属性があるためたいへん強力です。上記の例で説明している {{htmlattrxref("type", "input")}} 属性が最も重要です。すべての `` 要素が、 {{domxref("HTMLInputElement")}} インターフェイスに基づいているため、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性は一部の特定の入力型にのみ影響を与えます。さらに、ある属性が入力に与える影響は入力の種類によって異なり、様々な入力型に様々な方法で影響を与えます。 + +この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。この要素は[グローバル属性](/ja/docs/Web/HTML/Global_attributes)を含みます。 `` に関連して特に重要な属性は強調表示されています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ <input> 要素の属性で、 HTML のグローバル属性を含むもの +
属性型説明
{{htmlattrxref("accept", "input", "", 1)}}fileファイルアップロードコントロールで期待されるファイル形式のヒント
{{htmlattrxref("alt", "input", "", 1)}}imageimage 型の alt 属性です。アクセシビリティのために必要です。
{{htmlattrxref("autocomplete", "input", "", 1)}}すべてフォームの自動補完機能のためのヒント
{{htmlattrxref("autofocus", "input", "", 1)}}すべてページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定する
{{htmlattrxref("capture", "input", "", 1)}}fileファイルアップロードコントロールのメディアキャプチャのインプットメソッド
{{htmlattrxref("checked", "input", "", 1)}}radio, checkboxコマンドやコントロールがチェックされているか
{{htmlattrxref("dirname", "input", "", 1)}}text, search + フォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前 +
{{htmlattrxref("disabled", "input", "", 1)}}すべてコントロールが無効であるかどうか
{{htmlattrxref("form", "input", "", 1)}}すべてコントロールを form 要素に関連付ける
{{htmlattrxref("formaction", "input", "", 1)}}image, submitフォームの送信に使用する URL
{{htmlattrxref("formenctype", "input", "", 1)}}image, submitフォームの送信に使用するデータセットのエンコード種別
{{htmlattrxref("formmethod", "input", "", 1)}}image, submitフォームの送信に使用する HTTP メソッド
+ {{htmlattrxref("formnovalidate", "input", "", 1)}} + image, submitフォームの送信でフォームの検証をバイパス
{{htmlattrxref("formtarget", "input", "", 1)}}image, submitフォーム送信に使用する閲覧コンテキスト
{{htmlattrxref("height", "input", "", 1)}}image + {{htmlelement('img')}} の height 属性と同じで、垂直方向の大きさ +
{{htmlattrxref("list", "input", "", 1)}}ほぼすべて自動補完オプションの入った {{htmlelement('datalist')}} の id 属性の値
{{htmlattrxref("max", "input", "", 1)}}数値型最大値
{{htmlattrxref("maxlength", "input", "", 1)}}password, search, tel, text, url`value` の最大長 (文字数)
{{htmlattrxref("min", "input", "", 1)}}数値型最小値
{{htmlattrxref("minlength", "input", "", 1)}}password, search, tel, text, url`value` の最小長 (文字数)
{{htmlattrxref("multiple", "input", "", 1)}}email, file論理属性。複数の値を許可するかどうか
{{htmlattrxref("name", "input", "", 1)}}すべて + 入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される +
{{htmlattrxref("pattern", "input", "", 1)}}password, text, telvalue が一致すると有効となるパターン
{{htmlattrxref("placeholder", "input", "", 1)}}password, search, tel, text, urlフォームコントロールが空の時にフォームコントロール内に表示される内容
{{htmlattrxref("readonly", "input", "", 1)}}ほぼすべて論理属性。値が編集できない
{{htmlattrxref("required", "input", "", 1)}}ほぼすべて + 論理属性。フォームが送信できるようにするためには値が必要 +
{{htmlattrxref("size", "input", "", 1)}}email, password, tel, text, urlコントロールの大きさ
{{htmlattrxref("src", "input", "", 1)}}image + {{htmlelement('img')}} の src 属性と同じで、画像リソースのアドレス +
{{htmlattrxref("step", "input", "", 1)}}numeric types有効と見なされる増分。
{{htmlattrxref("type", "input", "", 1)}}allフォームコントロールの型
{{htmlattrxref("value", "input", "", 1)}}all最初、 HTML で明確に指定された場合は初期値。もっと一般的には、このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される。
{{htmlattrxref("width", "input", "", 1)}}image + {{htmlelement('img')}} の `width` 属性と同じ +
- +標準属性の説明に続いて、いくつかの追加の非標準属性を列挙します。 -

<input> の型

+### 個々の属性 -

<input> の動作は {{htmlattrxref("type", "input")}} 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は text です。

+- {{htmlattrdef("accept")}} + - : `file` 入力型に対してのみ有効です。 `accept` 属性は `file` アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。 +- {{htmlattrdef("alt")}} + - : `image` ボタンに対してのみ有効です。 `alt` 属性は画像の代替テキストを提供します。 {{htmlattrxref("src", "input", "", 1)}} の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。 +- {{htmlattrdef("autocomplete")}} -

利用可能な型は次の通りです。

+ - : (論理属性では**ありません**!) [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 `email` 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は [autocomplete 属性の値](/ja/docs/Web/HTML/Attributes/autocomplete#values)を参照してください。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
型説明基本的な例
{{HTMLElement("input/button", "button")}}プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。 - - {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}
{{HTMLElement("input/checkbox", "checkbox")}}チェックボックスで、選択または未選択のうちひとつの値をとることができます。 - - {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}
{{HTMLElement("input/color", "color")}}色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。 - - {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}
{{HTMLElement("input/date", "date")}}日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。 - - {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}
{{HTMLElement("input/datetime-local", "datetime-local")}}タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。 - - {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}
{{HTMLElement("input/email", "email")}}電子メールアドレスを編集するための欄です。 text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 - - {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}
{{HTMLElement("input/file", "file")}}ユーザーがファイルを選択するコントロールです。 {{anch('htmlattrdefaccept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。 - - {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}
{{HTMLElement("input/hidden", "hidden")}}表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。
{{HTMLElement("input/image", "image")}}グラフィックの submit ボタンです。 src 属性で定義された画像を表示します。 {{anch('htmlattrdefalt', 'alt')}} 属性は {{anch('htmlattrdefsrc', 'src')}} の画像が見つからないときに表示されます。 - - {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}
{{HTMLElement("input/month", "month")}}タイムゾーン情報がない年と月を入力するためのコントロールです。 - - {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}
{{HTMLElement("input/number", "number")}}数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。 - - {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}
{{HTMLElement("input/password", "password")}}入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。 - - {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}
{{HTMLElement("input/radio", "radio")}}ラジオボタンで、同じ {{anch('htmlattrdefname', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。 - - {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}
{{HTMLElement("input/range", "range")}}厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 {{anch('htmlattrdefmin', 'min')}} と {{anch('htmlattrdefmax', 'max')}} の組み合わせで、受け入れる値の範囲を定義することができます。 - - {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}
{{HTMLElement("input/reset", "reset")}}フォームのコントロールを既定値に初期化するボタンです。推奨しません。 - - {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}
{{HTMLElement("input/search", "search")}}検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、 Enter キーの代わりに検索アイコンを表示します。 - - {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}
{{HTMLElement("input/submit", "submit")}}フォームを送信するボタンです。 - - {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}
{{HTMLElement("input/tel", "tel")}}電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。 - - {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}
{{HTMLElement("input/text", "text")}}既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。 - - {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}
{{HTMLElement("input/time", "time")}}タイムゾーン情報がない時刻を入力するためのコントロールです。 - - {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}
{{HTMLElement("input/url", "url")}}URL を入力するための入力欄です。 text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 - - {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}
{{HTMLElement("input/week", "week")}}年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。 - - {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}
廃止された値
{{HTMLElement("input/datetime", "datetime")}}{{deprecated_inline}} {{obsolete_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。 - - {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}
+ `autocomplete` 属性は `hidden`, `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, `color`, `password` で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、 `checkbox`, `radio`, `file` とすべてのボタン型を除いたすべての入力型で有効になります。 -

属性

+ 詳しい情報については [HTML の autocomplete 属性](/ja/docs/Web/HTML/Attributes/autocomplete)を参照してください。パスワードセキュリティに関する情報や、 `autocomplete` が `hidden` に対して他の入力型とどう異なるのかについての情報があります。 -

<input> 要素は属性があるためたいへん強力です。上記の例で説明している {{htmlattrxref("type", "input")}} 属性が最も重要です。すべての <input> 要素が、 {{domxref("HTMLInputElement")}} インターフェイスに基づいているため、、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性は一部の特定の入力型にのみ影響を与えます。さらに、属性によっては入力欄に影響を及ぼす方法が入力型によって異なり、入力型によって異なる方法で影響を与えることがあります。

+- {{htmlattrdef("autofocus")}} -

この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。この要素はグローバル属性を含みます。 <input> に関連して特に重要な属性は強調表示されています。

+ - : 論理属性で、指定された場合は、ページの読み込みが完了したとき (またはその要素を含む {{HTMLElement("dialog")}} が表示されたとき) に、自動的にその入力欄がフォーカスを持つことを示します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{htmlelement('input')}} 要素の属性で、 HTML のグローバル属性を含むもの
属性型説明
{{anch('htmlattrdefaccept', 'accept')}}fileファイルアップロードコントロールで期待されるファイル形式のヒント
{{anch('htmlattrdefalt', 'alt')}}imageimage 型の alt 属性です。アクセシビリティのために必要です。
{{anch('htmlattrdefautocomplete', 'autocomplete')}}すべてフォームの自動補完機能のためのヒント
{{anch('htmlattrdefautofocus', 'autofocus')}}すべてページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定する
{{anch('htmlattrdefcapture', 'capture')}}fileファイルアップロードコントロールのメディアキャプチャのインプットメソッド
{{anch('htmlattrdefchecked', 'checked')}}radio, checkboxコマンドやコントロールがチェックされているか
{{anch('htmlattrdefdirname', 'dirname')}}text, searchフォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前
{{anch('htmlattrdefdisabled', 'disabled')}}すべてコントロールが無効であるかどうか
{{anch('htmlattrdefform', 'form')}}すべてコントロールを form 要素に関連付ける
{{anch('htmlattrdefformaction', 'formaction')}}image, submitフォームの送信に使用する URL
{{anch('htmlattrdefformenctype', 'formenctype')}}image, submitフォームの送信に使用するデータセットのエンコード種別
{{anch('htmlattrdefformmethod', 'formmethod')}}image, submitフォームの送信に使用する HTTP メソッド
{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}image, submitフォームの送信でフォームの検証をバイパス
{{anch('htmlattrdefformtarget', 'formtarget')}}image, submitフォーム送信に使用する閲覧コンテキスト
{{anch('htmlattrdefheight', 'height')}}image{{htmlelement('img')}} の height 属性と同じで、垂直の高さ
{{anch('htmlattrdeflist', 'list')}}ほぼすべて自動補完オプションの入った {{htmlelement('datalist')}} の id 属性の値
{{anch('htmlattrdefmax', 'max')}}数値型最大値
{{anch('htmlattrdefmaxlength', 'maxlength')}}password, search, tel, text, urlvalue の最大長 (文字数)
{{anch('htmlattrdefmin', 'min')}}数値型最小値
{{anch('htmlattrdefminlength', 'minlength')}}password, search, tel, text, urlvalue の最小長 (文字数)
{{anch('htmlattrdefmultiple', 'multiple')}}email, file論理属性。複数の値を許可するかどうか
{{anch('htmlattrdefname', 'name')}}すべて入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される
{{anch('htmlattrdefpattern', 'pattern')}}password, text, telvalue が一致すると妥当となるパターン
{{anch('htmlattrdefplaceholder', 'placeholder')}}password, search, tel, text, urlフォームコントロールが空の時にフォームコントロール内に表示される内容
readonlyほぼすべて論理属性。値が編集できない
requiredほぼすべて論理属性。フォームが送信できるようにするためには値が必要
{{anch('htmlattrdefsize', 'size')}}email, password, tel, textコントロールの大きさ
{{anch('htmlattrdefsrc', 'src')}}image{{htmlelement('img')}} の src 属性と同じで、画像リソースのアドレス
{{anch('htmlattrdefstep', 'step')}}numeric types妥当と見なされる増分。
{{anch('htmlattrdeftype', 'type')}}allフォームコントロールの型
{{anch('htmlattrdefvalue', 'value')}}all最初、 HTML で明確に指定された場合は初期値。もっと一般的には、このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される。
{{anch('htmlattrdefwidth', 'width')}}image{{htmlelement('img')}} の width 属性と同じ
+ > **Note:** `autofocus` 属性がついた要素は、 {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}} イベントが発生する前にフォーカスを得ることがあります。 -

標準属性の説明に続いて、いくつかの追加の非標準属性を列挙します。

- -

個々の属性

- -
-
{{htmlattrdef("accept")}}
-
-

file 入力型に対してのみ有効です。 accept 属性は file アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。

-
-
{{htmlattrdef("alt")}}
-
-

image ボタンに対してのみ有効です。 alt 属性は画像の代替テキストを提供し、 src の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。

-
-
{{htmlattrdef("autocomplete")}}
-
-

(論理属性ではありません!) autocomplete 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 email 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値はautocomplete 属性の値を参照してください。

- -

autocomplete 属性は hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, password で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、 checkbox, radio, file とすべてのボタン型を除いたすべての入力型で有効になります。

- -

詳しい情報については HTML の autocomplete 属性を参照してください。パスワードセキュリティに関する情報や、 autocomplete が hidden に対して他の入力型とどう異なるのかについての情報があります。

-
-
{{htmlattrdef("autofocus")}}
-
-

論理属性で、指定された場合は、ページの読み込みが完了したとき (またはその要素を含む {{HTMLElement("dialog")}} が表示されたとき) に、自動的にその入力欄がフォーカスを持つことを示します。

- -
-

注: autofocus 属性がついた要素は、 {{domxref("DOMContentLoaded")}} イベントが発生する前にフォーカスを得ることがあります。

-
- -

文書中で一つの要素だけが autofocus 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。

- -

autofocus は hidden 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。

- -
-

警告: フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。 autofocus が割り当てられると、読み上げソフトは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。

-
- -

autofocus 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。読み上げソフトはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。

-
-
{{htmlattrdef("capture")}}
-
-

HTML Media Capture 仕様書で導入され、 file 入力型に対してのみ有効です。 capture 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで file アップロードコントロールを使用してアップロードするかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。

-
-
{{htmlattrdef("checked")}}
-
-

radio 型と checkbox 型の両方で有効で、 checked は論理属性です。 radio 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。 checkbox 型に存在した場合、 (ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。 (HTMLInputElement の checked IDL 属性のみが更新されます。)

- -
-

注: 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 checked の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。

- -

例えば、 name が fruit で、 value が cherry であるチェックボックスがチェックされていると、送信されるフォームデータには fruit=cherry が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の value は on です。

-
-
-
{{htmlattrdef("dirname")}}
-
-

text および search 入力型のみに有効で、 dirname 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは 2 組の名前と値を送信します。 1 組目は name と value であり、 2 組目は名前が dirname の値で、値に ltr または rtl がブラウザーによって設定されます。

- - 
<form action="page.html" method="post">
-  <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label>
-  <input type="submit"/>
-</form>
-<!-- page.html?fruit=cherry&fruit.dir=ltr -->
-
- -

上記のフォームが送信されると、入力欄は name / value の組である fruit=cherry と、 dirname / 書字方向の組である fruit.dir=ltr が送信されます。

-
-
{{htmlattrdef("disabled")}}
-
-

論理属性で、存在する場合、ユーザーが入力欄と対話できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示すことを示す形で表示されます。

- -

特に、無効になった入力欄は {{domxref("Element/click_event", "click")}} イベントを受け取らず、フォームと共に送信されることもありません。

- -
-

メモ: 仕様書で要件とはされていませんが、 Firefox は既定で、ページを再読み込みしても <input> を 動的に無効化した状態を維持します。この機能は {{htmlattrxref("autocomplete","input")}} 属性で制御することができます。

-
-
-
{{htmlattrdef("form")}}
-
-

文字列で、入力欄が関連づけられた {{HTMLElement("form")}} 要素 (つまり、フォームオーナー) を指定します。存在する場合、この文字列値は同一文書内の <form> 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 <input> 要素は直近の内包するフォームに (もしあれば) 関連付けられます。

- -

form 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。

- -
-

メモ: 入力欄は一つのフォームとしか関連付けることができません。

-
-
-
{{htmlattrdef('formaction')}}
-
-

image および submit 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。

-
-
{{htmlattrdef('formenctype')}}
-
-

image および submit 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。

-
-
{{htmlattrdef('formmethod')}}
-
-

image および submit 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。

-
-
{{htmlattrdef('formnovalidate')}}
-
-

image および submit 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。

-
-
{{htmlattrdef('formtarget')}}
-
-

image および submit 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。

-
-
{{htmlattrdef("height")}}
-
-

image 入力型でのみ有効です。 height はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。

-
-
{{htmlattrdef("id")}}
-
-

すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の for 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。

-
-
{{htmlattrdef("inputmode")}}
-
-

すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては none, text, tel, url, email, numeric, decimal, search があります。

-
-
{{htmlattrdef("list")}}
-
-

list 属性で与えられる値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} としてください。 <datalist> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。

- - - -

{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}

- -

これは text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color で有効です。

- -

仕様書によれば、 list 属性は hidden, password, checkbox, radio, file それにボタン型では対応していません。

- -

ブラウザーによっては、独自のカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、 {{HTMLElement("select")}} のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型についてはブラウザーの互換性一覧表を参照してください。

- -

{{htmlelement('datalist')}} 要素を参照してください。

-
-
{{htmlattrdef("max")}}
-
-

date, month, week, time, datetime-local, number, range で有効であり、許可される値の範囲の最大値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は制約検証に不合格になります。 max 属性の値が数値でない場合は、要素に最大値は設定されません。

- -

特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 max の値は min の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。

-
-
{{htmlattrdef("maxlength")}}
-
-

text, search, url, tel, email, password で有効であり、ユーザーがフィールドに入力することができる文字数 (UTF-16 コード単位) を定義します。これは 0 以上の整数値でなければなりません。 maxlength が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は minlength の値以上である必要もあります。

- -

欄に入力されたテキストの文字数が UTF-16 コード単位で maxlength よりも多いと、この入力欄は制約検証に不合格になります。既定では、ブラウザーはユーザーが maxlength 属性で許可された文字数以上を入力するのを防ぎます。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。

-
-
{{htmlattrdef("min")}}
-
-

date, month, week, time, datetime-local, number, range で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを下回った場合、要素は制約検証に不合格になります。 min 属性の値が数値でない場合は、要素に最小値は設定されません。

- -

この値は max 属性の値以下である必要があります。 min 属性が存在するものの、指定されていなかったり無効であったりした場合は、 min の値は適用されません。 min 属性が有効であり、値が空ではなく min 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。

- -

特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 max の値は min の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。

-
-
{{htmlattrdef("minlength")}}
-
-

text, search, url, tel, email, password で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、 maxlength で指定された値以下の整数値でなければなりません。 minlength が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。

- -

欄に入力されたテキストの文字数が UTF-16 コード単位で minlength よりも少ないと、この入力欄は制約検証に不合格になります。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。

-
-
{{htmlattrdef("multiple")}}
-
-

論理属性の multiple は、設定されている場合、 email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また file 入力欄では複数のファイルを選択することができることを意味します。 {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/file", "file")}} 入力型を参照してください。

-
-
{{htmlattrdef("name")}}
-
-

入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。

- -
name に入れるもの
- -

name は (厳密にはそうではありませんが) 必須の属性と考えてください。入力欄に name が指定されていなかった場合や name が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。 (無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。)

- -

特殊な場合が 2 つあります。

- -
    -
  1. _charset_ : <input> 要素の {{HTMLElement("input/hidden", "hidden")}} 型として使用された場合、入力欄の value には自動的に、フォームを送信するのに使用される文字エンコーディングが{{Glossary("user agent", "ユーザーエージェント")}}によって設定されます。
    2. -
  2. isindex: 歴史的な理由で、 isindex という名前は許可されていません。
    3. -
- -
name とラジオボタン
- -

name 属性はラジオボタンでは独特の動きをします。

- -

同名のラジオボタングループ内で、一度にチェックできるラジオボタンは 1 つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。

- -

同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの 1 つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの 1 つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、 1 つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。

- -

グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。

- -
HTMLFormElement.elements
- -

入力要素に name が与えられると、その名前は所有するフォーム要素の {{domxref("HTMLFormElement.elements")}} プロパティのプロパティになります。 name が guest に設定されている入力と、 name が hat-size に設定されている入力がある場合、以下のコードを使用することができます。

- - 
let form = document.querySelector("form");
-
-let guestName = form.elements.guest;
-let hatSize = form.elements["hat-size"];
-
- -

このコードを実行すると、 guestName が {{domxref("HTMLInputElement")}} の guest フィールドになり、 hatSize が hat-size フィールドの

- -
-

警告: フォームの組み込みプロパティに対応する name をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。

-
-
-
{{htmlattrdef("pattern")}}
-
-
-

pattern 属性は、指定された場合、入力の {{htmlattrxref("value")}} が一致すれば値が制約検証を通過したとみなされる正規表現を指定します。これは {{jsxref("RegExp")}} 型で使用される妥当な JavaScript の正規表現でなければならず、これは正規表現のガイドで説明されている通りです。正規表現をコンパイルする際には 'u' フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。

- -

pattern 属性が存在するが、指定されていないか無効な場合、正規表現は適用されず、この属性は完全に無視されます。 pattern 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。

- -
-

ヒント: pattern 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、 {{htmlattrxref("title", "input")}} 属性を含めることもできます。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。

-
-
- -

詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。

-
-
{{htmlattrdef("placeholder")}}
-
-

placeholder 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明やプロンプトではなく、期待されるデータのタイプのヒントとなる単語や短いフレーズである必要があります。テキストには、改行を含めてはいけません。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。

- -
-

注: placeholder 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細はラベルを参照してください。

-
-
-
{{htmlattrdef("readonly")}}
-
-

論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。 readonly 属性は text, search, url, tel, email, date, month, week, time, datetime-local, number, password の各入力型が対応しています。

- -

詳しくは HTML 属性: readonly を参照してください。

-
-
{{htmlattrdef("required")}}
-
-

required は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 required 属性は text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, file の各入力型で対応しています。

- -

詳しくは{{anch("Client-side validation", "クライアント側検証")}}および HTML 属性: required を参照してください。

-
-
{{htmlattrdef("size")}}
-
email, password, tel, text の input 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、 CSS の width プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。 password や text の場合は文字数 (または em 単位) で既定値は 20、それ以外の場合はピクセルとなります。 CSS の width は size 属性よりも優先されます。
-
{{htmlattrdef("src")}}
-
-

image 入力ボタンにのみ有効で、 src は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。

-
-
{{htmlattrdef("step")}}
-
-
-

数値入力型、例えば number、日付／時刻入力型、 range 型で有効です。 step 属性は、値が準拠すべき粒度を指定する数値です。

- -

明示的に指定しない場合は次のようになります。

- -
    -
  • number と range の場合、 step の既定値は 1 です。
    • -
  • 日付や時刻の入力型では、 step は秒単位の表現となり、既定の step は 60 秒になります。 step の係数は 1000 です (他のアルゴリズムの場合と同様、秒からミリ秒へ変換します)。
    • -
- -

値は、正の整数または浮動小数点実数、または特殊な値 any のいずれかでなければなりません。これは、刻みが考慮されず、あらゆる値が許容されることを意味します ({{anch("min")}} や {{anch("max")}} などの他の制約がない場合)。

- -

any が明示的に設定されていない場合、 number、日付/時刻、 range の各入力型の妥当な値は、刻みの基数と等しくなります。すなわち {{anch("min")}} の値と、そこから step 値単位で増加させたもの (指定されている場合は {{anch("max")}} まで) です。

- -

例えば、 <input type="number" min="10" step="2"> とすると、 10 以上の偶数の整数であればすべて妥当となります。 <input type="number"> のように省略された場合は、整数であれば何でも妥当ですが、浮動小数点実数 (4.2 など) は step の既定値が 1 なので妥当ではありません。 4.2 を妥当にするためには、 step に any、0.1、0.2 に設定するか、 min の値を .2 で終わる数に (例えば <input type="number" min="-5.2"> に) 設定する必要があります。

- -
-

注: ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、 :invalid 擬似クラスに一致するようになります。

-
-
+ 文書中で一つの要素だけが `autofocus` 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。 -

詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。

-
-
{{htmlattrdef("tabindex")}}
-
-

すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。 hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。

-
-
{{htmlattrdef('title')}}
-
-

すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。 title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに {{htmlelement('label')}} 要素を使用し、その for 属性でフォームコントロールの {{htmlattrdef('id')}} 属性を指すようにしてください。下記の{{anch("Labels", "ラベル")}}を参照してください。

-
-
{{htmlattrdef("type")}}
-
-

文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 checkbox の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に text が使用され、テキストの入力欄が生成されます。

- -

許可されている値は{{anch("<input> types", "<input> の型")}}にあります。

-
-
{{htmlattrdef("value")}}
-
-

入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの {{domxref("HTMLInputElement")}} オブジェクトの value プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。 value 属性は常に省略可ですが、 checkbox, radio, hidden においては必須だと考えてください。

-
-
{{htmlattrdef("width")}}
-
-

image 入力ボタンにのみ有効で、 width にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。

-
-
- -

標準外の属性

- -

一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。

+ `autofocus` は `hidden` 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性説明
{{anch("autocorrect")}}自動補完が on であるか off であるかを示す文字列です。 Safari のみ。
{{anch("incremental")}}ユーザーがフィールドの値を編集している途中にライブで検索結果を更新できるように、 {{domxref("HTMLInputElement/search_event", "search")}} イベントを繰り返し送信するかどうかを設定します。 WebKit および Blink のみ (Safari, Chrome, Opera, など)。
{{anch("mozactionhint")}}文字列で、ユーザーがフィールドの編集中に Enter キーや Return キーを押したときに実行されるアクションの種類を示す文字列です。仮想キーボード上で、そのキーに対応する適切なラベルを決定するために使用されます。 Android 版 Firefox のみ。
{{anch("orient")}}範囲のスライダーの向きを設定します。 Firefox のみ。
{{anch("results")}}以前の検索クエリーのドロップダウンリストに表示する項目の最大数です。 Safari のみ。
{{anch("webkitdirectory")}}論理属性で、ユーザーがディレクトリー (または {{anch("multiple")}} も存在すれば複数のディレクトリー) を選択できるようにするかどうかを示します。
+ > **Warning:** フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。 `autofocus` が割り当てられると、読み上げソフトは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。 -
-
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
-
{{htmlattrdef("incremental")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/search", "incremental-include")}}
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
-
{{htmlattrdef("orient")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/range", "orient-include")}}
-
{{htmlattrdef("results")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/search", "results-include")}}
-
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
-
{{page("/ja/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}
-
- -

メソッド

- -

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

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

CSS

- -

置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、 UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、 input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。

- -

UI 擬似クラス

+ `autofocus` 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。読み上げソフトはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +- {{htmlattrdef("capture")}} + - : HTML Media Capture 仕様書で導入され、 `file` 入力型に対してのみ有効です。 `capture` 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで `file` アップロードコントロールを使用してアップロードするかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。 +- {{htmlattrdef("checked")}} + + - : `radio` 型と `checkbox` 型の両方で有効で、 `checked` は論理属性です。 `radio` 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。 `checkbox` 型に存在した場合、 (ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。 ([`HTMLInputElement` の `checked` IDL 属性](/ja/docs/Web/API/HTMLInputElement)のみが更新されます。) + + > **Note:** 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 `checked` の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。 + > + > 例えば、 `name` が `fruit` で、 `value` が `cherry` であるチェックボックスがチェックされていると、送信されるフォームデータには `fruit=cherry` が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の `value` は `on` です。 + +- {{htmlattrdef("dirname")}} + + - : `text` および `search` 入力型のみに有効で、 `dirname` 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは 2 組の名前と値を送信します。 1 組目は {{htmlattrxref("name", "input")}} と {{htmlattrxref("value", "input")}} であり、 2 組目は名前が `dirname` の値で、値に `ltr` または `rtl` がブラウザーによって設定されます。 + + ```html + + + + + + ``` + + 上記のフォームが送信されると、入力欄は `name` / `value` の組である `fruit=cherry` と、 `dirname` / 書字方向の組である `fruit.dir=ltr` が送信されます。 + +- {{htmlattrdef("disabled")}} + + - : 論理属性で、存在する場合、ユーザーが入力欄と対話できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示すことを示す形で表示されます。 + + 特に、無効になった入力欄は {{domxref("Element/click_event", "click")}} イベントを受け取らず、フォームと共に送信されることもありません。 + + > **Note:** 仕様書で要件とはされていませんが、 Firefox は既定で、ページを再読み込みしても `` を [動的に無効化した状態を維持します](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。この機能は {{htmlattrxref("autocomplete","input")}} 属性で制御することができます。 + +- {{htmlattrdef("form")}} + + - : 文字列で、入力欄が関連づけられた {{HTMLElement("form")}} 要素 (つまり、**フォームオーナー**) を指定します。存在する場合、この文字列値は同一文書内の `` 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 `` 要素は直近の内包するフォームに (もしあれば) 関連付けられます。 + + `form` 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。 + + > **Note:** 入力欄は一つのフォームとしか関連付けることができません。 + +- {{htmlattrdef('formaction')}} + - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。 +- {{htmlattrdef('formenctype')}} + - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。 +- {{htmlattrdef('formmethod')}} + - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。 +- {{htmlattrdef('formnovalidate')}} + - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。 +- {{htmlattrdef('formtarget')}} + - : `image` および `submit` 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。 +- {{htmlattrdef("height")}} + - : `image` 入力型でのみ有効です。 `height` はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。 +- {{htmlattrdef("id")}} + - : すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の `for` 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。 +- {{htmlattrdef("inputmode")}} + - : すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては `none`, `text`, `tel`, `url`, `email`, `numeric`, `decimal`, `search` があります。 +- {{htmlattrdef("list")}} + + - : `list` 属性で与えられる値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} としてください。 `` は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。 + + これは `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, `color` で有効です。 + + 仕様書によれば、 `list` 属性は `hidden`, `password`, `checkbox`, `radio`, `file` それにボタン型では対応していません。 + + ブラウザーによっては、独自のカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、 {{HTMLElement("select")}} のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型については[ブラウザーの互換性一覧表](/ja/docs/Web/HTML/Element/datalist#browser_compatibility)を参照してください。 + + {{htmlelement('datalist')}} 要素を参照してください。 + +- {{htmlattrdef("max")}} + + - : `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` で有効であり、許可される値の範囲の最大値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に不合格になります。 `max` 属性の値が数値でない場合は、要素に最大値は設定されません。 + + 特殊な場合があります。データ型が期間を表す場合（日付や時刻など）、 `max` の値は `min` の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。 + +- {{htmlattrdef("maxlength")}} + + - : `text`, `search`, `url`, `tel`, `email`, `password` で有効であり、ユーザーがフィールドに入力することができる文字数 (UTF-16 コード単位) を定義します。これは `0` 以上の整数値でなければなりません。 `maxlength` が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は `minlength` の値以上である必要もあります。 + + 欄に入力されたテキストの文字数が UTF-16 コード単位で `maxlength` よりも多いと、この入力欄は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に不合格になります。既定では、ブラウザーはユーザーが `maxlength` 属性で許可された文字数以上を入力するのを防ぎます。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。 + +- {{htmlattrdef("min")}} + + - : `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを下回った場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に不合格になります。 `min` 属性の値が数値でない場合は、要素に最小値は設定されません。 + + この値は `max` 属性の値以下である必要があります。 `min` 属性が存在するものの、指定されていなかったり無効であったりした場合は、 `min` の値は適用されません。 `min` 属性が有効であり、値が空ではなく `min` 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。 + + 特殊な場合があります。データ型が期間を表す場合（日付や時刻など）、 `max` の値は `min` の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後 10 時から午前 4 時までの自国の範囲を指定することができます。 + +- {{htmlattrdef("minlength")}} + + - : `text`, `search`, `url`, `tel`, `email`, `password` で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、 `maxlength` で指定された値以下の整数値でなければなりません。 `minlength` が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。 + + 欄に入力されたテキストの文字数が UTF-16 コード単位で `minlength` よりも少ないと、この入力欄は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に不合格になります。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。 + +- {{htmlattrdef("multiple")}} + - : 論理属性の `multiple` は、設定されている場合、 email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また `file` 入力欄では複数のファイルを選択することができることを意味します。 {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/file", "file")}} 入力型を参照してください。 +- {{htmlattrdef("name")}} + + - : 入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。 + + `name` は (厳密にはそうではありませんが) 必須の属性と考えてください。入力欄に `name` が指定されていなかった場合や `name` が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。 (無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。) + + 特殊な場合が 2 つあります。 + + 1. `_charset_` : `` 要素の {{HTMLElement("input/hidden", "hidden")}} 型として使用された場合、入力欄の `value` には自動的に、フォームを送信するのに使用される文字エンコーディングが{{Glossary("user agent", "ユーザーエージェント")}}によって設定されます。 + 2. `isindex`: 歴史的な理由で、 [`isindex`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name) という名前は許可されていません。 + + [`name`](#htmlattrdefname) 属性はラジオボタンでは独特の動きをします。 + + 同名のラジオボタングループ内で、一度にチェックできるラジオボタンは 1 つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。 + + 同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの 1 つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの 1 つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、 1 つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。 + + グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。 + + 入力要素に `name` が与えられると、その名前は所有するフォーム要素の {{domxref("HTMLFormElement.elements")}} プロパティのプロパティになります。 `name` が `guest` に設定されている入力と、 `name` が `hat-size` に設定されている入力がある場合、以下のコードを使用することができます。 + + ```js + let form = document.querySelector("form"); + + let guestName = form.elements.guest; + let hatSize = form.elements["hat-size"]; + ``` + + このコードを実行すると、 `guestName` が {{domxref("HTMLInputElement")}} の `guest` フィールドになり、 `hatSize` が `hat-size` フィールドの + + > **Warning:** フォームの組み込みプロパティに対応する `name` をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。 + +- {{htmlattrdef("pattern")}} + + - : `pattern` 属性は、指定された場合、入力の {{htmlattrxref("value")}} が一致すれば値が[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)を通過したとみなされる正規表現を指定します。これは {{jsxref("RegExp")}} 型で使用される有効な JavaScript の正規表現でなければならず、これは[正規表現のガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で説明されている通りです。正規表現をコンパイルする際には `'u'` フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。 + + `pattern` 属性が存在するが、指定されていないか無効な場合、正規表現は適用されず、この属性は完全に無視されます。 `pattern` 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。 + + > **Note:** `pattern` 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、 {{htmlattrxref("title", "input")}} 属性を含めることもできます。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。 + + 詳しくは{{anch("クライアント側検証")}}を参照してください。 + +- {{htmlattrdef("placeholder")}} + + - : `placeholder` 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明やプロンプトではなく、期待されるデータのタイプのヒントとなる単語や短いフレーズである必要があります。テキストには、改行を含めては*いけません*。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。 + + > **Note:** `placeholder` 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は[ラベル](#label)を参照してください。 + +- {{htmlattrdef("readonly")}} + + - : 論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。 `readonly` 属性は `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `password` の各入力型が対応しています。 + + 詳しくは [HTML 属性: `readonly`](/ja/docs/Web/HTML/Attributes/readonly) を参照してください。 + +- {{htmlattrdef("required")}} + + - : `required` は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 `required` 属性は `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `password`, `checkbox`, `radio`, `file` の各入力型で対応しています。 + + 詳しくは{{anch("クライアント側検証")}}および [HTML 属性: `required`](/ja/docs/Web/HTML/Attributes/required) を参照してください。 + +- {{htmlattrdef("size")}} + - : `email`, `password`, `tel`, `text` の `input` 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、 CSS の `width` プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。 `password` や `text` の場合は文字数 (または `em` 単位) で既定値は `20`、それ以外の場合はピクセルとなります。 CSS の width は size 属性よりも優先されます。 +- {{htmlattrdef("src")}} + - : `image` 入力ボタンにのみ有効で、 `src` は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。 +- {{htmlattrdef("step")}} + + - : 数値入力型、例えば `number`、日付／時刻入力型、 `range` 型で有効です。 `[step](/ja/docs/Web/HTML/Attributes/step)` 属性は、値が準拠すべき粒度を指定する数値です。 + + 明示的に指定しない場合は次のようになります。 + + - `number` と `range` の場合、 `step` の既定値は 1 です。 + - 日付や時刻の入力型では、 `step` は秒単位の表現となり、**既定の step は 60 秒**になります。 step の係数は 1000 です (他のアルゴリズムの場合と同様、秒からミリ秒へ変換します)。 + + 値は、正の整数または浮動小数点実数、または特殊な値 `any` のいずれかでなければなりません。これは、刻みが考慮されず、あらゆる値が許容されることを意味します (`{{anch("min")}}` や `{{anch("max")}}` などの他の制約がない場合)。 + + `any` が明示的に設定されていない場合、 `number`、日付/時刻、 `range` の各入力型の有効な値は、刻みの基数と等しくなります。すなわち `{{anch("min")}}` の値と、そこから step 値単位で増加させたもの (指定されている場合は `{{anch("max")}}` まで) です。 + + 例えば、 `` とすると、 `10` 以上の偶数の整数であればすべて有効となります。 `` のように省略された場合は、整数であれば何でも有効ですが、浮動小数点実数 (`4.2` など) は `step` の既定値が `1` なので有効ではありません。 `4.2` を有効にするためには、 `step` に `any`、0.1、0.2 に設定するか、 `min` の値を `.2` で終わる数に (例えば `` に) 設定する必要があります。 + + > **Note:** ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、 `:invalid` 擬似クラスに一致するようになります。 + + 詳しくは{{anch("クライアント側検証")}}を参照してください。 + +- {{htmlattrdef("tabindex")}} + - : すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。 hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。 +- {{htmlattrdef('title')}} + - : すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。 title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに {{htmlelement('label')}} 要素を使用し、その `for` 属性でフォームコントロールの {{htmlattrdef('id')}} 属性を指すようにしてください。下記の{{anch("ラベル")}}を参照してください。 +- {{htmlattrdef("type")}} + + - : 文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 `checkbox` の値が使用されます。省略された場合（または不明な値が指定された場合）は、入力型に `text` が使用され、テキストの入力欄が生成されます。 + + 許可されている値は[入力型](#入力型)にあります。 + +- {{htmlattrdef("value")}} + - : 入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの {{domxref("HTMLInputElement")}} オブジェクトの `value` プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。 `value` 属性は常に省略可ですが、 `checkbox`, `radio`, `hidden` においては必須だと考えてください。 +- {{htmlattrdef("width")}} + - : `image` 入力ボタンにのみ有効で、 `width` にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。 + +### 標準外の属性 + +一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。 + +
{{htmlelement("input")}} 要素に関連する説明
擬似クラス説明
{{Cssxref(":enabled")}}現在有効な要素で、アクティブ化 (選択、クリック、入力など) またはフォーカスを受け受け取ることができ、無効な状態、すなわちアクティブ化やフォーカスを受け取ることができない状態を持つものです。
{{Cssxref(":disabled")}}現在無効な要素で、有効な状態、すなわち無効化されていなければアクティブ化 (選択、クリック、入力など) やフォーカス��受け取ることができる状態になることができるものです。
{{Cssxref(":read-only")}}ユーザーが編集することができない要素
{{Cssxref(":read-write")}}ユーザーが編集できる要素です。
{{Cssxref(":placeholder-shown")}}現在プレイスホルダーのテキストを表示している要素で、 {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素に {{anch('htmlattrdefplaceholder', 'placeholder')}} 属性が付いていて、まだ値がないものを含みます。
{{Cssxref(":default")}}関連する要素のグループの中で、既定となるフォーム要素です。 {{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、ページの読み込み時やレンダリング時にチェックされていたものに一致します。
{{Cssxref(":checked")}}{{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、現在チェックされている (また {{HTMLElement("select")}} の {{HTMLElement("option")}} のうち現在選択されているもの) に一致します。
{{Cssxref(":indeterminate")}}{{HTMLElement("input/checkbox", "checkbox")}} 要素で indeterminate プロパティが JavaScript から true に設定されている場合、 {{HTMLElement("input/radio", "radio")}} 要素で同じ name の値を持つすべてのラジオボタンがチェックされていない場合、 {{HTMLElement("progress")}} 要素が indeterminate の状態にある場合
{{Cssxref(":valid")}}フォームコントロールのうち、制約検証が適用でき、現在妥当であるもの。
{{Cssxref(":invalid")}}制約条件の検証が適用され、現在妥当ではないフォームコントロール。 {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}}, {{anch('htmlattrdefmax', 'max')}} などの属性で設定された制約条件に値が適合しないフォームコントロールに一致します。
{{Cssxref(":in-range")}}空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性、および {{anch('htmlattrdefstep', 'step')}} 属性で指定された範囲内にあるもの。
{{Cssxref(":out-of-range")}}空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性の範囲内にないか、 {{anch('htmlattrdefstep', 'step')}} の制約に準拠していないもの。
{{Cssxref(":required")}}{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されているもの。必須になる要素のみに一致します。必須にならない要素にこの属性を設定しても、一致するようにはなりません。
{{Cssxref(":optional")}}{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されていないもの。必須になることがない属性には一致しません。
{{Cssxref(":blank")}}{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素のうち現在値がないものです。
{{Cssxref(":user-invalid")}}:invalid と似ていますが、フォーカスを失ったときに適用されます。無効な入力欄に一致しますが、コントロールにフォーカスが移動したり、コントロールから離れたり、無効なコントロールを含むフォームを送信しようとしたときなど、ユーザーの操作があって初めて一致します。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性説明
{{htmlattrxref("autocorrect", "input", "", 1)}} + 自動補完が on であるか off であるかを示す文字列です。 Safari のみ。 +
{{htmlattrxref("incremental", "input", "", 1)}} + ユーザーがフィールドの値を編集している途中にライブで検索結果を更新できるように、 {{domxref("HTMLInputElement/search_event", "search")}} イベントを繰り返し送信するかどうかを設定します。 WebKit および Blink のみ (Safari, Chrome, Opera, など)。 +
{{htmlattrxref("mozactionhint", "input", "", 1)}} + 文字列で、ユーザーがフィールドの編集中に Enter キーや Return キーを押したときに実行されるアクションの種類を示す文字列です。仮想キーボード上で、そのキーに対応する適切なラベルを決定するために使用されます。 Android 版 Firefox のみ。 +
{{htmlattrxref("orient", "input", "", 1)}} + 範囲のスライダーの向きを設定します。 Firefox のみ。 +
{{htmlattrxref("results", "input", "", 1)}} + 以前の検索クエリーのドロップダウンリストに表示する項目の最大数です。 Safari のみ。 +
+ {{htmlattrxref("webkitdirectory", "input", "", 1)}} + + 論理属性で、ユーザーがディレクトリー (または {{htmlattrxref("multiple", "input", "", 1)}} も存在すれば複数のディレクトリー) を選択できるようにするかどうかを示します。 +
+ +- {{htmlattrdef("autocorrect")}} {{non-standard_inline}} + + - : Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。 + + - `on` + - : 構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。 + - `off` + - : 自動修正やテキストの置き換えを無効にします。 + +- {{htmlattrdef("incremental")}} {{non-standard_inline}} + + - : 論理属性 `incremental` は WebKit および Blink 拡張で（そのため Safari, Opera, Chrome, などが対応）、もし存在すれば、{{Glossary("user agent", "ユーザーエージェント")}}に入力をライブ検索として処理します。ユーザーがフィールドの値を編集すると、ユーザーエージェントは {{domxref("HTMLInputElement/search_event", "search")}} イベントを検索ボックスを表す {{domxref("HTMLInputElement")}} オブジェクトへ送信します。これにより、ユーザーが検索を編集するたびに、コードからリアルタイムに検索結果を更新することができます。 + + `incremental` が指定されていない場合、 {{domxref("HTMLInputElement/search_event", "search")}} イベントはユーザーが明示的に検索を実行した時のみ（フィールドを編集中に Enter または Return キーを押すなど) 送信されます。 + + `search` イベントは発生頻度が制限されているため、実装により定義された間隔よりも頻繁に送信されることはありません。 + +- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} + + - : Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの Enter キーにどのようなラベルを使用するかを決定するために使用されます。 + + > **Note:** これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として[標準化されています](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute)が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。 + + 許可されている値は `go`, `done`, `next`, `search`, `send` です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。 + +- {{htmlattrdef("orient")}} {{non-standard_inline}} + - : CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える `orient` 属性は、範囲スライダーの向きを定義する定義します。値は `horizontal` が範囲を水平方向に描画することを、 `vertical` が範囲を垂直に描画することを意味します。 +- {{htmlattrdef("results")}} {{non-standard_inline}} + + - : `results` 属性は Safari のみが対応しており、 {{HTMLElement("input")}} 要素のネイティブな検索クエリのドロップダウンメニューに表示する項目の最大数を上書きすることができる数値です。 + + この値は、負でない 10 進数でなければならなりません。指定しない場合、または無効な値を指定した場合は、ブラウザーの既定の最大項目数が使用されます。 + +- {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}} + + - : 論理属性の `webkitdirectory` は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリのみを選択することができることを示します。詳しい解説と例については {{domxref("HTMLInputElement.webkitdirectory")}} を参照してください。 + + `webkitdirectory` はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、 Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。 + +## メソッド + +以下のメソッドは DOM 内で `` を表現する {{domxref("HTMLInputElement")}} インターフェイスで提供されます。親インターフェイスである {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} で指定されているメソッドも使用できます。 + +- {{domxref("HTMLInputElement.checkValidity", "checkValidity()")}} + - : 要素の有効性チェックを直ちに実行し、値が有効でない場合は文書に対して {{domxref("HTMLInputElement.invalid_event", "invalid")}} イベントを要素に発生させます。 +- {{domxref("HTMLInputElement.reportValidity", "reportValidity()")}} + - : 要素の値が有効性チェックを通った場合は `true` を返します。そうでなければ、 `false` を返します。 +- {{domxref("HTMLInputElement.select", "select()")}} + - : 要素が選択可能な場合、 `` 要素の内容を選択します。選択可能なテキストコンテンツがない要素 (カラーピッカーまたはカレンダー日付入力など) では、このメソッドは何もしません。 +- {{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}} + - : 入力要素の値が有効ではないときに表示する独自のメッセージを設定します。 +- {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} + - : 入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。 `selectMode` 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。 +- {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} + - : テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。 +- {{domxref("HTMLInputElement.stepDown", "stepDown()")}} + - : 数値入力欄の値を既定で1、または指定された数値の単位だけ減少させます。 +- {{domxref("HTMLInputElement.stepUp", "stepUp()")}} + - : 数値入力欄の値を既定で1、または指定された数値の単位だけ増加させます。 + +## CSS + +置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、 UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、 input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。 + +### UI 擬似クラス + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ <input> 要素に関連する説明 +
擬似クラス説明
{{Cssxref(":enabled")}} + 現在有効な要素で、アクティブ化 (選択、クリック、入力など) またはフォーカスを受け受け取ることができ、無効な状態、すなわちアクティブ化やフォーカスを受け取ることができない状態を持つものです。 +
{{Cssxref(":disabled")}} + 現在無効な要素で、有効な状態、すなわち無効化されていなければアクティブ化 (選択、クリック、入力など) やフォーカスを受け取ることができる状態になることができるものです。 +
{{Cssxref(":read-only")}}ユーザーが編集することができない要素
{{Cssxref(":read-write")}}ユーザーが編集できる要素です。
{{Cssxref(":placeholder-shown")}} + 現在{{htmlattrxref("placeholder", "input", "プレイスホルダーのテキスト", 1)}}を表示している要素で、 <input> や {{HTMLElement("textarea")}} 要素に {{htmlattrxref("placeholder", "input", "", 1)}} 属性が付いていて、まだ値がないものを含みます。 +
{{Cssxref(":default")}} + 関連する要素のグループの中で、既定となるフォーム要素です。 {{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、ページの読み込み時やレンダリング時にチェックされていたものに一致します。 +
{{Cssxref(":checked")}} + {{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、現在チェックされている (また {{HTMLElement("select")}} の {{HTMLElement("option")}} のうち現在選択されているもの) に一致します。 +
{{Cssxref(":indeterminate")}} + {{HTMLElement("input/checkbox", "checkbox")}} 要素で indeterminate プロパティが JavaScript から true に設定されている場合、 {{HTMLElement("input/radio", "radio")}} 要素で同じ name の値を持つすべてのラジオボタンがチェックされていない場合、 {{HTMLElement("progress")}} 要素が indeterminate の状態にある場合 +
{{Cssxref(":valid")}} + フォームコントロールのうち、制約検証が適用でき、現在有効であるもの。 +
{{Cssxref(":invalid")}} + 制約条件の検証が適用され、現在有効ではないフォームコントロール。 + {{ htmlattrxref("required", "input", "", 1)}}, + {{ htmlattrxref("pattern", "input", "", 1)}} , + {{ htmlattrxref("step", "input", "", 1)}}, + {{ htmlattrxref("max", "input", "", 1)}} などの属性で設定された制約条件に値が適合しないフォームコントロールに一致します。 +
{{Cssxref(":in-range")}} + 空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性、および {{anch('htmlattrdefstep', 'step')}} 属性で指定された範囲内にあるもの。 +
{{Cssxref(":out-of-range")}} + 空でない入力欄のうち、現在の値が {{ htmlattrxref("min", "input", "", 1)}} Ｓ {{ htmlattrxref("max", "input", "", 1)}} 属性の範囲内にないか、 {{ htmlattrxref("step", "input", "", 1)}} の制約に準拠していないもの。 +
{{Cssxref(":required")}} + <input>, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されているもの。必須になる要素のみに一致します。必須にならない要素にこの属性を設定しても、一致するようにはなりません。 +
{{Cssxref(":optional")}} + <input>, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されていないもの。必須になることがない属性には一致しません。 +
{{Cssxref(":blank")}} + <input> および {{HTMLElement("textarea")}} 要素のうち現在値がないものです。 +
{{Cssxref(":user-invalid")}} + :invalid と似ていますが、フォーカスを失ったときに適用されます。無効な入力欄に一致しますが、コントロールにフォーカスが移動したり、コントロールから離れたり、無効なコントロールを含むフォームを送信しようとしたときなど、ユーザーの操作があって初めて一致します。 +
-

例

+#### 擬似クラスの例 -

チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル付けすることができます。この例では、 {{cssxref('color')}} と {{cssxref('font-weight')}} でチェックされたボックスの直後にある {{htmlelement('label')}} をスタイル付けしています。 input がチェックされていない場合はスタイルを適用しません。

+チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル付けすることができます。この例では、 {{cssxref('color')}} と {{cssxref('font-weight')}} でチェックされたボックスの直後にある {{htmlelement('label')}} をスタイル付けしています。 `input` がチェックされていない場合はスタイルを適用しません。 -
- +```html hidden + + +``` -
input:checked + label {
+```css
+input:checked + label {
   color: red;
   font-weight: bold;
 }
-
+``` -

{{EmbedLiveSample('checkbox_label', 500, 80)}}

-
+{{EmbedLiveSample('Pseudo-classes_example', 500, 80)}} -

属性セレクター

+### 属性セレクター -

属性セレクターを使用すると、様々なフォームコントロールの型のターゲットを {{anch('htmlattrdeftype', 'type')}} に基づいて絞ることができます。 CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。

+[属性セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)を使用すると、様々なフォームコントロールの型のターゲットを {{anch('htmlattrdeftype', 'type')}} に基づいて絞ることができます。 CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。 -
/* password 入力欄に一致 */
+```css
+/* password 入力欄に一致 */
 input[type="password"] {}
 
-/* 妥当な値の範囲が限定されているフォームコントロールに一致 */
+/* 有効な値の範囲が限定されているフォームコントロールに一致 */
 input[min][max] {}
 
 /* pattern 属性の付いたフォームコントロールに一致 */
- input[pattern] {}
+ input[pattern] {} + ``` -

::placeholder

+### ::placeholder -

既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。 {{cssxref('::placeholder')}} 擬似要素は入力欄の プレイスホルダーのテキストです。これは限定された CSS プロパティでスタイル付けすることができます。

+既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。 {{cssxref('::placeholder')}} 擬似要素は入力欄の{{ htmlattrxref("placeholder", "input", "プレイスホルダーのテキスト", 1)}}です。これは限定された CSS プロパティでスタイル付けすることができます。 -
::placeholder {
+```css
+::placeholder {
   color: blue;
-}
+} +``` -

{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに ::placeholder を使用した規則で使用することができます。

+{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに `::placeholder` を使用した規則で使用することができます。 -

appearance

+### appearance -

{{cssxref("appearance")}} プロパティは、 (ほぼ) あらゆる要素をオペレーティングシステムのテーマに基づいたプラットフォームのネイティブのスタイルで表示したり、 none の値でプラットフォームのネイティブのスタイルを削除したりすることができます。

+{{cssxref("appearance")}} プロパティは、（ほぼ）あらゆる要素をオペレーティングシステムのテーマに基づいたプラットフォームのネイティブのスタイルで表示したり、 `none` の値でプラットフォームのネイティブのスタイルを削除したりすることができます。 -

<div> に div {appearance: radio;} を設定してラジオボタンのように見せたり、 [type="checkbox] {appearance: checkbox;} でチェックボックスのように見せたりすることができますが、やらないでください。

+`
` に `div {appearance: radio;}` を設定してラジオボタンのように見せたり、 `[type="radio"] {appearance: checkbox;}` でチェックボックスのように見せたりすることができますが、やらないでください。 -

appearance: none を設定するとプラットフォームのネイティブの境界が削除されますが、機能は削除されません。

+`appearance: none` を設定するとプラットフォームのネイティブの境界が削除されますが、機能は削除されません。 -

caret-color

+### caret-color -

テキスト入力関連要素に特有のプロパティとして CSS の {{cssxref("caret-color")}} プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。

+テキスト入力関連要素に特有のプロパティとして、 CSS の {{cssxref("caret-color")}} プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。 -

HTML

+#### HTML -
<label for="textInput">赤いキャレットに注意:</label>
-<input id="textInput" class="custom" size="32">
-
+```html + + +``` -

CSS

+#### CSS -
input.custom {
+```css
+input.custom {
   caret-color: red;
   font: 16px "Helvetica", "Arial", "sans-serif"
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('caret-color', 500, 80)}}

+{{EmbedLiveSample('caret-color', 500, 80)}} -

object-position と object-fit

+### object-position と object-fit -

<input> 要素は特定の場合 (多くはテキスト以外の入力や特殊なインターフェイス) には、置換要素になることがあります。その場合、 CSS の {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティを使って、要素の枠内での大きさと位置を調整することができます。

+`` 要素は特定の場合（多くはテキスト以外の入力や特殊なインターフェイス）（には、[置換要素](/ja/docs/Web/CSS/Replaced_element)になることがあります。その場合、 CSS の {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティを使って、要素の枠内での大きさと位置を調整することができます。 -

スタイル付け

+### スタイル付け -

HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。

+HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。 - +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) -

こちらも参照してください。

+こちらも参照してください。 - +- [HTML フォームへのスタイル設定](/ja/docs/Learn/Forms/Styling_web_forms) +- [HTML フォームへの高度なスタイル設定](/ja/docs/Learn/Forms/Advanced_form_styling) +- [ フォームウィジェット向けプロパティ実装状況一覧](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) -

追加機能

+## 追加機能 -

ラベル

+### ラベル -

ラベルは支援テキストを <input> に関連付けるために必要です。 {{HTMLElement("label")}} 要素は、フォームの入力欄を説明するために、 (レイアウト方法はさておき) 常に適切な手段です。 <label> を使用して <input> や {{HTMLElement("textarea")}} に何を入力するべきかを説明することは、決して悪い考えではありません。

+ラベルは支援テキストを `` に関連付けるために必要です。 {{HTMLElement("label")}} 要素は、フォームの入力欄を説明するために、(レイアウト方法はさておき）*常に*適切な手段です。 `