path: root/files/ja/web/html/element/input/index.html

---
title: '<input>: 入力欄 (フォーム入力) 要素'
slug: Web/HTML/Element/input
tags:
  - Element
  - Forms
  - HTML
  - HTML input tag
  - HTML フォーム
  - 'HTML:フローコンテンツ'
  - 'HTML:対話型コンテンツ'
  - 'HTML:記述コンテンツ'
  - Reference
  - Web
  - ウェブ
  - データ入力
  - フォーム
  - 要素
translation_of: Web/HTML/Element/input
---
<div>{{HTMLRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="&lt;input>_types" name="&lt;input>_types">&lt;input&gt; の型</h2>

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

<p>利用可能な型は次の通りです。</p>

<table class="standard-table">
 <colgroup>
  <col>
  <col style="width: 50%;">
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>型</th>
   <th>説明</th>
   <th>基本的な例</th>
   <th>仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{HTMLElement("input/button", "button")}}</td>
   <td>プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。</td>
   <td id="examplebutton">
    <pre class="brush: html hidden notranslate">
&lt;input  type="button" name="button" /&gt;</pre>
    {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/checkbox", "checkbox")}}</td>
   <td>チェックボックスで、選択または未選択のうちひとつの値をとることができます。</td>
   <td id="examplecheckbox">
    <pre class="brush: html hidden notranslate">
&lt;input  type="checkbox" name="checkbox"/&gt;</pre>
    {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/color", "color")}}</td>
   <td>色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。</td>
   <td id="examplecolor">
    <pre class="brush: html hidden notranslate">
&lt;input  type="color" name="color"/&gt;</pre>
    {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/date", "date")}}</td>
   <td>日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。</td>
   <td id="exampledate">
    <pre class="brush: html hidden notranslate">
&lt;input  type="date" name="date"/&gt;</pre>
    {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td>
   <td>  {{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
   <td>タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。</td>
   <td id="exampledtl">
    <pre class="brush: html hidden notranslate">
&lt;input  type="datetime-local" name="datetime-local"/&gt;</pre>
    {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/email", "email")}}</td>
   <td>電子メールアドレスを編集するための欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td>
   <td id="exampleemail">
    <pre class="brush: html hidden notranslate">
&lt;input type="email" name="email"/&gt;</pre>
    {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/file", "file")}}</td>
   <td>ユーザーがファイルを選択するコントロールです。 {{anch('htmlattrdefaccept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。</td>
   <td id="examplefile">
    <pre class="brush: html hidden notranslate">
&lt;input type="file" accept="image/*, text/*" name="file"/&gt;</pre>
    {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/hidden", "hidden")}}</td>
   <td>表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/image", "image")}}</td>
   <td>グラフィックの <code>submit</code> ボタンです。 <code>src</code> 属性で定義された画像を表示します。 {{anch('htmlattrdefalt', 'alt')}} 属性は {{anch('htmlattrdefsrc', 'src')}} の画像が見つからないときに表示されます。</td>
   <td id="exampleimage">
    <pre class="brush: html hidden notranslate">
&lt;input type="image" name="image" src="" alt="image input"/&gt;</pre>
    {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/month", "month")}}</td>
   <td>タイムゾーン情報がない年と月を入力するためのコントロールです。</td>
   <td id="examplemonth">
    <pre class="brush: html hidden notranslate">
&lt;input type="month" name="month"/&gt;</pre>
    {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/number", "number")}}</td>
   <td>数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。</td>
   <td id="examplenumber">
    <pre class="brush: html hidden notranslate">
&lt;input  type="number" name="number"/&gt;</pre>
    {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/password", "password")}}</td>
   <td>入力値を隠す1行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。</td>
   <td id="examplepassword">
    <pre class="brush: html hidden notranslate">
&lt;input  type="password" name="password"/&gt;</pre>
    {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/radio", "radio")}}</td>
   <td>ラジオボタンで、同じ {{anch('htmlattrdefname', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。</td>
   <td id="exampleradio">
    <pre class="brush: html hidden notranslate">
&lt;input type="radio" name="radio"/&gt;</pre>
    {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/range", "range")}}</td>
   <td>厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 {{anch('htmlattrdefmin', 'min')}} と {{anch('htmlattrdefmax', 'max')}} の組み合わせで、受け入れる値の範囲を定義することができます。</td>
   <td id="examplerange">
    <pre class="brush: html hidden notranslate">
&lt;input type="range" name="range" min="0" max="25"/&gt;</pre>
    {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/reset", "reset")}}</td>
   <td>フォームのコントロールを既定値に初期化するボタンです。推奨しません。</td>
   <td id="examplereset">
    <pre class="brush: html hidden notranslate">
&lt;input  type="reset" name="reset"/&gt;</pre>
    {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/search", "search")}}</td>
   <td>検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。 Displays a search icon instead of enter key on some devices with dynamic keypads.</td>
   <td id="examplesearch">
    <pre class="brush: html hidden notranslate">
&lt;input  type="search" name="search"/&gt;</pre>
    {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/submit", "submit")}}</td>
   <td>フォームを送信するボタンです。</td>
   <td id="examplesubmit">
    <pre class="brush: html hidden notranslate">
&lt;input type="submit" name="submit"/&gt;</pre>
    {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/tel", "tel")}}</td>
   <td>電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。</td>
   <td id="exampletel">
    <pre class="brush: html hidden notranslate">
&lt;input  type="tel" name="tel"/&gt;</pre>
    {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/text", "text")}}</td>
   <td>既定値です。単一行の入力欄です。改行は自動的に入力値から取り除かれます。</td>
   <td id="exampletext">
    <pre class="brush: html hidden notranslate">
&lt;input type="text" name="text"/&gt;</pre>
    {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/time", "time")}}</td>
   <td>タイムゾーン情報がない時刻を入力するためのコントロールです。</td>
   <td id="exampletime">
    <pre class="brush: html hidden notranslate">
&lt;input  type="time" name="time"/&gt;</pre>
    {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/url", "url")}}</td>
   <td>URL 入力するための入力欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td>
   <td id="exampleurl">
    <pre class="brush: html hidden notranslate">
&lt;input type="url" name="url"/&gt;</pre>
    {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <td>{{HTMLElement("input/week", "week")}}</td>
   <td>年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。</td>
   <td id="exampleweek">
    <pre class="brush: html hidden notranslate">
&lt;input type="week" name="week"/&gt;</pre>
    {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
  <tr>
   <th colspan="4">廃止された値</th>
  </tr>
  <tr>
   <td>{{HTMLElement("input/datetime", "datetime")}}</td>
   <td>{{deprecated_inline}} {{obsolete_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。</td>
   <td id="exampledatetime">
    <pre class="brush: html hidden notranslate">
&lt;input type="datetime" name="datetime"/&gt;</pre>
    {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td>
   <td>{{HTMLVersionInline("5")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

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

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

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

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

<h3 id="個々の属性">個々の属性</h3>

<dl>
 <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt>
 <dd>
 <p><code>file</code> 入力型に対してのみ有効です。 <code>accept</code> 属性は <code>file</code> アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt>
 <dd>
 <p><code>image</code> ボタンに対してのみ有効です。 alt 属性は画像の代替テキストを提供し、 <a href="#htmlattrdefsrc"><code>src</code></a> の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt>
 <dd>
 <p>(論理属性では<strong>ありません</strong>!) <code><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 <code>email</code> 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は<a href="/ja/docs/Web/HTML/Attributes/autocomplete#Values">autocomplete 属性の値</a>を参照してください。</p>

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

 <p>詳しい情報については <a href="/ja/docs/Web/HTML/Attributes/autocomplete">HTML の autocomplete 属性</a>を参照してください。パスワードセキュリティに関する情報や、 <code>autocomplete</code> が <code>hidden</code> に対して他の入力型とどう異なるのかについての情報があります。</p>
 </dd>
 <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt>
 <dd>
 <p>論理属性で、指定された場合は、ページの読み込みが完了したとき (またはその要素を含む {{HTMLElement("dialog")}} が表示されたとき) に、自動的にその入力欄がフォーカスを持つことを示します。</p>

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

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

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

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

 <p><code>autofocus</code> 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。読み上げソフトはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。</p>
 </dd>
 <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt>
 <dd>
 <p>HTML Media Capture 仕様書で導入され、 <code>file</code> 入力型に対してのみ有効です。 <code>capture</code> 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで <code>file</code> アップロードコントロールを使用してアップロードするかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt>
 <dd>
 <p><code>radio</code> 型と <code>checkbox</code> 型の両方で有効で、 <code>checked</code> は論理属性です。 <code>radio</code> 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。 <code>checkbox</code> 型に存在した場合、 (ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。 (<a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code> の <code>checked</code> IDL 属性</a>のみが更新されます。)</p>

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

 <p>例えば、 <code>name</code> が <code>fruit</code> で、 <code>value</code> が <code>cherry</code> であるチェックボックスがチェックされていると、送信されるフォームデータには <code>fruit=cherry</code> が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の <code>value</code> は <code>on</code> です。</p>
 </div>
 </dd>
 <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt>
 <dd>
 <p><code>text</code> および <code>search</code> 入力型のみに有効で、 <code>dirname</code> 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは2組の名前と値を送信します。1組目は <a href="#htmlattrdefname"><code>name</code></a> と <a href="#htmlattrdefvalue"><code>value</code></a> であり、2組目は名前が <code>dirname</code> の値で、値に <code>ltr</code> または <code>rtl</code> がブラウザーによって設定されます。</p>

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

 <p>上記のフォームが送信されると、入力欄は <code>name</code> / <code>value</code> の組である <code>fruit=cherry</code> と、 <code>dirname</code> / 書字方向の組である <code>fruit.dir=ltr</code> が送信されます。</p>
 </dd>
 <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>論理属性で、存在する場合、ユーザーが入力欄と対話できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示すことを示す形で表示されます。</p>

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

 <div class="note">
 <p><strong>メモ:</strong> 仕様書で要件とはされていませんが、 Firefox は既定で、ページを再読み込みしても <code>&lt;input&gt;</code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","input")}} 属性で制御することができます。</p>
 </div>
 </dd>
 <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt>
 <dd>
 <p>文字列で、入力欄が関連づけられた {{HTMLElement("form")}} 要素 (つまり、<strong>フォームオーナー</strong>) を指定します。存在する場合、この文字列値は同一文書内の <code>&lt;form&gt;</code> 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 <code>&lt;input&gt;</code> 要素は直近の内包するフォームに (もしあれば) 関連付けられます。</p>

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

 <div class="note">
 <p><strong>メモ:</strong> 入力欄は一つのフォームとしか関連付けることができません。</p>
 </div>
 </dd>
 <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt>
 <dd>
 <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt>
 <dd>
 <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt>
 <dd>
 <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt>
 <dd>
 <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt>
 <dd>
 <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt>
 <dd>
 <p><code>image</code> 入力型でのみ有効です。 <code>height</code> はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p>
 </dd>
 <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt>
 <dd>
 <p>すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の <code>for</code> 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。</p>
 </dd>
 <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt>
 <dd>
 <p>すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては <code>none</code>, <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, <code>search</code> があります。</p>
 </dd>
 <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt>
 <dd id="datalist">
 <p><code>list</code> 属性で与えられる値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} としてください。 <code>&lt;datalist&gt;</code> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。</p>

 <pre class="brush: html hidden notranslate">&lt;datalist id="colorsxx"&gt;
  &lt;option&gt;#ff0000&lt;/option&gt;
  &lt;option&gt;#ee0000&lt;/option&gt;
  &lt;option&gt;#dd0000&lt;/option&gt;
  &lt;option&gt;#cc0000&lt;/option&gt;
  &lt;option&gt;#bb0000&lt;/option&gt;
&lt;/datalist&gt;
&lt;datalist id="numbersxx"&gt;
  &lt;option&gt;0&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;8&lt;/option&gt;
  &lt;option&gt;16&lt;/option&gt;
  &lt;option&gt;32&lt;/option&gt;
  &lt;option&gt;64&lt;/option&gt;
&lt;/datalist&gt;
&lt;datalist id="fruitsxx"&gt;
  &lt;option&gt;cherry&lt;/option&gt;
  &lt;option&gt;banana&lt;/option&gt;
  &lt;option&gt;mango&lt;/option&gt;
  &lt;option&gt;orange&lt;/option&gt;
  &lt;option&gt;blueberry&lt;/option&gt;
&lt;/datalist&gt;
&lt;datalist id="urlsxx"&gt;
  &lt;option&gt;https://developer.mozilla.org&lt;/option&gt;
  &lt;option&gt;https://caniuse.com/&lt;/option&gt;
  &lt;option&gt;https://mozilla.com&lt;/option&gt;
  &lt;option&gt;https://mdn.github.io&lt;/option&gt;
  &lt;option&gt;https://www.youtube.com/user/firefoxchannel&lt;/option&gt;
&lt;/datalist&gt;

&lt;p&gt;&lt;label for="textx"&gt;Text&lt;/label&gt; &lt;input type="text" list="fruitsxx" id="textx"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for="colorx"&gt;Color&lt;/label&gt; &lt;input type="color" list="colorsxx" id="colorx"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for="rangex"&gt;Range&lt;/label&gt; &lt;input type="range" min="0" max="64" list="numbersxx" id="rangex"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for="numberx"&gt;Number&lt;/label&gt; &lt;input type="number" min="0" max="64" list="numbersxx" id="numberx"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for="urlx"&gt;URL&lt;/label&gt; &lt;input type="url" list="urlsxx" id="urlx"/&gt;&lt;/p&gt;</pre>

 <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p>

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

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

 <p>ブラウザーによっては、カスタムカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、{{HTMLElement("select")}}のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型については<a href="/ja/docs/Web/HTML/Element/datalist#Browser_compatibility">ブラウザーの互換性一覧表</a>を参照してください。</p>

 <p>{{htmlelement('datalist')}} 要素を参照してください。</p>
 </dd>
 <dt id="htmlattrdefmax"><a href="/ja/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt>
 <dd>
 <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最大値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>max</code> 属性の値が数値でない場合は、要素に最大値は設定されません。</p>

 <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p>
 </dd>
 <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt>
 <dd>
 <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる文字数 (UTF-16 コード単位) を定義します。これは <code>0</code> 以上の整数値でなければなりません。 <code>maxlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>

 <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>maxlength</code> よりも多いと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。既定では、ブラウザーはユーザーが <code>maxlength</code> 属性で許可された文字数以上を入力するのを防ぎます。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
 </dd>
 <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt>
 <dd>
 <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを下回った場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合は、要素に最小値は設定されません。</p>

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

 <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p>
 </dd>
 <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt>
 <dd>
 <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、 <code>maxlength</code> で指定された値以下の整数値でなければなりません。 <code>minlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。</p>

 <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>minlength</code> よりも少ないと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
 </dd>
 <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt>
 <dd>
 <p>論理属性の <code>multiple</code> は、設定されている場合、ユーザーがウィジェット内でコンマ区切りで複数のメールアドレスを入力できること、または <code>file</code> 入力欄で複数のpファイルを選択することが出えきるinput. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p>
 </dd>
 <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt>
 <dd>
 <p>入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。</p>

 <h5 id="Whats_in_a_name" name="Whats_in_a_name">name に入れるもの</h5>

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

 <p>特殊な場合が2つあります。</p>

 <ol>
  <li><code>_charset_</code> : <code>&lt;input&gt;</code> 要素の {{HTMLElement("input/hidden", "hidden")}} 型として使用された場合、入力欄の <code>value</code> には自動的に、フォームを送信するのに使用される文字エンコーディングが{{Glossary("user agent", "ユーザーエージェント")}}によって設定されます。</li>
  <li><code>isindex</code>: 歴史的な理由で、 <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> という名前は許可されていません。</li>
 </ol>

 <h5 id="name_and_radio_buttons" name="name_and_radio_buttons">name とラジオボタン</h5>

 <p><a href="#htmlattrdefname"><code>name</code></a> 属性はラジオボタンでは独特の動きをします。</p>

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

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

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

 <h5 id="HTMLFormElement.elements">HTMLFormElement.elements</h5>

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

 <pre class="brush: js notranslate">let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];
</pre>

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

 <div class="warning">
 <p><strong>警告:</strong> フォームの組み込みプロパティに対応する <code>name</code> をフォーム要素に与えないようにします。なぜなら、対応する入力への参照で定義済みのプロパティやメソッドをオーバーライドしてしまうからです。</p>
 </div>
 </dd>
 <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt>
 <dd>
 <div id="pattern-include">
 <p><code>pattern</code> 属性は、指定された場合、入力の {{htmlattrxref("value")}} が一致すれば値が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>を通過したとみなされる正規表現を指定します。これは {{jsxref("RegExp")}} 型で使用される有効な JavaScript の正規表現でなければならず、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で説明されている通りです。正規表現をコンパイルする際には <code>'u'</code> フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。</p>

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

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

 <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p>
 </dd>
 <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt>
 <dd>
 <p><code>placeholder</code> 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明的なメッセージではなく、予想されるデータのタイプを示す単語または短いフレーズである必要があります。テキストには、改行を含めては<em>いけません</em>。</p>

 <div class="note">
 <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels")}}を参照してください。</p>
 </div>
 </dd>
 <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt>
 <dd>
 <p>論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。 <code>readonly</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code> の各入力型が対応しています。</p>

 <p>詳しくは <a href="/ja/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> を参照してください。</p>
 </dd>
 <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt>
 <dd>
 <p><code>required</code> は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 <code>required</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> の各入力型で対応しています。</p>

 <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p>
 </dd>
 <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt>
 <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and <code>text</code> <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For <code>password</code> and <code>text</code> it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd>
 <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt>
 <dd>
 <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
 </dd>
 <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt>
 <dd>
 <div id="step-include">
 <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p>

 <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number—integer or float—or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p>

 <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified.</p>

 <p>For example, if you have <code>&lt;input type="number" min="10" step="2"&gt;</code>, then any even integer, <code>10</code> or greater, is valid. If omitted, <code>&lt;input type="number"&gt;</code>, any integer is valid, but floats (like <code>4.2</code>) are not valid, because <code>step</code> defaults to <code>1</code>. For <code>4.2</code> to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the <code>min</code> value would have had to be a number ending in <code>.2</code>, such as <code>&lt;input type="number" min="-5.2"&gt;</code></p>

 <div class="note">
 <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the <code>:invalid</code> pseudoclass.</p>
 </div>
 </div>

 <p>The default stepping value for <code>number</code> inputs is <code>1</code>, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second (with 900 being equal to 15 minutes).</p>

 <p>See {{anch("Client-side validation")}} for more information.</p>
 </dd>
 <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt>
 <dd>
 <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p>
 </dd>
 <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt>
 <dd>
 <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p>
 </dd>
 <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt>
 <dd>
 <p>文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 <code>checkbox</code> の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に <code>text</code> が使用され、テキストの入力欄が生成されます。</p>

 <p>許可されている値は{{anch("&lt;input&gt; types", "&lt;input&gt; の型")}}にあります。</p>
 </dd>
 <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt>
 <dd>
 <p>入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの {{domxref("HTMLInputElement")}} オブジェクトの <code>value</code> プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。 <code>value</code> 属性は常に省略可ですが、 <code>checkbox</code>, <code>radio</code>, <code>hidden</code> においては必須だと考えてください。</p>
 </dd>
 <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt>
 <dd>
 <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
 </dd>
</dl>

<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3>

<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("autocorrect")}}</code></td>
   <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("incremental")}}</code></td>
   <td>Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("mozactionhint")}}</code></td>
   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only</strong>.</td>
  </tr>
  <tr>
   <td><code>{{anch("orient")}}</code></td>
   <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td>
  </tr>
  <tr>
   <td><code>{{anch("results")}}</code></td>
   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("webkitdirectory")}}</code></td>
   <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
 <dd>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd>
 <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
 <dd>{{page("/ja/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd>
 <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
 <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd>
 <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
 <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd>
 <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
 <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd>
 <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
 <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

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

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

<h2 id="CSS">CSS</h2>

<p>Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.</p>

<h3 id="UI_pseudo-classes" name="UI_pseudo-classes">UI 擬似クラス</h3>

<table class="standard-table">
 <caption>Captions super relevant to the {{htmlelement("input")}} element:</caption>
 <thead>
  <tr>
   <th>擬似クラス</th>
   <th>説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{Cssxref(":enabled")}}</td>
   <td>Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":disabled")}}</td>
   <td>Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":read-only")}}</td>
   <td>Element not editable by the user</td>
  </tr>
  <tr>
   <td>{{Cssxref(":read-write")}}</td>
   <td>Element that is editable by the user.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":placeholder-shown")}}</td>
   <td>Element that is currently displaying <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder text</a>, including {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements with the {{anch('htmlattrdefplaceholder', 'placeholder')}} attribute present that has, as of yet, no value.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":default")}}</td>
   <td>Form elements that are the default in a group of related elements. Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that were checked on page load or render.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":checked")}}</td>
   <td>Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that are currently checked (and the ({{HTMLElement("option")}} in a {{HTMLElement("select")}} that is currently selected).</td>
  </tr>
  <tr>
   <td>{{Cssxref(":indeterminate")}}</td>
   <td>{{HTMLElement("input/checkbox", "checkbox")}} elements whose indeterminate property is set to true by JavaScript, {{HTMLElement("input/radio", "radio")}} elements, when all radio buttons with the same name value in the form are unchecked, and {{HTMLElement("progress")}} elements in an indeterminate state</td>
  </tr>
  <tr>
   <td>{{Cssxref(":valid")}}</td>
   <td>Form controls that can have constraint validation applied and are currently valid.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":invalid")}}</td>
   <td>Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}} and {{anch('htmlattrdefmax', 'max')}}.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":in-range")}}</td>
   <td>A non-empty input whose current value is within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes and the {{anch('htmlattrdefstep', 'step')}} .</td>
  </tr>
  <tr>
   <td>{{Cssxref(":out-of-range")}}</td>
   <td>A non-empty input whose current value is NOT within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes or does not adher to the {{anch('htmlattrdefstep', 'step')}} constraint.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":required")}}</td>
   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that has the {{ htmlattrxref("required", "input")}} attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":optional")}}</td>
   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that does NOT have the {{ htmlattrxref("required", "input")}} attribute set on it. Does not match elements that can't be required.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":blank")}}</td>
   <td>{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.</td>
  </tr>
  <tr>
   <td>{{Cssxref(":user-invalid")}}</td>
   <td>Similar to <code>:invalid</code>, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.</td>
  </tr>
 </tbody>
</table>

<h4 id="Examples" name="Examples">例</h4>

<p>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the {{cssxref('color')}} and {{cssxref('font-weight')}} of the {{htmlelement('label')}} that comes immediately after a checked input. We haven't applied any styles if the <code>input</code> is not checked.</p>

<div id="checkbox_label">
<pre class="brush: html hidden notranslate">&lt;input id="checkboxInput" type="checkbox"&gt;
&lt;label for="checkboxInput"&gt;Toggle the checkbox on and off&lt;/label&gt;
</pre>

<pre class="brush: css notranslate">input:checked + label {
  color: red;
  font-weight: bold;
}
</pre>

<p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p>
</div>

<h3 id="Attribute_selectors" name="Attribute_selectors">属性セレクター</h3>

<p>It is possible to target different types of form controls based on their {{anch('htmlattrdeftype', 'type')}} using <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.</p>

<pre class="brush: css notranslate">/* matches a password input */
input[type="password"] {}

/* matches a form control whose valid values are limited to a range of values*/
input[min][max] {}

/* matches a form control with with a pattern attribute */
 input[pattern] {}</pre>

<h3 id="placeholder">::placeholder</h3>

<p>By default, the appearance of placeholder text is a translucent or light gray. The {{cssxref('::placeholder')}} pseudo-element is the input's <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. It can be styled with a limited subset of CSS properties.</p>

<pre class="brush: css no-line-numbers notranslate">::placeholder {
  color: blue;
}</pre>

<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p>

<h3 id="appearance">appearance</h3>

<p>The {{cssxref("appearance")}} property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the <code>none</code> value.</p>

<p>You could make a <code>&lt;div&gt;</code> look like a radio button with <code>div {appearance: radio;} </code>or a radio look like a checkbox with <code>[type="checkbox] {appearance: checkbox;}</code>, but don't.</p>

<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p>

<h3 id="caret-color">caret-color</h3>

<p>A property specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;label for="textInput"&gt;Note the red caret:&lt;/label&gt;
&lt;input id="textInput" class="custom" size="32"&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">input.custom {
  caret-color: red;
  font: 16px "Helvetica", "Arial", "sans-serif"
}
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('caret-color', 500, 80)}}</p>

