diff --git a/files/ja/web/html/attributes/accept/index.md b/files/ja/web/html/attributes/accept/index.md index f4eb903707c021..e08b4e50de4c04 100644 --- a/files/ja/web/html/attributes/accept/index.md +++ b/files/ja/web/html/attributes/accept/index.md @@ -1,11 +1,19 @@ --- title: "HTML 属性: accept" slug: Web/HTML/Attributes/accept +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 +**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}} + +## 概要 + +accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。 @@ -49,7 +57,7 @@ slug: Web/HTML/Attributes/accept

``` -{{EmbedLiveSample('simple_example', '100%', 200)}} +{{EmbedLiveSample('Examples', '100%', 200)}} なお、最後の例では複数の画像を選択することができます。詳しくは [`multiple`](multiple) 属性を参照してください。 @@ -95,7 +103,7 @@ div { {{EmbedLiveSample('A_basic_example', 650, 60)}} -> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 +> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。 @@ -109,7 +117,7 @@ div { - `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付ける。 - `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付ける。 -- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。) +- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける（また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。） - `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思しきすべてのファイルを受け付ける。 もっと完全な例を見てみましょう。 @@ -148,5 +156,5 @@ div { ## 関連情報 -- [ウェブアプリケーションからのファイルの使用](/ja/docs/Using_files_from_web_applications) -- [File API](/ja/docs/Web/API/File) +- [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) +- [ファイル API](/ja/docs/Web/API/File) diff --git a/files/ja/web/html/attributes/autocomplete/index.md b/files/ja/web/html/attributes/autocomplete/index.md index 972b4e03a2a409..829aae217beb3f 100644 --- a/files/ja/web/html/attributes/autocomplete/index.md +++ b/files/ja/web/html/attributes/autocomplete/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: autocomplete" slug: Web/HTML/Attributes/autocomplete +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -21,6 +23,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 > 2. `
` 要素の子孫であること > 3. フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと +{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}} + ## 値 - "`off`" @@ -115,7 +119,7 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 - "`bday-year`" - : 生年月日の年の部分です。 - "`sex`" - - : 性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。 + - : 性別で ("Female", "Fa'afafine", "Hijra", "Male", "Nonbinary" など)、改行のない自由な形式のテキストです。 - "`tel`" - : 国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 diff --git a/files/ja/web/html/attributes/capture/index.md b/files/ja/web/html/attributes/capture/index.md index 889cc262b00f54..6661e840826a74 100644 --- a/files/ja/web/html/attributes/capture/index.md +++ b/files/ja/web/html/attributes/capture/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: capture" slug: Web/HTML/Attributes/capture +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,7 +11,7 @@ slug: Web/HTML/Attributes/capture 値としては、 `user` と `environment` があります。 capture 属性は {{HTMLElement("input/file", "file")}} 入力型が対応しています。 -`capture` 属性は、 [accept](accept) 属性が画像や動画データの入力に使用するカメラの種類を指定する文字列を値とするものです。 +`capture` 属性は、[accept](accept) 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。 | 値 | 説明 | | ------------- | ---------------------------------------- | @@ -18,6 +20,8 @@ slug: Web/HTML/Attributes/capture > **メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。 +{{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}} + ## 例 ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェースが表示されます。 diff --git a/files/ja/web/html/attributes/crossorigin/index.md b/files/ja/web/html/attributes/crossorigin/index.md index e8904c19c1bf05..af434de6c2544b 100644 --- a/files/ja/web/html/attributes/crossorigin/index.md +++ b/files/ja/web/html/attributes/crossorigin/index.md @@ -1,20 +1,22 @@ --- title: "HTML 属性: crossorigin" slug: Web/HTML/Attributes/crossorigin +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`crossorigin`** 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 [CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 +**`crossorigin`** 属性は、{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}} の各要素で有効です。[CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 メディア要素の `crossorigin` コンテンツ属性は CORS 設定属性です。 -これらの属性は列挙型で、以下の値を取ることができます。 +これらの属性は[列挙型](/ja/docs/Glossary/Enumerated)で、以下の値を取ることができます。 - `anonymous` - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'same-origin'` に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド SSL 証明書、HTTP 認証による**ユーザー資格情報**の交換は行われません。 - `use-credentials` - - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**は常に含まれます。 + - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**が常に含まれます。 - `""` - : `crossorigin` または `crossorigin=""` のように属性に空の値を設定すると、 `anonymous` と同じになります。 @@ -37,7 +39,7 @@ slug: Web/HTML/Attributes/crossorigin script - {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 + {{domxref('Window.error_event', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 diff --git a/files/ja/web/html/attributes/disabled/index.md b/files/ja/web/html/attributes/disabled/index.md index 4511a3935c23c7..446cb506db246b 100644 --- a/files/ja/web/html/attributes/disabled/index.md +++ b/files/ja/web/html/attributes/disabled/index.md @@ -1,15 +1,21 @@ --- title: "HTML 属性: disabled" slug: Web/HTML/Attributes/disabled +l10n: + sourceCommit: a9323bfa9a5c937633786a29124fd308bfa8d29d --- {{HTMLSidebar}} **`disabled`** は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-disabled.html", "tabbed-standard")}} + +## 概要 + フォームコントロールに `disabled` 属性が指定された場合、その要素とフォームコントロールの子孫は制約検証が行われません。多くの場合、ブラウザーはそのようなコントロールをグレーアウトし、マウスクリックやフォーカス関連のイベントなどの閲覧イベントを受け取りません。 -`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 +`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 論理属性の disabled は、ユーザーがコントロールやその子孫のコントロールと対話できないことを示します。この属性が指定されていない場合、コントロールは、例えば `fieldset` のような包含要素からその設定を継承します。 `disabled` 属性が設定されている包含要素がなく、コントロール自体がこの属性を持っていない場合、コントロールは有効になります。 {{ HTMLElement("optgroup") }}上で宣言された場合、 select は（特に無効化されていない限り）操作可能になりますが、オプショングループの項目はどれも選択不可能になります。 @@ -70,7 +76,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし

+

@@ -100,7 +106,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし ``` -{{EmbedLiveSample('Examples', 500, 300)}} +{{EmbedLiveSample('Examples', 500, 450)}} ## 仕様書 diff --git a/files/ja/web/html/attributes/elementtiming/index.md b/files/ja/web/html/attributes/elementtiming/index.md index f494d02ee20416..3eb78a6120e88d 100644 --- a/files/ja/web/html/attributes/elementtiming/index.md +++ b/files/ja/web/html/attributes/elementtiming/index.md @@ -2,12 +2,16 @@ title: "HTML 属性: elementtiming" slug: Web/HTML/Attributes/elementtiming l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`elementtiming`** 属性は、要素が{{domxref("Element Timing API", "要素タイミング API", "", 1)}} による追跡のためのフラグを立てていることを示すために使用されます。この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 +**`elementtiming`** 属性は、ある要素が {{domxref("PerformanceObserver")}} オブジェクトで `"element"` 型を使用したものによる追跡のためのフラグを立てていることを示すために使用されます。詳細は、 {{domxref("PerformanceElementTiming")}} インターフェイスを参照してください。 + +この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 + +DOM では、この属性は {{domxref("Element.elementTiming")}} として反映されます。 ## 使用方法 @@ -34,4 +38,5 @@ l10n: ## 関連情報 -- [Custom metrics](https://web.dev/custom-metrics/) +- {{domxref("PerformanceElementTiming")}} +- {{domxref("Element.elementTiming")}} diff --git a/files/ja/web/html/attributes/for/index.md b/files/ja/web/html/attributes/for/index.md index d45126448402d1..3e8fbad6f40a95 100644 --- a/files/ja/web/html/attributes/for/index.md +++ b/files/ja/web/html/attributes/for/index.md @@ -2,7 +2,7 @@ title: "HTML 属性: for" slug: Web/HTML/Attributes/for l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md index 8f4c567b34e277..f8f76d48bcba45 100644 --- a/files/ja/web/html/attributes/index.md +++ b/files/ja/web/html/attributes/index.md @@ -2,7 +2,7 @@ title: HTML 属性リファレンス slug: Web/HTML/Attributes l10n: - sourceCommit: 076a9f924e4619b4f5129c2ec7440420d05b5ec5 + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar("Attributes")}} @@ -72,7 +72,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - allow + allow {{ HTMLElement("iframe") }} iframe の機能ポリシーを指定します。 @@ -404,7 +404,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - decoding + decoding {{ HTMLElement("img") }} 画像をデコードする推奨の方法を示します。 @@ -696,7 +696,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - intrinsicsize + intrinsicsize {{deprecated_inline}} {{ HTMLElement("img") }} @@ -718,7 +718,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - ismap + ismap {{ HTMLElement("img") }} 画像がサーバーサイドイメージマップの一部であることを示します。 @@ -1098,7 +1098,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - sandbox + sandbox {{ HTMLElement("iframe") }} @@ -1204,7 +1204,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - srcdoc + srcdoc {{ HTMLElement("iframe") }} diff --git a/files/ja/web/html/attributes/max/index.md b/files/ja/web/html/attributes/max/index.md index 429eaa4c01f91e..a750918d526380 100644 --- a/files/ja/web/html/attributes/max/index.md +++ b/files/ja/web/html/attributes/max/index.md @@ -1,11 +1,13 @@ --- title: "HTML 属性: max" slug: Web/HTML/Attributes/max +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 +**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 これは数値入力型、例えば {{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')}} 要素で有効であり、 `max` 属性はフォームコントロールで妥当と見なされる最も大きな値を指定する数値です。 @@ -73,7 +75,7 @@ slug: Web/HTML/Attributes/max > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 {{htmlelement('progress')}} 要素における `max` 属性は、 `progress` 要素で示されたタスクの作業の必要量を記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における `max` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値（[`min`](/ja/docs/Web/HTML/Attributes/min) 属性）よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -129,8 +131,8 @@ slug: Web/HTML/Attributes/max - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`min`](/ja/docs/Web/HTML/Attributes/min) - 他の meter の属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeOverflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/maxlength/index.md b/files/ja/web/html/attributes/maxlength/index.md index e19e9da1dcc26f..f522817ba4297b 100644 --- a/files/ja/web/html/attributes/maxlength/index.md +++ b/files/ja/web/html/attributes/maxlength/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: maxlength" slug: Web/HTML/Attributes/maxlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -15,6 +17,8 @@ maxlength が指定されなかった場合、または無効な値が指定さ ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-maxlength.html", "tabbed-shorter")}} + ## 例 ```html @@ -36,6 +40,6 @@ maxlength が指定されなかった場合、または無効な値が指定さ - [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/min/index.md b/files/ja/web/html/attributes/min/index.md index 65209e6c8d42a6..7decb07cb0299b 100644 --- a/files/ja/web/html/attributes/min/index.md +++ b/files/ja/web/html/attributes/min/index.md @@ -1,11 +1,15 @@ --- title: "HTML 属性: min" slug: Web/HTML/Attributes/min +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#attr-value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 `max` 属性の値以下でなければなりません。 `min` 属性が指定されていないか無効であった場合、最小値は適用されません。 +**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより小さい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、`max` 属性の値以下でなければなりません。 + +入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 `min` に有効な数値に変換できない値が指定された場合（あるいは最小値が設定されなかった場合）、その入力には最小値が設定されません。 これは数値入力型、例えば {{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')}} 要素で有効であり、 `min` 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。 @@ -71,7 +75,7 @@ slug: Web/HTML/Attributes/min > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 {{htmlelement('meter')}} 要素における `min` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 ([`max`](/ja/docs/Web/HTML/Attributes/max) 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -141,8 +145,8 @@ input:invalid { - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`max`](/ja/docs/Web/HTML/Attributes/max) - その他の meter 属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeUnderflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/minlength/index.md b/files/ja/web/html/attributes/minlength/index.md index aa3f8a14328283..fbd64fafa83a0c 100644 --- a/files/ja/web/html/attributes/minlength/index.md +++ b/files/ja/web/html/attributes/minlength/index.md @@ -1,14 +1,18 @@ --- title: "HTML 属性: minlength" slug: Web/HTML/Attributes/minlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 +**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が `true` を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-minlength.html", "tabbed-shorter")}} + ## 例 `minlength="5"` を追加すると、値は空か 5 文字以上でないと有効にはならなくなります。 @@ -18,7 +22,7 @@ slug: Web/HTML/Attributes/minlength ``` -擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 +擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null （空欄）または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 ```css input { @@ -47,6 +51,6 @@ input:invalid:focus { - [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/multiple/index.md b/files/ja/web/html/attributes/multiple/index.md index fbe61ac7f2270d..b2166cbb123fe8 100644 --- a/files/ja/web/html/attributes/multiple/index.md +++ b/files/ja/web/html/attributes/multiple/index.md @@ -1,23 +1,29 @@ --- title: "HTML 属性: multiple" slug: Web/HTML/Attributes/multiple +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} 論理属性の **`multiple`** 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-multiple.html", "tabbed-standard")}} + +## 概要 + 型によっては、`multiple` 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに `multiple` 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。 -`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個 ([`required`](/ja/docs/Web/HTML/Attributes/required) がない場合)、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 +`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個（[`required`](/ja/docs/Web/HTML/Attributes/required) がない場合）、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 ```html ``` -`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。 +`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。 -`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (Shift か Control を押したまま、それからクリックするなど) で選択することができます。 +`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法（Shift か Control を押したまま、それからクリックするなど）で選択することができます。 ```html @@ -28,7 +34,7 @@ slug: Web/HTML/Attributes/multiple `multiple` 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。 ```html - @@ -58,11 +64,11 @@ slug: Web/HTML/Attributes/multiple multiple name="emails" id="emails" - list="drawfemails" + list="dwarf-emails" required size="64" /> - + @@ -92,7 +98,7 @@ input:invalid { ```html

- +

- - @@ -137,7 +143,7 @@ input:invalid {

- + + Enter your phone number in the format (123) - 456 - 7890 ()- + size="2" />) - ``` -ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) 属性によってそれぞれ設定されています。 +ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で `pattern` 属性によってそれぞれ設定されています。 値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。 @@ -69,13 +79,13 @@ input:invalid { } ``` -{{EmbedLiveSample("example1", 300, 40)}} +{{EmbedLiveSample("Matching_a_phone_number", 300, 80)}} 代わりに [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) と [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。 ### パターンの指定 -[`pattern`](/ja/docs/Web/HTML/Element/input#pattern) 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 +{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。 @@ -115,13 +125,13 @@ input + span { padding-right: 30px; } -input:invalid + span:after { +input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } -input:valid + span:after { +input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; @@ -148,6 +158,6 @@ This renders like so: ## 関連情報 -- [Constraint validation](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation) -- [Forms: Data form validation](/ja/docs/Web/Guide/HTML/Forms/Data_form_validation) -- [Regular Expressions](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [フォーム: データフォーム検証](/ja/docs/Learn/Forms/Form_validation) +- [正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) diff --git a/files/ja/web/html/attributes/readonly/index.md b/files/ja/web/html/attributes/readonly/index.md index 0f069514b1e91c..4c790a12f5e861 100644 --- a/files/ja/web/html/attributes/readonly/index.md +++ b/files/ja/web/html/attributes/readonly/index.md @@ -1,19 +1,25 @@ --- title: "HTML 属性: readonly" slug: Web/HTML/Attributes/readonly +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} **`readonly`** は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-readonly.html", "tabbed-shorter")}} + +## 概要 + `readonly` 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。 -`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{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")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 `{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、 `{{cssxref(':read-write')}}` 擬似クラスが一致します。 +`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{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")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、`{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、`{{cssxref(':read-write')}}` 擬似クラスが一致します。 -この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、 {{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 {{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。 {{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、 `image` を含め、すべて対応していません。 +この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、{{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。{{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。{{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。 -> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 +> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 入力に `readonly` 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。 @@ -29,7 +35,7 @@ readonly が付いた値を動的に変更できる唯一の方法は、スク ### ユーザビリティ -ブラウザーは `readonly` 属性を表示します... +ブラウザーは `readonly` 属性を表示します。 ### 制約検証 diff --git a/files/ja/web/html/attributes/required/index.md b/files/ja/web/html/attributes/required/index.md index d1a9d216396224..4be75d16fb4619 100644 --- a/files/ja/web/html/attributes/required/index.md +++ b/files/ja/web/html/attributes/required/index.md @@ -1,23 +1,25 @@ --- title: "HTML 属性: required" slug: Web/HTML/Attributes/required +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 `required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{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/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 +論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 + +`required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{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/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 `image` を含むボタンの種類もいずれも対応していません。 なお、 `color` と `range` は `required` に対応していませんが、 `color` 型は既定値が `#000000` であり、 `range` は、 `min` と `max` の中間点が既定値です。 — 宣言されていない場合、ほとんどのブラウザーでは `min` と `max` の既定値はそれぞれ 0 と 100 です。 — 従って、常に値があります。 -入力欄に `required` 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 `required` 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。 - 同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに `required` 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに `required` 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。 同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 `required` 属性がついたチェックボックスのみが必須になります。 -> **メモ:** `aria-required="true"` を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。 +> **メモ:** `aria-required="true"` を設定すると、ある要素（任意の要素）が必須であることを画面リーダーに伝えますが、その要素が任意であるかどうかには関係ありません。 ### 属性の相互作用 @@ -25,7 +27,7 @@ slug: Web/HTML/Attributes/required ### ユーザビリティ -`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ `required` に対応していない場合には問題ありません。 +`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと画面リーダーの組み合わせがまだ `required` に対応していない場合には問題ありません。 ### 制約検証 @@ -55,7 +57,7 @@ slug: Web/HTML/Attributes/required ### 結果 -{{EmbedLiveSample('Examples')}} +{{EmbedLiveSample('Example')}} ## 仕様書 @@ -67,7 +69,7 @@ slug: Web/HTML/Attributes/required ## 関連情報 -- {{cssxref('validityState.valueMissing')}} +- {{domxref('validityState.valueMissing')}} - {{cssxref(':required')}} および {{cssxref(':optional')}} - {{htmlelement('input')}} - {{htmlelement('select')}} diff --git a/files/ja/web/html/attributes/size/index.md b/files/ja/web/html/attributes/size/index.md index 037cc879e2f3b3..0cbaa689a87d3c 100644 --- a/files/ja/web/html/attributes/size/index.md +++ b/files/ja/web/html/attributes/size/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: size" slug: Web/HTML/Attributes/size +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,6 +11,8 @@ slug: Web/HTML/Attributes/size `size` 属性は制約検証には影響しません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-size.html", "tabbed-standard")}} + ## 例 一部の入力型で `size` を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。 diff --git a/files/ja/web/html/attributes/step/index.md b/files/ja/web/html/attributes/step/index.md index 7e88a2c86b407d..703de8632cd0f4 100644 --- a/files/ja/web/html/attributes/step/index.md +++ b/files/ja/web/html/attributes/step/index.md @@ -1,6 +1,8 @@ --- -title: "HTML attribute: step" +title: "HTML 属性: step" slug: Web/HTML/Attributes/step +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -98,7 +100,7 @@ input:invalid { > **メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスに一致します。 -詳しくは[クライアント側制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 +詳しくは[クライアント側制約検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 ## アクセシビリティの考慮 @@ -116,8 +118,8 @@ input:invalid { - [`max`](/ja/docs/Web/HTML/Attributes/max) - [`min`](/ja/docs/Web/HTML/Attributes/min) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.stepMismatch')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}}