diff options
Diffstat (limited to 'files/ja/web/html/element/input/index.md')
| -rw-r--r-- | files/ja/web/html/element/input/index.md | 1365 |
1 files changed, 1365 insertions, 0 deletions
diff --git a/files/ja/web/html/element/input/index.md b/files/ja/web/html/element/input/index.md new file mode 100644 index 0000000000..a045573951 --- /dev/null +++ b/files/ja/web/html/element/input/index.md @@ -0,0 +1,1365 @@ +--- +title: '<input>: 入力欄 (フォーム入力) 要素' +slug: Web/HTML/Element/input +tags: + - Data entry + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - HTML フォーム + - HTML:フローコンテンツ + - HTML:対話型コンテンツ + - HTML:記述コンテンツ + - Input + - MakeBrowserAgnostic + - Reference + - Web + - ウェブ + - データ入力 + - フォーム + - 要素 +translation_of: Web/HTML/Element/input +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の <strong><code><input></code> 要素</strong>は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末と{{Glossary("user agent", "ユーザーエージェント")}}によりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。</span> <code><input></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="input_types"><input> の型</h2> + +<p><code><input></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> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/button", "button")}}</td> + <td>プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。</td> + <td id="examplebutton"> + <pre class="brush: html hidden"> +<input type="button" name="button" /></pre> + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/checkbox", "checkbox")}}</td> + <td>チェックボックスで、選択または未選択のうちひとつの値をとることができます。</td> + <td id="examplecheckbox"> + <pre class="brush: html hidden"> +<input type="checkbox" name="checkbox"/></pre> + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/color", "color")}}</td> + <td>色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。</td> + <td id="examplecolor"> + <pre class="brush: html hidden"> +<input type="color" name="color"/></pre> + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。</td> + <td id="exampledate"> + <pre class="brush: html hidden"> +<input type="date" name="date"/></pre> + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。</td> + <td id="exampledtl"> + <pre class="brush: html hidden"> +<input type="datetime-local" name="datetime-local"/></pre> + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/email", "email")}}</td> + <td>電子メールアドレスを編集するための欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td> + <td id="exampleemail"> + <pre class="brush: html hidden"> +<input type="email" name="email"/></pre> + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/file", "file")}}</td> + <td>ユーザーがファイルを選択するコントロールです。 {{anch('htmlattrdefaccept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。</td> + <td id="examplefile"> + <pre class="brush: html hidden"> +<input type="file" accept="image/*, text/*" name="file"/></pre> + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/hidden", "hidden")}}</td> + <td>表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。</td> + <td><input id="userId" name="userId" type="hidden" value="abc123"></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"> +<input type="image" name="image" src="" alt="image input"/></pre> + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>タイムゾーン情報がない年と月を入力するためのコントロールです。</td> + <td id="examplemonth"> + <pre class="brush: html hidden"> +<input type="month" name="month"/></pre> + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。</td> + <td id="examplenumber"> + <pre class="brush: html hidden"> +<input type="number" name="number"/></pre> + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/password", "password")}}</td> + <td>入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。</td> + <td id="examplepassword"> + <pre class="brush: html hidden"> +<input type="password" name="password"/></pre> + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/radio", "radio")}}</td> + <td>ラジオボタンで、同じ {{anch('htmlattrdefname', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。</td> + <td id="exampleradio"> + <pre class="brush: html hidden"> +<input type="radio" name="radio"/></pre> + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</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"> +<input type="range" name="range" min="0" max="25"/></pre> + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/reset", "reset")}}</td> + <td>フォームのコントロールを既定値に初期化するボタンです。推奨しません。</td> + <td id="examplereset"> + <pre class="brush: html hidden"> +<input type="reset" name="reset"/></pre> + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/search", "search")}}</td> + <td>検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、 Enter キーの代わりに検索アイコンを表示します。</td> + <td id="examplesearch"> + <pre class="brush: html hidden"> +<input type="search" name="search"/></pre> + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/submit", "submit")}}</td> + <td>フォームを送信するボタンです。</td> + <td id="examplesubmit"> + <pre class="brush: html hidden"> +<input type="submit" name="submit"/></pre> + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/tel", "tel")}}</td> + <td>電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。</td> + <td id="exampletel"> + <pre class="brush: html hidden"> +<input type="tel" name="tel"/></pre> + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/text", "text")}}</td> + <td>既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。</td> + <td id="exampletext"> + <pre class="brush: html hidden"> +<input type="text" name="text"/></pre> + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>タイムゾーン情報がない時刻を入力するためのコントロールです。</td> + <td id="exampletime"> + <pre class="brush: html hidden"> +<input type="time" name="time"/></pre> + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/url", "url")}}</td> + <td>URL を入力するための入力欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td> + <td id="exampleurl"> + <pre class="brush: html hidden"> +<input type="url" name="url"/></pre> + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。</td> + <td id="exampleweek"> + <pre class="brush: html hidden"> +<input type="week" name="week"/></pre> + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td> + </tr> + <tr> + <th colspan="3">廃止された値</th> + </tr> + <tr> + <td>{{HTMLElement("input/datetime", "datetime")}}</td> + <td>{{deprecated_inline}} {{obsolete_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。</td> + <td id="exampledatetime"> + <pre class="brush: html hidden"> +<input type="datetime" name="datetime"/></pre> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">属性</h2> + +<p><code><input></code> 要素は属性があるためたいへん強力です。上記の例で説明している {{htmlattrxref("type", "input")}} 属性が最も重要です。すべての <code><input></code> 要素が、 {{domxref("HTMLInputElement")}} インターフェイスに基づいているため、、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性は一部の特定の入力型にのみ影響を与えます。さらに、属性によっては入力欄に影響を及ぼす方法が入力型によって異なり、入力型によって異なる方法で影響を与えることがあります。</p> + +<p>この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。 <code><input></code> に関連して特に重要な属性は強調表示されています。</p> + +<table class="standard-table"> + <caption>{{htmlelement('input')}} 要素の属性で、 <a href="/ja/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>最初、 HTML で明確に指定された場合は初期値。もっと一般的には、このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される。</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="Individual_attributes">個々の属性</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> ボタンに対してのみ有効です。 <code>alt</code> 属性は画像の代替テキストを提供し、 <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><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 --> +</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><input></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><form></code> 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 <code><input></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="htmlattrdefid">{{htmlattrdef("id")}}</dt> + <dd> + <p>すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の <code>for</code> 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。</p> + </dd> + <dt id="htmlattrdefinputmode">{{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><datalist></code> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。</p> + + <pre class="brush: html hidden"><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></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> は、設定されている場合、 email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また <code>file</code> 入力欄では複数のファイルを選択することができることを意味します。 {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt> + <dd> + <p>入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。</p> + + <h5 id="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><input></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 とラジオボタン</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">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>。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。</p> + + <div class="note"> + <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は<a href="#label">ラベル</a>を参照してください。</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 属性: <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>詳しくは{{anch("Client-side validation", "クライアント側検証")}}および <a href="/ja/docs/Web/HTML/Attributes/required">HTML 属性: <code>required</code></a> を参照してください。</p> + </dd> + <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt> + <dd><code>email</code>, <code>password</code>, <code>tel</code>, <code>text</code> の <code>input</code> 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、 CSS の <code>width</code> プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。 <code>password</code> や <code>text</code> の場合は文字数 (または <code>em</code> 単位) で既定値は <code>20</code>、それ以外の場合はピクセルとなります。 CSS の width は size 属性よりも優先されます。</dd> + <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt> + <dd> + <p><code>image</code> 入力ボタンにのみ有効で、 <code>src</code> は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt> + <dd> + <div id="step-include"> + <p>数値入力型、例えば <code>number</code>、日付／時刻入力型、 <code>range</code> 型で有効です。 <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性は、値が準拠すべき粒度を指定する数値です。</p> + + <p>明示的に指定しない場合は次のようになります。</p> + + <ul> + <li><code>number</code> と <code>range</code> の場合、 <code>step</code> の既定値は 1 です。</li> + <li>日付や時刻の入力型では、 <code>step</code> は秒単位の表現となり、<strong>既定の step は 60 秒</strong>になります。 step の係数は 1000 です (他のアルゴリズムの場合と同様、秒からミリ秒へ変換します)。</li> + </ul> + + <p>値は、正の整数または浮動小数点実数、または特殊な値 <code>any</code> のいずれかでなければなりません。これは、刻みが考慮されず、あらゆる値が許容されることを意味します (<code>{{anch("min")}}</code> や <code>{{anch("max")}}</code> などの他の制約がない場合)。</p> + + <p><code>any</code> が明示的に設定されていない場合、 <code>number</code>、日付/時刻、 <code>range</code> の各入力型の妥当な値は、刻みの基数と等しくなります。すなわち <code>{{anch("min")}}</code> の値と、そこから step 値単位で増加させたもの (指定されている場合は <code>{{anch("max")}}</code> まで) です。</p> + + <p>例えば、 <code><input type="number" min="10" step="2"></code> とすると、 <code>10</code> 以上の偶数の整数であればすべて妥当となります。 <code><input type="number"></code> のように省略された場合は、整数であれば何でも妥当ですが、浮動小数点実数 (<code>4.2</code> など) は <code>step</code> の既定値が <code>1</code> なので妥当ではありません。 <code>4.2</code> を妥当にするためには、 <code>step</code> に <code>any</code>、0.1、0.2 に設定するか、 <code>min</code> の値を <code>.2</code> で終わる数に (例えば <code><input type="number" min="-5.2"></code> に) 設定する必要があります。</p> + + <div class="note"> + <p><strong>注:</strong> ユーザーが入力したデータが刻みの設定に従っていない場合、その値は制約検証で無効とみなされ、 <code>:invalid</code> 擬似クラスに一致するようになります。</p> + </div> + </div> + + <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p> + </dd> + <dt id="htmlattrdeftabindex">{{htmlattrdef("tabindex")}}</dt> + <dd> + <p>すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。 hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。</p> + </dd> + <dt id="htmlattrdeftitle">{{htmlattrdef('title')}}</dt> + <dd> + <p>すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。 title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに {{htmlelement('label')}} 要素を使用し、その <code>for</code> 属性でフォームコントロールの {{htmlattrdef('id')}} 属性を指すようにしてください。下記の{{anch("Labels", "ラベル")}}を参照してください。</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt> + <dd> + <p>文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 <code>checkbox</code> の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に <code>text</code> が使用され、テキストの入力欄が生成されます。</p> + + <p>許可されている値は{{anch("<input> types", "<input> の型")}}にあります。</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><code>image</code> 入力ボタンにのみ有効で、 <code>width</code> にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p> + </dd> +</dl> + +<h3 id="Non-standard_attributes">標準外の属性</h3> + +<p>一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。</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>自動補完が <code>on</code> であるか <code>off</code> であるかを示す文字列です。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>ユーザーがフィールドの値を編集している途中にライブで検索結果を更新できるように、 {{domxref("HTMLInputElement/search_event", "search")}} イベントを繰り返し送信するかどうかを設定します。 <strong>WebKit および Blink のみ (Safari, Chrome, Opera, など)。</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>文字列で、ユーザーがフィールドの編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押したときに実行されるアクションの種類を示す文字列です。仮想キーボード上で、そのキーに対応する適切なラベルを決定するために使用されます。 <strong>Android 版 Firefox のみ</strong>。</td> + </tr> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>範囲のスライダーの向きを設定します。 <strong>Firefox のみ</strong>。</td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>以前の検索クエリーのドロップダウンリストに表示する項目の最大数です。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>論理属性で、ユーザーがディレクトリー (または <code>{{anch("multiple")}}</code> も存在すれば複数のディレクトリー) を選択できるようにするかどうかを示します。</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("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd>{{page("/ja/docs/Web/HTML/Element/input/range", "orient-include")}}</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>{{page("/ja/docs/Web/HTML/Element/input/search", "results-include")}}</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>{{page("/ja/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd> +</dl> + +<h2 id="Methods">メソッド</h2> + +<p>以下のメソッドは DOM 内で <code><input></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><input></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>置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、 UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、 input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。</p> + +<h3 id="UI_pseudo-classes">UI 擬似クラス</h3> + +<table class="standard-table"> + <caption>{{htmlelement("input")}} 要素に関連する説明</caption> + <thead> + <tr> + <th>擬似クラス</th> + <th>説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Cssxref(":enabled")}}</td> + <td>現在有効な要素で、アクティブ化 (選択、クリック、入力など) またはフォーカスを受け受け取ることができ、無効な状態、すなわちアクティブ化やフォーカスを受け取ることができない状態を持つものです。</td> + </tr> + <tr> + <td>{{Cssxref(":disabled")}}</td> + <td>現在無効な要素で、有効な状態、すなわち無効化されていなければアクティブ化 (選択、クリック、入力など) やフォーカス��受け取ることができる状態になることができるものです。</td> + </tr> + <tr> + <td>{{Cssxref(":read-only")}}</td> + <td>ユーザーが編集することができない要素</td> + </tr> + <tr> + <td>{{Cssxref(":read-write")}}</td> + <td>ユーザーが編集できる要素です。</td> + </tr> + <tr> + <td>{{Cssxref(":placeholder-shown")}}</td> + <td>現在<a href="/ja/docs/Web/HTML/Element/input#attr-placeholder">プレイスホルダーのテキスト</a>を表示している要素で、 {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素に {{anch('htmlattrdefplaceholder', 'placeholder')}} 属性が付いていて、まだ値がないものを含みます。</td> + </tr> + <tr> + <td>{{Cssxref(":default")}}</td> + <td>関連する要素のグループの中で、既定となるフォーム要素です。 {{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、ページの読み込み時やレンダリング時にチェックされていたものに一致します。</td> + </tr> + <tr> + <td>{{Cssxref(":checked")}}</td> + <td>{{HTMLElement("input/checkbox", "checkbox")}} や {{HTMLElement("input/radio", "radio")}} の入力型のうち、現在チェックされている (また {{HTMLElement("select")}} の {{HTMLElement("option")}} のうち現在選択されているもの) に一致します。</td> + </tr> + <tr> + <td>{{Cssxref(":indeterminate")}}</td> + <td>{{HTMLElement("input/checkbox", "checkbox")}} 要素で indeterminate プロパティが JavaScript から true に設定されている場合、 {{HTMLElement("input/radio", "radio")}} 要素で同じ name の値を持つすべてのラジオボタンがチェックされていない場合、 {{HTMLElement("progress")}} 要素が indeterminate の状態にある場合</td> + </tr> + <tr> + <td>{{Cssxref(":valid")}}</td> + <td>フォームコントロールのうち、制約検証が適用でき、現在妥当であるもの。</td> + </tr> + <tr> + <td>{{Cssxref(":invalid")}}</td> + <td>制約条件の検証が適用され、現在妥当ではないフォームコントロール。 {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}}, {{anch('htmlattrdefmax', 'max')}} などの属性で設定された制約条件に値が適合しないフォームコントロールに一致します。</td> + </tr> + <tr> + <td>{{Cssxref(":in-range")}}</td> + <td>空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性、および {{anch('htmlattrdefstep', 'step')}} 属性で指定された範囲内にあるもの。</td> + </tr> + <tr> + <td>{{Cssxref(":out-of-range")}}</td> + <td>空でない入力欄のうち、現在の値が {{anch('htmlattrdefmin', 'min')}} および {{anch('htmlattrdefmax', 'max')}} 属性の範囲内にないか、 {{anch('htmlattrdefstep', 'step')}} の制約に準拠していないもの。</td> + </tr> + <tr> + <td>{{Cssxref(":required")}}</td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されているもの。必須になる要素のみに一致します。必須にならない要素にこの属性を設定しても、一致するようにはなりません。</td> + </tr> + <tr> + <td>{{Cssxref(":optional")}}</td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素で、 {{ htmlattrxref("required", "input")}} 属性が設定されていないもの。必須になることがない属性には一致しません。</td> + </tr> + <tr> + <td>{{Cssxref(":blank")}}</td> + <td>{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素のうち現在値がないものです。</td> + </tr> + <tr> + <td>{{Cssxref(":user-invalid")}}</td> + <td><code>:invalid</code> と似ていますが、フォーカスを失ったときに適用されます。無効な入力欄に一致しますが、コントロールにフォーカスが移動したり、コントロールから離れたり、無効なコントロールを含むフォームを送信しようとしたときなど、ユーザーの操作があって初めて一致します。</td> + </tr> + </tbody> +</table> + +<h4 id="Examples">例</h4> + +<p>チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル付けすることができます。この例では、 {{cssxref('color')}} と {{cssxref('font-weight')}} でチェックされたボックスの直後にある {{htmlelement('label')}} をスタイル付けしています。 <code>input</code> がチェックされていない場合はスタイルを適用しません。</p> + +<div id="checkbox_label"> +<pre class="brush: html hidden"><input id="checkboxInput" type="checkbox"> +<label for="checkboxInput">このチェックボックスのオンとオフを切り替えてください</label> +</pre> + +<pre class="brush: css">input:checked + label { + color: red; + font-weight: bold; +} +</pre> + +<p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p> +</div> + +<h3 id="Attribute_selectors"">属性セレクター</h3> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a>を使用すると、様々なフォームコントロールの型のターゲットを {{anch('htmlattrdeftype', 'type')}} に基づいて絞ることができます。 CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。</p> + +<pre class="brush: css">/* password 入力欄に一致 */ +input[type="password"] {} + +/* 妥当な値の範囲が限定されているフォームコントロールに一致 */ +input[min][max] {} + +/* pattern 属性の付いたフォームコントロールに一致 */ + input[pattern] {}</pre> + +<h3 id="placeholder">::placeholder</h3> + +<p>既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。 {{cssxref('::placeholder')}} 擬似要素は入力欄の <a href="/ja/docs/Learn/Forms#the_placeholder_attribute">プレイスホルダーのテキスト</a>です。これは限定された CSS プロパティでスタイル付けすることができます。</p> + +<pre class="brush: css no-line-numbers">::placeholder { + color: blue; +}</pre> + +<p>{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに <code>::placeholder</code> を使用した規則で使用することができます。</p> + +<h3 id="appearance">appearance</h3> + +<p>{{cssxref("appearance")}} プロパティは、 (ほぼ) あらゆる要素をオペレーティングシステムのテーマに基づいたプラットフォームのネイティブのスタイルで表示したり、 <code>none</code> の値でプラットフォームのネイティブのスタイルを削除したりすることができます。</p> + +<p><code><div></code> に <code>div {appearance: radio;}</code> を設定してラジオボタンのように見せたり、 <code>[type="checkbox] {appearance: checkbox;}</code> でチェックボックスのように見せたりすることができますが、やらないでください。</p> + +<p><code>appearance: none</code> を設定するとプラットフォームのネイティブの境界が削除されますが、機能は削除されません。</p> + +<h3 id="caret-color">caret-color</h3> + +<p>テキスト入力関連要素に特有のプロパティとして CSS の {{cssxref("caret-color")}} プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="textInput">赤いキャレットに注意:</label> +<input id="textInput" class="custom" size="32"> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input.custom { + caret-color: red; + font: 16px "Helvetica", "Arial", "sans-serif" +} +</pre> + +<h4 id="Result">結果</h4> + +<p>{{EmbedLiveSample('caret-color', 500, 80)}}</p> + +<h3 id="object-position_and_object-fit">object-position と object-fit</h3> + +<p><code><input></code> 要素は特定の場合 (多くはテキスト以外の入力や特殊なインターフェイス) には、<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>になることがあります。その場合、 CSS の {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティを使って、要素の枠内での大きさと位置を調整することができます。</p> + +<h3 id="Styling">スタイル付け</h3> + +<p>HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。</p> + +<ul> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li> +</ul> + +<p>こちらも参照してください。</p> + +<ul> + <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">HTML フォームへのスタイル設定</a>、<a href="/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定</a>、</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls"> フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h2 id="Additional_features">追加機能</h2> + +<h3 id="Labels">ラベル</h3> + +<p>ラベルは支援テキストを <code><input></code> に関連付けるために必要です。 {{HTMLElement("label")}} 要素は、フォームの入力欄を説明するために、 (レイアウト方法はさておき) <em>常に</em>適切な手段です。 <code><label></code> を使用して <code><input></code> や {{HTMLElement("textarea")}} に何を入力するべきかを説明することは、決して悪い考えではありません。</p> + +<h4 id="Associated_labels">関連付けられたラベル</h4> + +<p><code><input></code> 要素と <code><label></code> 要素を意味的に連携させると、読み上げアプリなどの支援技術に役立ちます。 <code><label></code> の {{htmlattrxref("for", "label")}} 属性を使って連携させることで、ラベルと入力欄を結び付け、読み上げアプリがユーザーに入力欄についてより正確に説明できるようになります。</p> + +<p><code><input></code> 要素にプレーンテキストが隣接しているだけでは十分ではありません。ユーザビリティとアクセシビリティのためには、暗黙的または明示的な {{HTMLElement("label")}} を含めることが必要です。</p> + +<pre class="brush: html"><!-- アクセシブルではない --> +<p>名前を入力してください: <input id="name" type="text" size="30"></p> + +<!-- 暗黙的なラベル --> +<p><label>名前を入力してください: <input id="name" type="text" size="30"></label></p> + +<!-- 明示的なラベル --> +<p><label for="name">名前を入力してください: </label><input id="name" type="text" size="30"></p></pre> + +<p>最初の例は、プロンプトと <code><input></code> 要素の間に関係がないため、アクセシブルではありません。</p> + +<p>ラベルはアクセシブルな名前を提供するばかりではなく、マウスやタッチパネルのユーザーがクリックしたりタッチしたりする際に、「ヒット」領域を拡大することができます。 <code><label></code> と <code><input></code> を連携させることで、どちらかをクリックすると <code><input></code> にフォーカスが当たります。入力欄の「ラベル」にプレーンテキストを使用した場合、このようなことは起こりません。入力欄のアクティベーション領域にプロンプト部分が含まれていると、運動制御の条件を持つ人には便利です。</p> + +<p>ウェブ開発者として大切なのは、私たちが知っていることを、人々がすべて知っていると思わないことです。ウェブを利用する人々に多様性があるということは、自分のウェブサイトにも及ぶことですが、サイトの訪問者の中には、思考プロセスや状況に何らかの違いがあり、明確で適切なラベルがなければ、あなたのフォームをあなたとは全く異なるように解釈する人がいるということでもあります。</p> + +<h4 id="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4> + +<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code><input></code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために決して必要なものではありません。プレイスホルダーはラベルではありませんので、代用として使用してはいけません。プレイスホルダーは、入力された値がどのように見えるかのヒントを提供するために使用されるもので、説明やプロンプトではありません。</p> + +<p>プレイスホルダーは、読み上げアプリがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりした場合、プレイスホルダーは非表示になります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップすることがあります。すなわち <code>placeholder</code> は翻訳されないことがあります。</p> + +<div class="notecard note"> +<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code><input></code> 要素にラベルを付ける必要があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p> +</div> + +<h3 id="Client-side_validation">クライアント側検証</h3> + +<div class="notecard warning"> +<p><strong>警告:</strong> クライアント側の検証は便利ですが、サーバーが妥当なデータを受け取ることを保証するものではありません。データが特定の形式でなければならない場合は、必ずサーバー側でも検証を行い、形式が無効な場合は <a href="/ja/docs/Web/HTTP/Status/400">HTTP の 400 レスポンス</a>を返してください。</p> +</div> + +<p>上記の {{anch('UI pseudo-classes', 'UI 擬似クラス')}}の節で述べたように、 CSS を用いて、それぞれの入力欄の現在の状態に基づく {{cssxref(":valid")}} または {{cssxref(":invalid")}} の UI 状態に基づいて入力欄にスタイル付けをすることに加え、フォームを送信 (しようと) したときに、ブラウザーはクライアント側の検証を行います。フォームを送信する時に、制約検証に不合格になったフォームコントロールがある場合、対応しているブラウザーは、最初の無効なフォームコントロールにエラーメッセージを表示します。エラー種別に基づいた既定のメッセージを表示したり、ユーザーが設定したメッセージを表示したりします。</p> + +<p>一部の入力型やその他の属性によっては、入力に対して妥当な値を制限するものがあります。例えば、 <code><input type="number" min="2" max="10" step="2"></code> の場合、2、4、6、8、10 の数値のみが妥当になります。値が 2 より小さい場合は <code>rangeUnderflow</code> エラー、 10 より大きい場合は <code>rangeOverflow</code>、値が 2 から 10 の間の数字で偶数の整数でない (<code>step</code> 属性の要件に合わない) 場合は <code>typeMismatch</code>、値が数字でない場合は <code>typeMismatch</code> など、いくつかの種類のエラーが発生する可能性があります。</p> + +<p>可能な値の範囲が周期的な (つまり、値が取りうる最大値で終了するのではなく、最初に戻る) 入力型では、 {{htmlattrxref("max")}} プロパティと {{htmlattrxref("min")}} プロパティの値を逆にして、許可される値の範囲が <code>min</code> から始まり、可能な最小値まで回り込んで、 <code>max</code> に達するまで続くことを示すことが可能です。これは日付や時刻の場合、例えば午後 8 時から午前 8 時までの範囲を許可したい場合などに特に便利です。</p> + +<pre class="brush: html"><input type="time" min="20:00" max="08:00" name="overnight"></pre> + +<p>決まった属性と値の組み合わせが、 {{domxref('ValidityState')}} の決まったエラーを発生させます。</p> + +<table class="standard-table"> + <caption>{{htmlelement('input')}} の属性とその値による検証オブジェクトエラー</caption> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">関連するプロパティ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>{{domxref('validityState.rangeOverflow')}}</td> + <td>値が <code>max</code> 属性で定義された最大値よりも大きい場合に発生する</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>{{domxref('validityState.tooLong')}}</td> + <td><code>maxlength</code> プロパティで許可された値よりも文字数が多い場合に発生する</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>{{domxref('validityState.rangeUnderflow')}}</td> + <td>値が <code>min</code> 属性で定義された最小値よりも小さい場合には発生する</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>{{domxref('validityState.tooShort')}}</td> + <td><code>minlength</code> プロパティで必要とされる値よりも文字数が少ない場合に発生する</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>{{domxref('validityState.patternMismatch')}}</td> + <td>pattern 属性に妥当な正規表現が設定されており、 <code>value</code> がそれに一致しない場合に発生する。</td> + </tr> + <tr> + <td>{{anch('htmlattrdefrequired', 'required')}}</td> + <td>{{domxref('validityState.valueMissing')}}</td> + <td><code>required</code> 属性があるにもかかわらず、値が <code>null</code> であるか、ラジオボタンやチェックボックスがチェックされていない場合に発生する。</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>{{domxref('validityState.stepMismatch')}}</td> + <td>値が step の増分に一致していない。増分の既定値は <code>1</code> であるため、 <code>type="number"</code> で step が指定されていない場合は整数のみが妥当になります。 <code>step="any"</code> ではこのエラーは発生しません。</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftyoe', 'type')}}</td> + <td>{{domxref('validityState.typeMismatch')}}</td> + <td>値が正しい型ではない場合、例えばメールアドレスに <code>@</code> が含まれていない場合や、 URL にプロトコルが含まれていない場合に発生します。</td> + </tr> + </tbody> +</table> + +<p>フォームコントロールに <code>required</code> 属性がない場合、値がないことや空文字列は無効にはなりません。 <code>required</code> 以外の上記の属性があった場合も、空文字列でエラーにはなりません。</p> + +<p>どのような値を受け入れることができるかの制限を設けることができるので、対応しているブラウザーはこれらのフォームの値をネイティブに検証し、フォームの送信時に誤りがある場合はユーザーに警告を発します。</p> + +<p>上記の表で説明したエラーに加え、 <code>validityState</code> インターフェイスには <code>badInput</code>, <code>valid</code>, <code>customError</code> の boolean の読み取り専用プロパティがあります。検証オブジェクトに含まれるのは次の通りです。</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>これらの Boolean プロパティではそれぞれ、 <code>true</code> の値で指定された観点の検証に合格しなかった可能性があることを示しますが、 <code>valid</code> プロパティは例外で、その要素の値がすべての検証に合格したときに <code>true</code> になります。</p> + +<p>エラーがあった場合、対応しているブラウザーでは、ユーザーに警告するとともに、フォームの送信を阻止します。注意点としては、独自のエラーに真とみなされる値 (空の文字列や <code>null</code> 以外) が設定されていると、フォームの送信が阻止されます。独自のエラーメッセージがなく、他のどのプロパティも true を返さない場合、 <code>valid</code> は true となり、フォームは送信されます。</p> + +<pre class="brush: js">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>最後の行、独自の検証メッセージをエラー文字列に設定することが重要です。ユーザーがエラーを起こし、 validity が設定されている場合、すべての値が妥当であっても、メッセージが <code>null</code> になるまで送信に失敗します。</p> + +<h4 id="Example">例</h4> + +<p>フィールドの検査に不合格になった場合に独自のエラーメッセージを表示させたい場合は、 <code><input></code> (および関連する) 要素で利用できる<a href="/ja/docs/Web/API/Constraint_validation#constraint_validation_interfaces">制約検証機能</a>を使用する必要があります。以下のような形を取ってください。</p> + +<pre class="brush: html notranslate"><form> + <label for="name">ユーザー名を入力してください (英大文字および小文字): </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Submit</button> +</form></pre> + +<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、妥当な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p> + +<p>独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。</p> + +<pre class="brush: js">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +nameInput.addEventListener('invalid', () => { + 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="notecard note"> + <p><strong>注:</strong> 常に、クライアント側とサーバー側の両方で入力値の制約を検証するようにしてください。制約検証は、<em>サーバー側</em>での検証の必要性をなくすものではありません。古いブラウザーや悪意のある人物によって、無効な値が送信される可能性があります。</p> +</div> + +<div class="notecard note"> +<p><strong>注</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p> +</div> + +<h3 id="Localization">ローカライズ</h3> + +<p><input> 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 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> + +<h3 id="Technical_summary">技術的概要</h3> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、リスト化、サブミット可能、リセット可能、フォーム関連要素、<a href="/ja/docs/Web/Guide/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/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <ul> + <li><code>type=button</code>: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=checkbox</code>: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li><code>type=email</code> + <ul> + <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li><code>list</code> 属性がある場合: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=image</code>: <code><a href="/ja/docsWeb/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="/ja/docsWeb/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=search</code> + <ul> + <li><code>list</code> 属性がない場合: {{ARIARole("searchbox")}}</li> + <li><code>list</code> 属性がある場合: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=submit</code>: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=tel</code> + <ul> + <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li><code>list</code> 属性がある場合: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=text</code> + <ul> + <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li><code>list</code> 属性がある場合: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=url</code> + <ul> + <li><code>list</code> 属性がない場合: <code><a href="/ja/docsWeb/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li><code>list</code> 属性がある場合: {{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> で <code>list</code> 属性がない場合: {{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', '<input>')}}</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', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Labels_2">ラベル</h3> + +<p>入力欄を設定する際、ラベルを一緒に付けることがアクセシビリティ上の要件です。これは、支援技術を使っている人が、何のための入力なのかを知るために必要です。また、ラベルをクリックまたはタッチすると、ラベルに関連付けられたフォームコントロールにフォーカスが設定されます。これにより、目の不自由なユーザーのアクセシビリティとユーザビリティが向上し、ユーザーがクリックまたはタッチしてフォームコントロールを起動できる領域が増えます。この機能は、ラジオボタンやチェックボックスのような小さなフォームコントロールに特に便利です。ラベルの詳細については、{{anch("Labels", "ラベル")}}を参照してください。</p> + +<p>次の例は、上記の形で <code><label></code> を <code><input></code> 要素に関連付ける方法の例です。 <code><input></code> に <code>id</code> 属性を設定する必要があります。そして <code><label></code> には入力欄の <code>id</code> と同じ値を持つ <code>for</code> 属性が必要になります。</p> + +<pre><label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas"> +</pre> + +<h3 id="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">ブラウザーの互換性</h2> + +<div>{{Compat("html.elements.input")}}</div> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">フォーム制約検証</a></li> + <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームを構成する方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブのフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性一覧表</a></li> +</ul> |