<h3 id="object-position_and_object-fit" name="object-position_and_object-fit">object-position と object-fit</h3>

<p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code>&lt;input&gt;</code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</p>

<h3 id="Styling" name="Styling">スタイル付け</h3>

<p>For more information about adding color to elements in HTML, see:</p>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li>
</ul>

<p>Also see:</p>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms,</a> <a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">advanced styling for HTML forms</a>, and</li>
 <li>the<a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets"> compatibility table of CSS properties</a>.</li>
</ul>

<h2 id="Additional_features" name="Additional_features">追加機能</h2>

<h3 id="Labels" name="Labels">ラベル</h3>

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

<h4 id="Associated_labels" name="Associated_labels">関連付けられたラベル</h4>

<p>The semantic pairing of <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code>&lt;label&gt;</code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</p>

<p>It does not suffice to have plain text adjacent to the <code>&lt;input&gt;</code> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit {{HTMLElement("label")}}:</p>

<pre class="brush: html notranslate">&lt;!-- inaccessible --&gt;
&lt;p&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;

&lt;!-- implicit label --&gt;
&lt;p&gt;&lt;label&gt;Enter your name: &lt;input id="name" type="text" size="30"&gt;&lt;/label&gt;&lt;/p&gt;

&lt;!-- explicit label --&gt;
&lt;p&gt;&lt;label for="name"&gt;Enter your name: &lt;/label&gt;&lt;input id="name" type="text" size="30"&gt;&lt;/p&gt;</pre>

