diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/html/attributes | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/html/attributes')
| -rw-r--r-- | files/ja/web/html/attributes/accept/index.html | 171 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/autocomplete/index.html | 272 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/crossorigin/index.html | 104 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/index.html | 769 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/max/index.html | 166 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/maxlength/index.html | 59 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/min/index.html | 158 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/minlength/index.html | 72 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/multiple/index.html | 185 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/pattern/index.html | 163 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/required/index.html | 109 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/size/index.html | 76 | ||||
| -rw-r--r-- | files/ja/web/html/attributes/step/index.html | 132 |
13 files changed, 2436 insertions, 0 deletions
diff --git a/files/ja/web/html/attributes/accept/index.html b/files/ja/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..13a18b8313 --- /dev/null +++ b/files/ja/web/html/attributes/accept/index.html @@ -0,0 +1,171 @@ +--- +title: 'HTML 属性: accept' +slug: Web/HTML/Attributes/accept +tags: + - Accept + - Attribute + - File + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/accept +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><span class="seoSummary"><strong><code>accept</code></strong> 属性は、値としてカンマ区切りでファイル種別または{{anch("Unique file type specifiers", "固有ファイル種別指定子")}}を取り、どのファイル種別を受け入れるかを記述します。</span> accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。</p> + +<p>与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。</p> + +<p>例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは <code><input></code> を次のように使用するかもしれません。</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<p>一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。</p> + +<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*"> +<input type="file" id="videoFile" accept="video/*"> +<input type="file" id="imageFile" accept="image/*"></pre> + +<p><code>accept</code> 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。</p> + +<p>このため、期待される要件をサーバー側で検証するようにしてください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。</p> + +<div id="simple_example"> +<pre class="brush: html notranslate"><p> + <label for="soundFile">Select an audio file:</label> + <input type="file" id="soundFile" accept="audio/*"> + </p> + <p> + <label for="videoFile">Select a video file:</label> + <input type="file" id="videoFile" accept="video/*"> + </p> + <p> + <label for="imageFile">Select some images:</label> + <input type="file" id="imageFile" accept="image/*" multiple> + </p></pre> + +<p>{{EmbedLiveSample('simple_example', '100%', 200)}}</p> + +<p>なお、最後の例では複数の画像を選択することができます。詳しくは <code><a href="multiple">multiple</a></code> 属性を参照してください。</p> +</div> + +<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル種別指定子</h2> + +<p><strong>固有ファイル種別指定子</strong>は文字列で、ユーザーが {{HTMLElement("input")}} 要素の <code>file</code> 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。</p> + +<ul> + <li>ピリオド (".") 文字から始まる有効なファイル拡張子で、大文字小文字の区別をしないもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> などです。</li> + <li>有効な MIME タイプの文字列で、拡張子なしのもの。</li> + <li>文字列 <code>audio/*</code> は「任意の音声ファイル」を意味します。</li> + <li>文字列 <code>video/*</code> は「任意の映像ファイル」を意味します。</li> + <li>文字列 <code>image/*</code> は「任意の画像ファイル」を意味します。</li> +</ul> + +<p><code>accept</code> 属性は、カンマ区切りの1つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Using_file_inputs" name="Using_file_inputs">file 入力の使用</h2> + +<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose file to upload</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>これは次のような出力を生成します。</p> + +<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub でも見ることができます。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p> +</div> + +<p>ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。</p> + +<p>上記のように <code><a href="multiple">multiple</a></code> 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、<kbd>Shift</kbd> キーまたは <kbd>Control</kbd> キーを押しながらクリックするなど)。 <code><input></code> ごとに1つのファイルのみを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p> + +<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル種別の制限</h3> + +<p>多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p> + +</p><p>許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。</p> + +<ul> + <li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付ける。</li> + <li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付ける。</li> + <li><code>accept="image/*"</code> — <code>image/*</code> MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。)</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思しきすべてのファイルを受け付ける。</li> +</ul> + +<p>もっと完全な例を見てみましょう。</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choose file to upload</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.elements.attribute.accept")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Using_files_from_web_applications">ウェブアプリケーションからのファイルの使用</a></li> + <li><a href="/ja/docs/Web/API/File">File API</a></li> +</ul> diff --git a/files/ja/web/html/attributes/autocomplete/index.html b/files/ja/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..bddf9ffcdf --- /dev/null +++ b/files/ja/web/html/attributes/autocomplete/index.html @@ -0,0 +1,272 @@ +--- +title: HTML の autocomplete 属性 +slug: Web/HTML/Attributes/autocomplete +tags: + - Addresses + - Attribute + - Email addresses + - Forms + - HTML + - Input + - Phone Numbers + - Reference + - Select + - Text + - Usernames + - autocomplete + - form + - passwords + - textarea + - パスワード + - メールアドレス + - ユーザー名 + - 住所 + - 電話番号 +translation_of: Web/HTML/Attributes/autocomplete +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>HTML の <code>autocomplete</code> 属性は、入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。 <span class="seoSummary"><code>autocomplete</code> を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。</span></p> + +<p>提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。</p> + +<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に <code>autocomplete</code> 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または <code><form></code> 要素で <code>id</code> がその要素の {{htmlattrxref("form", "input")}} 属性で指定されているものの <code>autocomplete</code> 属性の値を使用します。</p> + +<p>詳しくは、 {{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。</p> + +<div class="blockIndicator note"> +<p>自動補完を提供するために、ユーザーエージェントは <code><input></code>/<code><select></code>/<code><textarea></code> 要素に次のことを要求することがあります。</p> + +<ol> + <li><code>name</code> や <code>id</code> 属性を持つこと</li> + <li><code><form></code> 要素の子孫であること</li> + <li>フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと</li> +</ol> +</div> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt>"<code>off</code>"</dt> + <dd>ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。 + <div class="note"><strong>メモ:</strong> ほとんどの現行ブラウザーでは <code>autocomplete</code> 属性を "<code>off</code>" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 <a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">autocomplete 属性とログインフィールド</a>をご覧ください。</div> + </dd> + <dt>"<code>on</code>"</dt> + <dd>ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。</dd> + <dt>"<code>name</code>"</dt> + <dd>このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "<code>name</code>" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の <code>autocomplete</code> の値を使用することができます。 + <dl> + <dt>"<code>honorific-prefix</code>"</dt> + <dd>接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")</dd> + <dt>"<code>given-name</code>"</dt> + <dd>名 (ファーストネーム)</dd> + <dt>"<code>additional-name</code>"</dt> + <dd>ミドルネーム</dd> + <dt>"<code>family-name</code>"</dt> + <dd>苗字 (ファミリーネーム、「ラスト」ネーム)</dd> + <dt>"<code>honorific-suffix</code>"</dt> + <dd>接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")</dd> + <dt>"<code>nickname</code>"</dt> + <dd>ペンネームやハンドルネーム</dd> + </dl> + </dd> + <dt>"<code>email</code>"</dt> + <dd>メールアドレス。</dd> + <dt>"<code>username</code>"</dt> + <dd>ユーザー名またはアカウント名。</dd> + <dt>"<code>new-password</code>"</dt> + <dd>新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (<a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password">autocomplete="new-password" による自動補完の防止</a>も参照してください)。</dd> + <dt>"<code>current-password</code>"</dt> + <dd>ユーザーの現在のパスワードです。</dd> + <dt>"<code>one-time-code</code>"</dt> + <dd>ユーザー自身を確認するために使われるワンタイムコードです</dd> + <dt>"<code>organization-title</code>"</dt> + <dd>職名や組織内の肩書です (例: "上級技術ライター", "社長", "副部隊長")</dd> + <dt>"<code>organization</code>"</dt> + <dd>企業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。</dd> + <dt>"<code>street-address</code>"</dt> + <dd>住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。</dd> + <dt>"<code>address-line1</code>", "<code>address-line2</code>", "<code>address-line3</code>"</dt> + <dd>住所のそれぞれの行です。これらは "<code>street-address</code>" が存在しない場合のみ置くことができます。</dd> + <dt>"<code>address-level4</code>"</dt> + <dd>住所が4段階まである場合のもっとも細かい{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd> + <dt>"<code>address-level3</code>"</dt> + <dd>少なくとも3段階の行政レベルがある住所において、3番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd> + <dt>"<code>address-level2</code>"</dt> + <dd>少なくとも2段階の行政レベルがある住所において、2番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。</dd> + <dt>"<code>address-level1</code>"</dt> + <dd>住所の一番上{{anch("Administrative levels in addresses", "行政レベル")}}です。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。</dd> + <dt>"<code>country</code>"</dt> + <dd>国コードです。</dd> + <dt>"<code>country-name</code>"</dt> + <dd>国名です。</dd> + <dt>"<code>postal-code</code>"</dt> + <dd>郵便番号です (アメリカでは ZIP コードです)。</dd> + <dt>"<code>cc-name</code>"</dt> + <dd>クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。</dd> + <dt>"<code>cc-given-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。</dd> + <dt>"<code>cc-additional-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。</dd> + <dt>"<code>cc-family-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された姓です。</dd> + <dt>"<code>cc-number</code>"</dt> + <dd>クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。</dd> + <dt>"<code>cc-exp</code>"</dt> + <dd>支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。</dd> + <dt>"<code>cc-exp-month</code>"</dt> + <dd>支払手段の有効期限の月です。</dd> + <dt>"<code>cc-exp-year</code>"</dt> + <dd>支払手段の有効期限の年です。</dd> + <dt>"<code>cc-csc</code>"</dt> + <dd>支払手段のセキュリティコードです。クレジットカードでは、カードの裏に書かれた3桁の認証番号です。</dd> + <dt>"<code>cc-type</code>"</dt> + <dd>支払手段の種類です。 (例: "Visa" や "Master Card").</dd> + <dt>"<code>transaction-currency</code>"</dt> + <dd>この取引で決済が行われる通貨です。</dd> + <dt>"<code>transaction-amount</code>"</dt> + <dd>支払を行う金額の "<code>transaction-currency</code>" の単位による量です。</dd> + <dt>"<code>language</code>"</dt> + <dd>優先言語で、有効な <a href="https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0">BCP 47 言語タグ</a> で指定されたものです。</dd> + <dt>"<code>bday</code>"</dt> + <dd>生年月日の全体です。</dd> + <dt>"<code>bday-day</code>"</dt> + <dd>生年月日の日の部分です。</dd> + <dt>"<code>bday-month</code>"</dt> + <dd>生年月日の月の部分です。</dd> + <dt>"<code>bday-year</code>"</dt> + <dd>生年月日の年の部分です。</dd> + <dt>"<code>sex</code>"</dt> + <dd>性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。</dd> + <dt>"<code>tel</code>"</dt> + <dd>国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 + <dl> + <dt>"<code>tel-country-code</code>"</dt> + <dd>国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。</dd> + <dt>"<code>tel-national</code>"</dt> + <dd>国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。</dd> + <dt>"<code>tel-area-code</code>"</dt> + <dd>市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。</dd> + <dt>"<code>tel-local</code>"</dt> + <dd>国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "<code>tel-local-prefix</code>" は "555"、 "<code>tel-local-suffix</code>" は "6502" となります。</dd> + </dl> + </dd> + <dt>"<code>tel-extension</code>"</dt> + <dd>電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。</dd> + <dt>"<code>impp</code>"</dt> + <dd>インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。</dd> + <dt>"<code>url</code>"</dt> + <dd>URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。</dd> + <dt>"<code>photo</code>"</dt> + <dd>このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。</dd> +</dl> + +<p>詳しくは <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 仕様書</a> をご覧ください。</p> + +<div class="note"> +<p><strong>注:</strong> Firefox は他のブラウザーとは異なり、 <code>autocomplete</code> 属性で、ページを再読み込みしても <code><input></code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか</a> を制御します。この維持機能は、既定で有効です。 <code>autocomplete</code> 属性の値に <code>off</code> を設定すると、この機能を無効化できます。またこの設定は、<code>type</code> 属性が通常 <code>autocomplete</code> を適用しない値である <code><input></code> 要素でも有効です。 {{bug(654072)}} をご覧ください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><div> + <label for="cc-number">Enter your credit card number</label> + <input name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="Administrative_levels_in_addresses" name="Administrative_levels_in_addresses">住所における行政レベル</h2> + +<p>行政レベルの4つの欄 (<code>address-level1</code> ～ <code>address-level4</code>) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。</p> + +<p><code>address-level1</code> は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。</p> + +<h3 id="Form_layout_flexibility" name="Form_layout_flexibility">フォームのレイアウトの自由度</h3> + +<p>国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。</p> + +<h3 id="Variations" name="Variations">変化形</h3> + +<p>それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。</p> + +<h4 id="United_States" name="United_States">アメリカ</h4> + +<p>アメリカ国内の一般的な住所は次のようになります。</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって <code>address-level1</code> は州、この場合は "CA" となります。</p> + +<p>住所で2番目に大きな括りの部分は市区町村名なので、 <code>address-level2</code> はこの例の住所では "Exampleville" となります。</p> + +<p>アメリカの住所では、3以上の行政単位は使用されません。</p> + +<h4 id="United_Kingdom" name="United_Kingdom">イギリス</h4> + +<p>イギリスの住所入力フォームでは、住所のレベルは1つで、住所に応じて1～3行の住所が含まれることがあります。完全な住所は次のようになります。</p> + +<p>103 Frogmarch Street<br> + Upper-Wapping<br> + Winchelsea<br> + TN99 8ZZ</p> + +<p>住所レベルは次のようになります。</p> + +<ul> + <li><code>address-level1</code>: ポストタウン — この場合は "Winchelsea" です。</li> + <li><code>address-line2</code>: 地区 — この場合は"Upper-Wapping" です。</li> + <li><code>address-line1</code>: 家屋番号や通りの詳細 — "103 Frogmarch Street"</li> +</ul> + +<p>郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と <code>address-line1</code> だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。</p> + +<h4 id="China" name="China">中国</h4> + +<p>中国では、省、市、区の3つの行政レベルを使用することができます。</p> + +<h4 id="Japan" name="Japan">日本</h4> + +<p>日本の住所は一般的に<strong>1行で</strong>、広域的な部分から詳細な部分の順に (<strong>アメリカとは逆順</strong>に) 書かれます。住所には2～3の行政レベルが含まれます。建物名や部屋番号を表すために、もう1行が追加されることもあります。例を示します。</p> + +<p>〒381-0000<br> + 長野県長野市某町123</p> + +<p>「〒」と続く7桁の番号は郵便番号です。</p> + +<p><code>address-level1</code> は都道府県に使用されます。この場合は「長野県」です。 <code>address-level2</code> は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町123」は <code>address-line1</code> で、町名と地番からなります。</p> + +<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', "#autofill")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.global_attributes.autocomplete")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("input")}} 要素</li> + <li>{{htmlelement("select")}} 要素</li> + <li>{{htmlelement("textarea")}} 要素</li> + <li>{{htmlelement("form")}} 要素</li> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/web/html/attributes/crossorigin/index.html b/files/ja/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..9a6d938414 --- /dev/null +++ b/files/ja/web/html/attributes/crossorigin/index.html @@ -0,0 +1,104 @@ +--- +title: HTML crossorigin 属性 +slug: Web/HTML/Attributes/crossorigin +tags: + - Advanced + - CORS + - HTML + - Reference + - Security + - セキュリティ + - 上級者 +translation_of: Web/HTML/Attributes/crossorigin +--- +<div>{{draft}}</div> + +<p class="seoSummary"><strong><code>crossorigin</code></strong> 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 <a href="/ja/docs/Web/HTTP/CORS">CORS</a> への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。</p> + +<p>メディア要素の <code>crossorigin</code> コンテンツ属性は CORS 設定属性です。</p> + +<p>これらの属性は列挙型で、以下の値を取ることができます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">キーワード</td> + <td class="header">説明</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>この要素のための CORS リクエストで資格情報フラグを 'same-origin' に設定する。</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>この要素のための CORS リクエストで資格情報フラグを 'include' に設定する。</td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>crossorigin</code> または <code>crossorigin=""</code> のように属性に空の値を設定すると、 <code>anonymous</code> と同じになります。</td> + </tr> + </tbody> +</table> + +<p>既定では (つまり、属性が指定されていない場合)、 CORS は使用されません。 "anonymous" キーワードが指定された場合は、同じオリジンでない限り、リクエストにはクッキーやクライアント側の SSL 証明書、 HTTP 認証などの <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">CORS 仕様書の用語の節</a>で記述されている<ruby><strong>ユーザー資格情報</strong><rp> (</rp><rt>user credentials</rt><rp>) </rp></ruby>は使用されません。</p> + +<p>不正なキーワードや空文字列は、 <code>anonymous</code> が指定されたものと同じように扱われます。</p> + +<h3 id="Example_crossorigin_with_the_script_element" name="Example_crossorigin_with_the_script_element">例: script 要素の crossorigin</h3> + +<p>以下の {{HTMLElement("script")}} 要素を使用すると、ユーザー資格情報を送信せずに <code>https://example.com/example-framework.js</code> スクリプトを実行します。</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" crossorigin="anonymous"></script></pre> + +<h3 id="Example_Webmanifest_with_credentials" name="Example_Webmanifest_with_credentials">例: 資格情報付きの Webmanifest</h3> + +<p>資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても <code>use-credentials</code> の値を使用する必要があります。</p> + +<pre class="brush: html"><link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"></pre> + +<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', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<h3 id="<script_crossorigin>"><script crossorigin></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.script.crossorigin")}}</p> + +<h3 id="<video_crossorigin>"><video crossorigin></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.video.crossorigin")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/rel">HTML の <code>rel</code> 属性</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}</div> diff --git a/files/ja/web/html/attributes/index.html b/files/ja/web/html/attributes/index.html new file mode 100644 index 0000000000..b0c79d849d --- /dev/null +++ b/files/ja/web/html/attributes/index.html @@ -0,0 +1,769 @@ +--- +title: HTML 属性リファレンス +slug: Web/HTML/Attributes +tags: + - Attribute + - Attributes + - Beginner + - Configuring + - Element Attributes + - Elements + - HTML + - Reference + - Settings + - Web + - 初心者 + - 属性 + - 要素 + - 要素の属性 + - 設定 +translation_of: Web/HTML/Attributes +--- +<div>{{HTMLSidebar}}</div> + +<p>HTML の要素は<strong>属性</strong>を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。</p> + +<h2 id="Attribute_list" name="Attribute_list">属性一覧</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>属性名</th> + <th>要素</th> + <th>説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/accept">accept</a></code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>サーバーの受容する型のリストです。ファイル形式など。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/accept-charset">accept-charset</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>対応している文字集合の一覧です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/action">action</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>フォーム経由で送信される情報を処理するプログラムの URI です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/align">align</a></code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>要素の水平方向の配置を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/allow">allow</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>iframe の機能ポリシーを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/alt">alt</a></code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>画像が表示できない場合の代替テキストです。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/async">async</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>スクリプトを非同期で実行します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/autocapitalize">autocapitalize</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。</td> + </tr> + <tr> + <td id="attr-autofocus"><code><a href="/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/autoplay">autoplay</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>オーディオやビデオが再生可能になった時点で自動再生を開始します。</td> + </tr> + <tr> + <td><code>background</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>画像ファイルの URL を指定します。 + <div class="note"><strong>注:</strong> ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の {{ Cssxref("background-image") }} を使用してください。</div> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>要素の背景色です。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{ Cssxref("background-color") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>境界線の幅です。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{ Cssxref("border") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/buffered">buffered</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>すでにバッファリングされたメディアの時間の範囲を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/capture">capture</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}} 仕様書から、キャプチャできる新しいファイルを指定します。</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>公開鍵とともに送信するチャレンジ文字列</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/charset">charset</a></code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>ページまたはスクリプトの文字エンコーディングを宣言します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/checked">checked</a></code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>ページ読み込み時に要素にチェックを入れておくかどうかを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/cite">cite</a></code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>引用元または変更点の情報源を指す URI を格納します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/class">class</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/code">code</a></code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>読み込んで実行するアプレットのクラスファイルの URL を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/codebase">codebase</a></code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{Cssxref("color")}} プロパティを使用して下さい。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/cols">cols</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>テキストエリアの桁数 (水平方向の文字数) を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/colspan">colspan</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>colspan 属性はテーブルのセルを結合する列数を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/content">content</a></code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>状況に応じて、 <code>http-equiv</code> または <code>name</code> に関連した値です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素の内容が編集可能であるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/contextmenu">contextmenu</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素のコンテキストメニューとして機能する {{HTMLElement("menu")}} 要素の ID を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/controls">controls</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>再生コントロールをユーザーに表示すべきかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/coords">coords</a></code></td> + <td>{{ HTMLElement("area") }}</td> + <td>ホットスポット領域の座標を指定する為の値のセット</td> + </tr> + <tr> + <td><code><a href="/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> + <td>要素がオリジン間リクエストをどう扱うか</td> + </tr> + <tr> + <td><code><a href="/docs/Web/API/HTMLiframeElement/csp">csp</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}</td> + <td>埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/data">data</a></code></td> + <td>{{ HTMLElement("object") }}</td> + <td>リソースの URL を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>HTML 要素にカスタム属性が添付できるようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/datetime">datetime</a></code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>要素に関連付けられた日時を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/decoding">decoding</a></code></td> + <td>{{ HTMLElement("img") }}</td> + <td>画像をデコードする推奨の方法をIndicates the preferred method to decode the image.</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/default">default</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td>ユーザ設定で別の項目を指定していない場合に、有効にするトラックを指定する</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/defer">defer</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>ページのパースが完了した後に実行するスクリプトであることを示す</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/dir">dir</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>テキストの書字方向を定義する。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left)</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/dirname">dirname</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>閲覧者によるによるコントロールの操作を無効にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/download">download</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>リソースをダウンロードするためのハイパーリンクであるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/draggable">draggable</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素がドラッグ可能であるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素がその上でコンテンツのドロップ操作を受け付けるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/enctype">enctype</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td><code>method</code> 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/enterkeyhint">enterkeyhint</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("textarea") }}, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td><a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"><code>enterkeyhint</code></a> は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (<code>textarea</code> 要素の値など) と共に、または編集対象となっている要素 (例えば <code>contenteditable</code> 属性の使用など) の中で使用することができます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/for">for</a></code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>この要素が属する要素を指定します。</td> + </tr> + <tr> + <td id="attr-form"><code><a href="/ja/docs/Web/HTML/Attributes/form">form</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>その要素が所属するフォームを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formaction">formaction</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>その要素のアクションを示します。 {{ HTMLElement("form") }} で定義されたアクションを上書きします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formenctype">formenctype</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>enctype</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formmethod">formmethod</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォーム送信で使用する送信メソッド (<code>GET</code>, <code>POST</code>, など) を設定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>method</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formnovalidate">formnovalidate</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>novalidate</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formtarget">formtarget</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>target</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/headers">headers</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>この要素に適用する <code><th></code> 要素の ID。</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>ここに挙げた要素の高さを指定します。他の要素では、 {{cssxref("height")}} プロパティを使用してください。</p> + + <div class="note"> + <p><strong>注:</strong> {{HTMLElement("div")}} など一部の要素では、これは古い属性であり、代わりに CSS の {{Cssxref("height")}} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/high">high</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最大値の下限を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/href">href</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>リンクされたリソースの URL です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/hreflang">hreflang</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>リンクされたリソースの言語を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/http-equiv">http-equiv</a></code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>プラグマディレクティブを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/icon">icon</a></code></td> + <td>{{ HTMLElement("command") }}</td> + <td>コマンドを表す画像を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/id">id</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/importance">importance</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>リソースの相対的なフェッチ優先順位を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/Security/Subresource_Integrity">integrity</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td> + <p>ブラウザーが読み込むものを検証できるようにするための<a href="/ja/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a>の値を指定します。</p> + </td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td> + <td>{{ HTMLElement("img") }}</td> + <td>この属性は、ブラウザーに画像に交友の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td> + <td>{{ HTMLElement("textarea") }}, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (<code>textarea</code> 要素の値など) と共に、または編集対象となっている要素 (例えば <code>contenteditable</code> 属性の使用など) の中で使用することができます。</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>画像がサーバーサイドイメージマップの一部であることを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>生成する鍵の種類を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/kind">kind</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td>テキストトラックの種類を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/label">label</a></code></td> + <td>{{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("track") }}</td> + <td>ユーザーが読める形の要素のタイトルを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素内で用いられている言語を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/language">language</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>要素で使用しているスクリプト言語を定義する。</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td> + <td>要素を遅延読み込みさせたいこと (<code>loading="lazy"</code>) または直ちに読み込ませたいこと (<code>loading="eager"</code>) を示します。 + <div class="note"><strong>WIP:</strong> <a href="https://github.com/whatwg/html/pull/3752">WHATWG PR #3752</a></div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/list">list</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>ユーザに提案するため、事前に定義した選択肢のリストを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/loop">loop</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>メディアの再生が完了した後、始めから再生を開始するかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/low">low</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最小値の上限を示します。</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>ドキュメントのキャッシュマニフェストの URL を指定します。 + <div class="note"><strong>注:</strong> この属性は廃止されており、代わりに <a href="/ja/docs/Web/Manifest"><code><link rel="manifest"></code></a> を使用してください。</div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>許容される最大の値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が許容する最大文字数を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が許容する最小文字数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/media">media</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>リンクされたリソースがどのメディアに対して設計されたかを指定する。ンｎ</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Attributes/method">method</a></td> + <td>{{ HTMLElement("form") }}</td> + <td>フォームを送信する際に使用する <a href="/ja/docs/Web/HTTP">HTTP</a> メソッドを定義する。 GET (既定値) または POST を指定可能。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>許容される最小の値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>type が <code>email</code> または <code>file</code> の input では、複数の値を入力可能かを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/muted">muted</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>ページ読み込み時に音声を無音にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/name">name</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/novalidate">novalidate</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>送信時にフォームが検証されないようにする。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/open">open</a></code></td> + <td>{{ HTMLElement("details") }}</td> + <td>ページ読み込み時に詳細情報を表示するかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/optimum">optimum</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最適な値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>要素の値を検証する正規表現を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Element/a#attr-ping">ping</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td><code>ping</code> 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/placeholder">placeholder</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/poster">poster</a></code></td> + <td>{{ HTMLElement("video") }}</td> + <td>ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/preload">preload</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が編集できるかどうかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/referralpolicy">referrerpolicy</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>リソースにアクセスする際にどのリファラーが送信されるかを指定する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rel">rel</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>入力が必須の要素であるかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/reversed">reversed</a></code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>リストを昇順ではなく降順に表示することを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rows">rows</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea の行数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rowspan">rowspan</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>テーブルセルがまたがる行数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>iframe に読み込まれた文書で特定の機能を使用することを止める (フォームの投稿や新しいウィンドウを開くなど)。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/scope">scope</a></code></td> + <td>{{ HTMLElement("th") }}</td> + <td>(<code>th</code> 要素で定義される) ヘッダーテストが関連するセルを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/scoped">scoped</a></code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/selected">selected</a></code></td> + <td>{{ HTMLElement("option") }}</td> + <td>ページ読込時に、対象要素を選択状態にする。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/shape">shape</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>要素の幅を定義する (ピクセル値)。要素の <code>type</code> 属性が <code>text</code> または <code>password</code> である場合は文字数になる。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/sizes">sizes</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/slot">slot</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/span">span</a></code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素のスペルチェックを有効にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/src">src</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>埋め込みコンテンツの URL。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srcdoc">srcdoc</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srclang">srclang</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srcset">srcset</a></code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td>一つ以上のレスポンシブ画像の候補です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/start">start</a></code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>1以外から始まる場合の最初の値を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/style">style</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/summary">summary</a></code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ブラウザーによる既定のタブオーダーを無効化して、指定した順序に従うようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/target">target</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/title">title</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素の示す範囲のタイトル。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示される。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/translate">translate</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ページが翻訳版である場合、要素の属性値と子の <code><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦">Text</a></code> ノードが翻訳されているか、変更せずにそのままであるかを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/type">type</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>要素の型を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/usemap">usemap</a></code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/value">value</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("data") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("option") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>ページ読み込み時に要素で表示するデフォルト値を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/width">width</a></code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>ここに挙げられた要素に対して、要素の幅を指定します。</p> + + <div class="note"> + <p><strong>注:</strong> {{ HTMLElement("div") }} など他の要素については、これは古い属性であり、代わりに CSS の {{ Cssxref("width") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/wrap">wrap</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>テキストを折り返すかどうかを示します。</td> + </tr> + </tbody> +</table> + +<h2 id="Content_versus_IDL_attributes" name="Content_versus_IDL_attributes">content 属性と IDL 属性</h2> + +<p>HTML では、ほとんどの属性に <strong>content 属性</strong> と <strong>IDL (Interface Definition Language) 属性</strong> の 2 つの側面があります。</p> + +<p>content 属性は content (HTML コード) から設定する属性であり、 {{domxref("element.setAttribute()")}} や {{domxref("element.getAttribute()")}} を使用して設定あるいは取得できます。 content 属性は値として数値を想定するものであっても、常に文字列です。例えば content 属性を使用して {{HTMLElement("input")}} 要素の <code>maxlength</code> 属性に 42 を設定するには、その要素で <code>setAttribute("maxlength", "42")</code> を呼び出さなければなりません。</p> + +<p>IDL 属性は JavaScript プロパティとしても知られています。これらは <code class="moz-txt-verticalline">element.foo</code> といった JavaScript プロパティを使用して読み書きします。IDL 属性は読み取り時に値を返すため基になる content 属性を使用 (ただし、変換するでしょう) したり、書き込み時に content 属性へ何らかの値を保存したりします。言い換えると、IDL 属性は content 属性を映し出します。</p> + +<p>ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば {{HTMLElement("input")}} 要素の <code>type</code> 属性のデフォルト値は "text" であるので、<code>input.type="foobar"</code> を設定すると <code><input></code> 要素は (外見と動作が) text タイプになりますが、"type" content 属性の値は "foobar" になります。しかし、<code>type</code> IDL 属性は文字列 "text" を返します。</p> + +<p>IDL 属性は常に文字列とは限りません。例えば <code>input.maxlength</code> は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、<code>input.maxlength</code> は常に数値を返し、また <code>input.maxlength</code> を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。</p> + +<p>IDL 属性は符号なし long、URL、論理値など<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">他の型を反映する</a>ことが可能です。残念ながら、属性に応じて IDL 属性が対応する content 属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">仕様にある規則</a>に従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば <code>select.size</code>) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。</p> + +<h2 id="Boolean_Attributes" name="Boolean_Attributes">論理属性</h2> + +<p>一部のコンテンツ属性 (例えば <code>required</code>, <code>readonly</code>, <code>disabled</code>) は<a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes"><ruby>論理属性<rp> (</rp><rt>boolean attributes</rt><rp>) </rp></ruby></a>と呼ばれています。論理属性は存在すれば、その値は <strong>true</strong> となり、存在しなければ、その値は <strong>false</strong> となります。</p> + +<p>HTML5 では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。</p> + +<pre class="notranslate"><div itemscope> This is valid HTML but invalid XML. </div> +<div itemscope=itemscope> This is also valid HTML but invalid XML. </div> +<div itemscope=""> This is valid HTML and also valid XML. </div> +<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div></pre> + +<p>明確にするために、 "<code>true</code>" および "<code>false</code>" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば <code>checked="false"</code> は、属性が存在するため、その要素の <code>checked</code> 属性が <strong>true</strong> であると解釈されます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element">HTML 要素</a></li> +</ul> diff --git a/files/ja/web/html/attributes/max/index.html b/files/ja/web/html/attributes/max/index.html new file mode 100644 index 0000000000..7fcc1d64d4 --- /dev/null +++ b/files/ja/web/html/attributes/max/index.html @@ -0,0 +1,166 @@ +--- +title: 'HTML 属性: max' +slug: Web/HTML/Attributes/max +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Reference +translation_of: Web/HTML/Attributes/max +--- +<p>{{HTMLSidebar}}</p> + +<p><strong><code>max</code></strong> 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の<code><a href="/ja/docs/Web/HTML/Element/input#attr-value">値</a></code>がこれより大きい場合、その要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。この値は、 <a href="min"><code>min</code></a> 属性の値以上でなければなりません。 <code>max</code> 属性が指定されていないか無効であった場合、 <code>max</code> 値は適用されません。 <code>max</code> 属性が有効で、値が空でなく、 <code>max</code> 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。</p> + +<p>これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素で有効であり、 <code>max</code> 属性はフォームコントロールで妥当と見なされる最も大きな値をして逸する数値です。</p> + +<p>値が許容される最大値を超えた場合、 {{domxref('validityState.rangeOverflow')}} が true となり、そのコントロールは {{cssxref(':out-of-range')}} および {{cssxref(':invalid')}} 擬似クラスと一致するようになります。</p> + +<h3 id="Syntax" name="Syntax">構文</h3> + +<table class="standard-table"> + <caption><code>max</code> の構文 (入力 <code>type</code> 別)</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" max="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" max="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" max="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" max="17:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T23:59"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが設定された最大値を満たしていない場合、製薬検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。</p> +</div> + +<p>詳しくは <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側検証</a>と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。</p> + +<p>{{htmlelement('progress')}} 要素における <code>max</code> 属性は、 <code>progress</code> 要素で示されたタスクがどれだけの作業を必要とするかを記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における <code>max</code> 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値 (<code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> 属性) よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。</p> + +<table class="standard-table"> + <caption>その他の要素における <code>max</code> 値の構文</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><progress id="file" max="100" value="70"> 70% </progress></code></td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<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', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.max")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/step"><code>step</code></a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/min"><code>min</code></a></li> + <li>other meter attributes: <a href="/ja/docs/Web/HTML/Attributes/low"><code>low</code></a>, <a href="/ja/docs/Web/HTML/Attributes/high"><code>high</code></a>, <a href="/ja/docs/Web/HTML/Attributes/optimum"><code>optimum</code></a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li> + <li><a href="/ja/docs/Web/API/Constraint_validation">Constraint validation API</a></li> + <li>{{domxref('validityState.rangeOverflow')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> +</ul> diff --git a/files/ja/web/html/attributes/maxlength/index.html b/files/ja/web/html/attributes/maxlength/index.html new file mode 100644 index 0000000000..002bfcb7ee --- /dev/null +++ b/files/ja/web/html/attributes/maxlength/index.html @@ -0,0 +1,59 @@ +--- +title: 'HTML 属性: maxlength' +slug: Web/HTML/Attributes/maxlength +tags: + - Attribute + - Attributes + - Constraint validation +translation_of: Web/HTML/Attributes/maxlength +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p><span class="seoSummary"><strong><code>maxlength</code></strong> 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最大文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。</span> maxlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最大長が設定されません。</p> + +<p><code>maxlength</code> の値はすべて、 <code>minlength</code> が存在して有効である場合は、その値以上である必要があります。フィールドのテキスト値の長さが maxlength の UTF-16 コード単位の長さを超える場合、入力欄は制約検証に失敗します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="Constraint_validation" name="Constraint_validation">制約検証</h3> + +<p>ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><input type="password" maxlength="4"/> +</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attribute.maxlength")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code></li> +</ul> diff --git a/files/ja/web/html/attributes/min/index.html b/files/ja/web/html/attributes/min/index.html new file mode 100644 index 0000000000..5c549a352a --- /dev/null +++ b/files/ja/web/html/attributes/min/index.html @@ -0,0 +1,158 @@ +--- +title: 'HTML 属性: min' +slug: Web/HTML/Attributes/min +tags: + - Attribute + - Attributes + - Constraint validation + - min +translation_of: Web/HTML/Attributes/min +--- +<p>{{HTMLSidebar}}</p> + +<p><span class="seoSummary"><strong><code>min</code></strong> 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の<code><a href="/ja/docs/Web/HTML/Element/input#attr-value">値</a></code>がこれより大きい場合、その要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。この値は、 <code>max</code> 属性の値以下でなければなりません。 <code>min</code> 属性が指定されていないか無効であった場合、最小値は適用されません。</span></p> + +<p>これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 <code>min</code> 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。</p> + +<h3 id="Syntax" name="Syntax">構文</h3> + +<table class="standard-table"> + <caption><code>min</code> の構文 (入力 <code>type</code> 別)</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td><a href="/en-US/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td><a href="/en-US/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。</p> +</div> + +<p>詳しくは <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側検証</a>と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。</p> + +<p>{{htmlelement('meter')}} 要素における <code>min</code> 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (<code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性) よりもチイサクなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。</p> + +<table class="standard-table"> + <caption>その他の要素における <code>min</code> 値の構文</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h3 id="Impact_on_step" name="Impact_on_step">step への影響</h3> + +<p><code>min</code> と <code>step</code> の値は、 <code>step</code> 属性がない場合も含め、どの値が有効であるかを定義します。 <code>step</code> の既定値は <code>0</code> です。</p> + +<p>無効な入力の周囲に太く赤い境界を追加します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre> + +<p><code>step</code> の既定値は 1 なので、有効な値は <code>7.2</code>, <code>8.2</code>, <code>9.2</code>, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。</p> + +<p>{{EmbedLiveSample("Impact_on_step",200,55)}}</p> + +<p>明示的に含まれていない限り、 <code>number</code>、 <code>range</code> では <code>step</code> は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<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', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.min")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/step">step</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/max">max</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> + <li>{{domxref('Constraint_validation')}}</li> + <li>{{domxref('validityState.rangeUnderflow')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> + <li>{{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} および {{HTMLElement("input/range", "range")}} 型、 {{htmlelement('meter')}}</li> +</ul> diff --git a/files/ja/web/html/attributes/minlength/index.html b/files/ja/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..6b62f1918c --- /dev/null +++ b/files/ja/web/html/attributes/minlength/index.html @@ -0,0 +1,72 @@ +--- +title: 'HTML 属性: minlength' +slug: Web/HTML/Attributes/minlength +tags: + - Attribute + - Input + - Reference + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><strong><code>minlength</code></strong> 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最小文字数が設定されません。この値は <a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a> の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。</p> + +<p>フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が <code>true</code> を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>minlength="5"</code> を追加すると、値は空か5文字以上でないと有効にはならなくなります。</p> + +<pre class="brush: html notranslate"><label for="fruit">Enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"></pre> + +<p>擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または5文字以上であれば有効になります。<em>ライム色</em>は無効であり、<em>レモン色は有効です</em>。</p> + +<pre class="brush: css notranslate">input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +}</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'minlength attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'minlength attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.elements.attribute.minlength")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/size">size</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> +</ul> diff --git a/files/ja/web/html/attributes/multiple/index.html b/files/ja/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..da54459d50 --- /dev/null +++ b/files/ja/web/html/attributes/multiple/index.html @@ -0,0 +1,185 @@ +--- +title: 'HTML 属性: multiple' +slug: Web/HTML/Attributes/multiple +tags: + - Attribute + - Attributes + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/multiple +--- +<p>{{HTMLSidebar}}</p> + +<p>論理属性の <strong><code>multiple</code></strong> 属性は、設定されている場合、フォームコントロールが1つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。</p> + +<p>型によっては、<code>multiple</code> 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに <code>multiple</code> 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。</p> + +<p><code>multiple</code> が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは0個 (<code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> がない場合)、1個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。</p> + +<pre class="brush: html notranslate"><input type="email" <strong>multiple</strong> name="emails" id="emails"></pre> + +<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。</p> + +<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (<kbd>Shift</kbd> か <kbd>Control</kbd> を押したまま、それからクリックするなど) で選択することができます。</p> + +<pre class="brush: html notranslate"><input type="file" <strong>multiple</strong> name="uploads" id="uploads"></pre> + +<p>この属性を省略した場合は、 <code><input></code> あたりに1つのファイルしか選択することができません。</p> + +<p><code>multiple</code> 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。</p> + +<pre class="brush: html notranslate"><select multiple name="drawfs" id="drawfs"> + <option>Grumpy</option> + <option>Happy</option> + <option>Sleepy</option> + <option>Bashful</option> + <option>Sneezy</option> + <option>Dopey</option> + <option>Doc</option> +</select></pre> + +<p><code>multiple</code> を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 <code>multiple</code> 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。</p> + +<p>複数選択で <code><a href="/ja/docs/Web/HTML/Attributes/size">size</a>="1"</code> を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="email_input" name="email_input">email 入力型</h3> + +<pre class="brush: html notranslate"><label for="emails">誰にメールしますか？</label> +<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"> + +<datalist id="drawfemails"> + <option value="grumpy@woodworkers.com">Grumpy</option> + <option value="happy@woodworkers.com">Happy</option> + <option value="sleepy@woodworkers.com">Sleepy</option> + <option value="bashful@woodworkers.com">Bashful</option> + <option value="sneezy@woodworkers.com">Sneezy</option> + <option value="dopey@woodworkers.com">Dopey</option> + <option value="doc@woodworkers.com">Doc</option> +</datalist></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre> +</div> + +<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 <code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性が存在する場合、少なくとも1つのメールアドレスが必要です。</p> + +<p>ブラウザーによっては、 <code>multiple</code> が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの <code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code> を表示することがあります。他のブラウザーは対応していません。</p> + +<p>{{EmbedLiveSample("email_input", 600, 80) }}</p> + +<h3 id="file_input" name="file_input">file 入力型</h3> + +<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1つ以上のファイルを選択することができます。</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <p> + <label for="uploads"> + アップロードする画像を選択してください: + </label> + <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> + </p> + <p> + <label for="text">アップロードするテキストファイルを選択してください: </label> + <input type="file" id="text" name="text" accept=".txt"> + </p> + <p> + <input type="submit" value="Submit"> + </p> +</form></pre> + +<p>{{EmbedLiveSample("file_input", 600, 80) }}</p> + +<p><code>multiple</code> が設定された <code>file</code> 入力欄と、設定されていない入力欄との外見の違いに注意してください。</p> + +<p>フォームが送信されたとき、 <code><a href="/ja/docs/Web/HTML/Element/form">method="get"</a></code> を使用していれば、選択された各ファイルの名前が URL パラメータに<code>?uploads=img1.jpg&uploads=img2.svg</code> のように追加されていたはずです。しかし、<a href="/ja/docs/Web/API/XMLHttpRequest/multipart">マルチパート</a>のフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素と<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#The_method_attribute">フォームデータの送信</a>を参照してください。</p> + +<h3 id="select">select</h3> + +<p>{{HTMLElement("select")}} 要素の <code>multiple</code> 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。</p> + +<pre class="brush: html notranslate"><form method="get" action="#"> +<p> + <label for="dwarfs">好きな木こりを選ぶ:</label> + <select multiple name="drawfs" id="drawfs"> + <option>grumpy@woodworkers.com</option> + <option>happy@woodworkers.com</option> + <option>sleepy@woodworkers.com</option> + <option>bashful@woodworkers.com</option> + <option>sneezy@woodworkers.com</option> + <option>dopey@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <label for="favoriteOnly">好きなものを選ぶ:</label> + <select name="favoriteOnly" id="favoriteOnly"> + <option>grumpy@woodworkers.com</option> + <option>happy@woodworkers.com</option> + <option>sleepy@woodworkers.com</option> + <option>bashful@woodworkers.com</option> + <option>sneezy@woodworkers.com</option> + <option>dopey@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <input type="submit" value="Submit"> +</p> +</form></pre> + +<p>{{EmbedLiveSample("select", 600, 120) }}</p> + +<p>2つのフォームコントロール間の外観の違いに注意してください。</p> + +<pre class="brush: css notranslate">/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</pre> + +<p>複数の属性を持つ <code><select></code> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は <kbd>Ctrl</kbd>、<kbd>Command</kbd>、または <kbd>Shift</kbd> キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <code><select></code> 要素に焦点を当てて、カーソルキーの <kbd>Up</kbd> と <kbd>Down</kbd> を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: <kbd>Space</kbd> キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。</p> + +<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', 'input.html#attr-input-multiple', 'multiple attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement('input')}}</li> + <li>{{htmlelement('select')}}</li> + <li><a href="/ja/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses">複数のメールアドレスの許可</a></li> +</ul> diff --git a/files/ja/web/html/attributes/pattern/index.html b/files/ja/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..da31c8a2b4 --- /dev/null +++ b/files/ja/web/html/attributes/pattern/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributes/pattern +tags: + - Attribute + - Attributes + - Constraint Validation API + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +<p>{{HTMLSidebar}}</p> + +<p><strong><code>pattern</code></strong> 属性は、フォームコントロールの値が一致すべき<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>を指定します。 <code>null</code> 以外の値が <code>pattern</code> 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。</p> + +<p><code>pattern</code>属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。</p> + +<div id="pattern-include"> +<p><code>pattern</code>属性は、<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現ガイド</a>で説明されているものと同じものです。通り正規表現をコンパイルする際に <code>'u'</code> フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。</p> + +<p>パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。</p> + +<div class="note"> +<p><strong>ヒント:</strong> {{htmlattrxref("title", "input")}} 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼っては<strong>いけません</strong>。ユーザービリティについての詳細は以下を参照してください。</p> +</div> +</div> + +<p>pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。</p> + +<h3 id="Usability" name="Usability">ユーザービリティ</h3> + +<p><code>pattern</code> を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する <code><a href="/ja/docs/Web/HTML/Global_attributes/title">title</a></code> 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。</p> + +<h3 id="Constraint_validation" name="Constraint_validation">制約検証</h3> + +<p>入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。<br> + pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に <code>^(?:</code> が、末尾に <code>)$</code> が指定されているかのように、値の部分ではなく全体に一致します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下ののものを考えてみてください。</p> + +<div id="example1"> +<pre class="brush: html notranslate"><p> + <label>Enter your phone number in the format (123)456-7890 + (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- + <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - + <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> + </label> +</p></pre> + +<p>ここでは北米の電話番号を示す3つの部分があり、電話番号の3つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ3桁、3桁、4桁で <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性によってそれぞれ設定されています。</p> + +<p>値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 <code>true</code> の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: red solid 3px; +}</pre> + +<p>{{EmbedLiveSample("example1", 300, 40)}}</p> +</div> + +<p>代わりに <code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。</p> + +<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3> + +<p>{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます (正規表現を使用して入力を検証する簡単な集中講座は、<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現に対する検証</a>を参照してください)。</p> + +<p>以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> + <span class="validity"></span> + <p>Usernames must be lowercase and 4-8 characters in length.</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h3 id="Accessibility_Concerns" name="Accessibility_Concerns">アクセシビリティの考慮</h3> + +<p>コントロールに <code>pattern</code> 属性がある場合、 <code>title</code> 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために <code>title</code> 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。</p> + +<p>一部のブラウザーでは <code>title</code> を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。</p> + +<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#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.elements.attributes.pattern")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></li> +</ul> diff --git a/files/ja/web/html/attributes/required/index.html b/files/ja/web/html/attributes/required/index.html new file mode 100644 index 0000000000..aaac1d96bb --- /dev/null +++ b/files/ja/web/html/attributes/required/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTML 属性: required' +slug: Web/HTML/Attributes/required +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/required +--- +<p>{{HTMLSidebar}}</p> + +<p><span class="seoSummary">論理属性の <code><strong>required</strong></code> 属性</span>は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 <code>required</code> 属性は <code>{{HTMLElement("input/text","text")}}</code>, <code>{{HTMLElement("input/search","search")}}</code>, <code>{{HTMLElement("input/url","url")}}</code>, <code>{{HTMLElement("input/tel","tel")}}</code>, <code>{{HTMLElement("input/email","email")}}</code>, <code>{{HTMLElement("input/password","password")}}</code>, <code>{{HTMLElement("input/date","date")}}</code>, <code>{{HTMLElement("input/month","month")}}</code>, <code>{{HTMLElement("input/week","week")}}</code>, <code>{{HTMLElement("input/time","time")}}</code>, <code>{{HTMLElement("input/datetime-local","datetime-local")}}</code>, <code>{{HTMLElement("input/number","number")}}</code>, <code>{{HTMLElement("input/checkbox","checkbox")}}</code>, <code>{{HTMLElement("input/radio","radio")}}</code>, <code>{{HTMLElement("input/file","file")}}</code> の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。</p> + +<p>この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 <code>image</code> を含むボタンの種類もいずれも対応していません。</p> + +<p>なお、 <code>color</code> と <code>range</code> は <code>required</code> に対応していませんが、 <code>color</code> 型は既定値が <code>#000000</code> であり、 <code>range</code> は、 <code>min</code> と <code>max</code> の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは <code>min</code> と <code>max</code> の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。</p> + +<p>入力欄に <code>required</code> 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 <code>required</code> 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。</p> + +<p>同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに <code>required</code> 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに <code>required</code> 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。</p> + +<p>同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 <code>required</code> 属性がついたチェックボックスのみが必須になります。</p> + +<div class="blockIndicator note"> +<p>注: <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。</p> +</div> + +<h3 id="Attribute_interactions" name="Attribute_interactions">属性の相互作用</h3> + +<p>読み取り専用フィールドは値を持つことができないので、 <code>required</code> は <code><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></code> 属性が指定されている入力欄には影響を与えません。</p> + +<h3 id="ユーザビリティ">ユーザビリティ</h3> + +<p><code>required</code>属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ <code>required</code> に対応していない場合には問題ありません。</p> + +<h3 id="制約検証">制約検証</h3> + +<p>要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form> + <div class="group"> + <input type="text"> + <label>Normal</label> + </div> + <div class="group"> + <input type="text" required="required"> + <label>Required</label> + </div> + <input type="submit"> +</form> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<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#attr-input-required', 'required attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.elements.attributes.required")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref('validityState.valueMissing')}}</li> + <li>{{cssxref(':required')}} および {{cssxref(':optional')}}</li> + <li>{{htmlelement('input')}}</li> + <li>{{htmlelement('select')}}</li> +</ul> diff --git a/files/ja/web/html/attributes/size/index.html b/files/ja/web/html/attributes/size/index.html new file mode 100644 index 0000000000..3722ecb051 --- /dev/null +++ b/files/ja/web/html/attributes/size/index.html @@ -0,0 +1,76 @@ +--- +title: 'HTML 属性: size' +slug: Web/HTML/Attributes/size +tags: + - Attribute + - HTML + - Input + - Reference + - Select +translation_of: Web/HTML/Attributes/size +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><strong><code>size</code></strong> 属性は、 {{htmlelement('input')}} 要素の幅と {{htmlelement('select')}} 要素の高さを定義します。 <code>input</code> については、 <code>type</code> 属性が {{HTMLElement("input/text", "text")}} または {{HTMLElement("input/password", "password")}} の場合は文字数です。これは 0 以上の整数でなければなりません。 <code>size</code> が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。</p> + +<p><code>size</code> 属性は制約検証には影響しません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>一部の入力型で <code>size</code> を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。</p> + +<pre class="brush: html notranslate"><label for="fruit">Enter a fruit</label> <input type="text" size="15" id="fruit"> +<label for="vegetable">Enter a vegetable</label> <input type="text" id="vegetable"> + +<select name="fruits" size="5"> + <option>banana</option> + <option>cherry</option> + <option>strawberry</option> + <option>durian</option> + <option>blueberry</option> +</select> + +<select name="vegetables" size="5"> +<option>carrot</option> +<option>cucumber</option> +<option>cauliflower</option> +<option>celery</option> +<option>collard greens</option> +</select></pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<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> + +<p>{{Compat("html.elements.attribute.size")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code></li> +</ul> diff --git a/files/ja/web/html/attributes/step/index.html b/files/ja/web/html/attributes/step/index.html new file mode 100644 index 0000000000..aa0e2c89a8 --- /dev/null +++ b/files/ja/web/html/attributes/step/index.html @@ -0,0 +1,132 @@ +--- +title: 'HTML attribute: step' +slug: Web/HTML/Attributes/step +tags: + - Attribute + - Attributes + - constrain validation + - step +translation_of: Web/HTML/Attributes/step +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p><span class="seoSummary"><strong><code>step</code></strong> 属性は、が従わなければならない刻み値を指定する数値、またはキーワード <code>any</code> です。数値の入力型、たとえば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型に有効です。</span></p> + +<p><code>step</code> は、スピナーボタンを上下にクリックしたり、範囲上でスライダーを左右に動かしたり、異なる日付タイプを検証したりする際の<em>刻み間隔</em>を設定します。明示的に指定されていない場合、 <code>step</code> の既定値は、 <code>number</code> と <code>range</code> の場合は 1、日付/時刻入力型の場合は1単位 (分、週、月、日) になります。値は正の整数または浮動小数点数、または刻みが指定されておらず、 (<code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> や <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> のような他の制約を除いて) すべての値が可能であることを意味する特別な値 <code>any</code> のいずれかでなければなりません。</p> + +<p><code>number</code> 入力型の既定の刻み値は 1 で、刻みの基底値が整数でない場合を<em>除き</em>、整数のみを入力することができます。 <code>time</code> の既定の刻み値は 1 秒で、 900 は15分と等しくなります。</p> + +<table class="standard-table"> + <caption>step の既定値</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>1 (日)</td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>1 (月)</td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>1 (週)</td> + <td><code class="brush: html"><input type="week" min="2019-W23" step="2"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>60 (分)</td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>1 (日)</td> + <td> + <p><code class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></code></p> + </td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>1</td> + <td><code class="brush: html"><input type="number" min="0" step="0.1" max="10"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>1</td> + <td><code class="brush: html"><input type="range" min="0" step="2" max="10"></code></td> + </tr> + </tbody> +</table> + +<p><code>any</code> が明示的に設定されていない場合、 <code>number</code>, 日付/時刻入力型, <code>range</code> の入力型で有効な値は、刻みの基底値と等しくなります。 - <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> の値と、それに step の値を <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> の値 (指定されている場合) まで加えていった値です。例えば、 <code><input type="number" min="10" step="2"></code> は10以上の偶数が有効です。省略された場合、 <code><input type="number"></code> は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは <code>step</code> の既定値が 1 だからです。 4.2 を有効にするには、 <code>step</code> を <code>any</code>、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば <code><input type="number" min="-5.2"></code> のようにする必要があります。</p> + +<h3 id="min_impact_on_step" name="min_impact_on_step">min の step への影響</h3> + +<p><code>min</code> と <code>step</code> の値は、 <code>step</code> 属性がない場合も含め、どの値が有効であるかを定義します。 <code>step</code> の既定値は <code>0</code> です。</p> + +<p>無効な入力の周囲に太く赤い境界を追加します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" step="2" min="1.2"></pre> + +<p>有効な値は、 <code>1.2</code>, <code>3.2</code>, <code>5.2</code>, <code>7.2</code>, <code>9.2</code>, <code>11.2</code> などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 <code>1.2</code> 以上の有効な浮動小数点以下の値のみ表示されます。</p> + +<p>{{EmbedLiveSample("min_impact_on_step",200,55)}}</p> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスにマッチします。</p> +</div> + +<p>詳しくは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側制約検証</a>と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<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', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> + <li>{{domxref('Constraint validation', "", 1)}} API</li> + <li>{{domxref('validityState.stepMismatch')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> +</ul> |