<p>The first example is inaccessible: no relationship exists between the prompt and the <code>&lt;input&gt;</code> element.</p>

<p>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <code>&lt;label&gt;</code> with an <code>&lt;input&gt;</code>, clicking on either one will focus the <code>&lt;input&gt;</code>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</p>

<p>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</p>

<h4 id="Placeholders_are_not_accessible" name="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4>

<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code>&lt;input&gt;</code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために必要なものであってはいけません。ラベルではありませんし、その代用として使用すべきではありません。プレイスホルダーは入力例を示すために使用されるものであり、説明やプロンプトではありません。プレイスホルダーは、読み上げソフトがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりする場合、プレイスホルダーはなくなります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップする、すなわち <code>placeholder</code> が翻訳されないことがあります。</p>

<div class="blockIndicator note">
<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code>&lt;input&gt;</code> 要素にラベルを付ける樋津陽があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p>
</div>

<h3 id="Client-side_validation" name="Client-side_validation">クライアント側検証</h3>

<p>In addition to using CSS to style inputs based on the {{cssxref(":valid")}} or {{cssxref(":invalid")}} UI states based on the current state of each input, as noted in the {{anch('UI pseudo-classes')}} section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.</p>

<p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code>&lt;input type="number" min="2" max="10" step="2"&gt;</code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p>

<p>For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the {{htmlattrxref("max")}} and {{htmlattrxref("min")}} properties to be reversed, which indicates that the range of permitted values starts at <code>min</code>, wraps around to the lowest possible value, then continues on until <code>max</code> is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:</p>

<pre class="brush: html notranslate">&lt;input type="time" min="20:00" max="08:00" name="overnight"&gt;</pre>

<p>Specific attributes and their values can lead to a specific error {{domxref('ValidityState')}}:</p>

<table class="standard-table">
 <caption>Validity object errors depend on the {{htmlelement('input')}} attributes and their values:</caption>
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">関連するプロパティ/th&gt;</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{anch('htmlattrdefmax', 'max')}}</td>
   <td>{{domxref('validityState.rangeOverflow')}}</td>
   <td>Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td>
   <td>{{domxref('validityState.tooLong')}}</td>
   <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefmin', 'min')}}</td>
   <td>{{domxref('validityState.rangeUnderflow')}}</td>
   <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefminlength', 'minlength')}}</td>
   <td>{{domxref('validityState.tooShort')}}</td>
   <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefpattern', 'pattern')}}</td>
   <td>{{domxref('validityState.patternMismatch')}}</td>
   <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefrequired', 'required')}}</td>
   <td>{{domxref('validityState.valueMissing')}}</td>
   <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdefstep', 'step')}}</td>
   <td>{{domxref('validityState.stepMismatch')}}</td>
   <td>The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error.</td>
  </tr>
  <tr>
   <td>{{anch('htmlattrdeftyoe', 'type')}}</td>
   <td>{{domxref('validityState.typeMismatch')}}</td>
   <td>Occurs when the value is not of the correct type, for example a email does not contain an <code>@</code> or a url doesn't contain a protocol.</td>
  </tr>
 </tbody>
</table>

<p>フォームコントロールに <code>required</code> 属性がない場合、値がない場合や空文字列出会った場合は無効にはなりません。 <code>required</code> 以外の上記の属性があった場合も、空文字列でエラーにはなりません。</p>

<p>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.</p>

<p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p>

<ul>
 <li>{{domxref('validityState.valueMissing')}}</li>
 <li>{{domxref('validityState.typeMismatch')}}</li>
 <li>{{domxref('validityState.patternMismatch')}}</li>
 <li>{{domxref('validityState.tooLong')}}</li>
 <li>{{domxref('validityState.tooShort')}}</li>
 <li>{{domxref('validityState.rangeUnderflow')}}</li>
 <li>{{domxref('validityState.rangeOverflow')}}</li>
 <li>{{domxref('validityState.stepMismatch')}}</li>
 <li>{{domxref('validityState.badInput')}}</li>
 <li>{{domxref('validityState.valid')}}</li>
 <li>{{domxref('validityState.customError')}}</li>
</ul>

<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p>

<p>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or <code>null</code>), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p>

<pre class="brush: js notranslate">function validate(input) {
  let validityState_object = input.validity;
  if(validityState_object.valueMissing) {
     input.setCustomValidity('A value is required');
  } else if (input.rangeUnderflow) {
    input.setCustomValidity('Your value is too low');
  } else if (input.rangeOverflow) {
    input.setCustomValidity('Your value is too high');
  } else {
    input.setCustomValidity('');
  }
}</pre>

<p>The last line, setting the custom validity message to the error string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is <code>null</code>.</p>

<h4 id="Example" name="Example">例</h4>

<p>フィールドの検査に失敗したときに、独自のエラーメッセージを表示させたい場合は、 <code>&lt;input&gt;</code> (および関連する) 要素で利用できる<a href="/ja/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">制約検証機能</a>を使用する必要があります。以下のような形を取ってください。</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="name"&gt;ユーザー名を入力してください (英大文字および小文字): &lt;/label&gt;
  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p>

<p>独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。</p>

<pre class="brush: js notranslate">const nameInput = document.querySelector('input');
const form = document.querySelector('form');

nameInput.addEventListener('input', () =&gt; {
  nameInput.setCustomValidity('');
  nameInput.checkValidity();
});

nameInput.addEventListener('invalid', () =&gt; {
  if(nameInput.value === '') {
    nameInput.setCustomValidity('名前を入力してください。');
  } else {
    nameInput.setCustomValidity('ユーザー名には英大文字と小文字のみが使えます。入力しなおしてください。');
  }
});</pre>

<p>この例は次のように表示されます。</p>

<p>{{EmbedLiveSample('Client-side_validation')}}</p>

<p>簡単に言えば、以下の通りです。</p>

<ul>
 <li>input 要素が妥当であるかの状態をチェックするために、値が変更されるたびに <code>checkValidity()</code> メソッドを <code>input</code> イベントハンドラーから呼び出します。</li>
 <li>値が妥当ではない場合、 <code>invalid</code> イベントが発行され、 <code>invalid</code> イベントのハンドラー関数が実行されます。この関数の中で、値が無効である原因が空欄であるためであるか、パターンに一致しないためであるかを確認し、 <code>if()</code> ブロックを使用して、独自の検証エラーメッセージを設定します。</li>
 <li>結果として、送信ボタンが押されたときに入力値が妥当ではない場合は、独自のエラーメッセージのうちの一つが表示されます。</li>
 <li>妥当である場合は、期待通りに送信されます。この場合、独自の検証は <code>setCustomValidity()</code> を空文字列で呼び出すことで中断されます。従って、 <code>input</code> イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に妥当な値を持っていたとしても、入力欄は無効であるとして登録されます。</li>
</ul>

<div class="blockIndicator note">
<p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p>
</div>

<div class="blockIndicator note">
<p><strong>メモ</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p>
</div>

<h3 id="Localization" name="Localization">ローカライゼーション</h3>

<p>&lt;input&gt; 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、ロケールによっては有効な数値は 1.000,00 です。</p>

<p>Firefox は (少なくとも <code>type="number"</code> において) ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。</p>

<ul>
 <li>当該要素または親要素の <code>lang</code>/<code>xml:lang</code> 属性で指定された言語</li>
 <li>HTTP の Content-Language ヘッダーで指定された言語</li>
 <li>何も指定されていない場合は、ブラウザーのロケール</li>
</ul>

<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、リスト化、サブミット可能、リセット可能、フォーム関連要素、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。{{htmlattrxref("type", "input")}} の値が <code>hidden</code> でない場合はラベル付け可能要素、知覚可能コンテンツ。</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>開始タグは必須。終了タグを記述してはなりません。</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td>
    <ul>
     <li><code>type=button</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
     <li><code>type=checkbox</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li>
     <li><code>type=email</code>
      <ul>
       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
      </ul>
     </li>
     <li><code>type=image</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
     <li><code>type=number</code>: {{ARIARole("spinbutton")}}</li>
     <li><code>type=radio</code>: {{ARIARole("radio")}}</li>
     <li><code>type=range</code>: {{ARIARole("slider")}}</li>
     <li><code>type=reset</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
     <li><code>type=search</code>
      <ul>
       <li>with no <code>list</code> attribute: {{ARIARole("searchbox")}}</li>
       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
      </ul>
     </li>
     <li><code>type=submit</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
     <li><code>type=tel</code>
      <ul>
       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
      </ul>
     </li>
     <li><code>type=text</code>
      <ul>
       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
      </ul>
     </li>
     <li><code>type=url</code>
      <ul>
       <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li>
       <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li>
      </ul>
     </li>
     <li><code>type=color|date|datetime-local|file|hidden|month|password|time|week</code>: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>
    <ul>
     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
     <li><code>type=checkbox</code>: {{ARIARole("button")}} when used with <code>aria-pressed</code>, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
     <li><code>type=text</code> with no <code>list</code> attribute: {{ARIARole("combobox")}}, {{ARIARole("searchbox")}}, {{ARIARole("spinbutton")}}</li>
     <li><code>type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week</code> または <code>text</code> に <code>list</code> 属性が付いたもの: 許可されている <code>role</code> なし</li>
    </ul>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLInputElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
   <td>{{Spec2('HTML Media Capture')}}</td>
   <td><code>capture</code> 属性を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-input-element', '&lt;input&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<h3 id="Labels_2" name="Labels_2">ラベル</h3>

<p>When including inputs, it is an accessibilty requirement to add labels along side. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see {{anch("Labels")}} .</p>

<p>次の例は、上記の形で <code>&lt;label&gt;</code> を <code>&lt;input&gt;</code> 要素に関連付ける方法の例です。 <code>&lt;input&gt;</code> に <code>id</code> 属性を設定する必要があります。そして <code>&lt;label&gt;</code> には入力欄の <code>id</code> と同じ値を持つ <code>for</code> 属性が必要になります。</p>

<pre class="notranslate">&lt;label for="peas"&gt;Do you like peas?&lt;/label&gt;
&lt;input type="checkbox" name="peas" id="peas"&gt;
</pre>

<h3 id="Size" name="Size">大きさ</h3>

<p>フォーム入力欄のような対話型要素は、簡単に有効化できるだけの大きさを持たせてください。これにより、手足の不自由な人や、スタイラスや指のような精度の低い入力方法を使用している人など、様々な人にとって有用です。対話型の大きさとしては、 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a> を最小値とすることが推奨されています。</p>

<ul>
 <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li>
 <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li>
 <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li>
</ul>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<div>{{Compat("html.elements.input")}}</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">フォーム制約検証</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームを構成する方法</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブのフォームウィジェット</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS property compatibility table</a></li>
</ul>