recursal/MDN huggingface dataset:
inert
=====

**`inert`** グローバル属性は論理属性で、これは論理属性で、ブラウザーがその要素を無視することを示します。`inert` 属性を使うと、要素のフラットツリーの子孫（モーダルの `<dialog>` など）のうち、不活性化を免れないものはすべて無視されます。`inert` 属性は、フォーカス関連のイベントや支援技術からのイベントなど、ユーザーから送られる入力イベントもブラウザーが無視するようにします。

具体的には、`inert`は以下のことを行います。

* ユーザーが要素をクリックしたときに `click` イベントが発行されないようにします。
* 要素にフォーカスが当たらないようにして、 `focus` イベントが発生することを防ぎます。
* 要素およびそのコンテンツをアクセシビリティツリーから除外することで、支援技術から隠します。


```html
<body inert>
  <!-- content -->
</body>
```


`inert` 属性は、インタラクティブであってはならないコンテンツのセクションに追加することができます。要素が不活性化されると、リンクやボタン、フォームコントロールのような通常インタラクティブな要素を含む、その要素のすべての子孫は、フォーカスを得たりクリックしたりすることができないため、無効となります。

`inert` 属性は、オフスクリーンや非表示にすべき要素にも追加することができます。不活性な要素は、その子孫とともに、タブ順序とアクセシビリティツリーから取り除かれます。

**メモ:** `inert` はグローバルな属性であり、どんな要素にも使用することができますが、一般的にはコンテンツのセクションに使用されます。個々のコントロールを「不活性」にするには、代わりに `disabled` 属性と CSS の `:disabled` スタイルを使用することを考えてみてください。

アクセシビリティの考慮
-----------

inert` 属性を使用する際には、アクセシビリティに十分配慮してください。既定では、要素やそのサブツリーが不活性であるかどうかを視覚的に指示する方法はありません。ウェブ開発者として、アクティブなコンテンツ部分と不活性なコンテンツ部分を明確に示すことは、あなたの責任です。

コンテンツの不活性化について視覚的・非視覚的な手がかりを提供する一方で、視覚ビューポートにはコンテンツの一部しか格納されていない可能性があることも覚えておいてください。ユーザーはコンテンツの小さなセクションにズームインされるかもしれませんし、コンテンツをまったく見ることができないかもしれません。不活性な節が不活性に見えない場合、不満や使い勝手の悪さにつながる可能性があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-inert-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML の `<dialog>` 要素
* Introducing inert
* The "inert" attribute is finally coming to the web
virtualkeyboardpolicy
=====================

**`virtualkeyboardpolicy`** はグローバル属性で、列挙型の属性です。`contenteditable` 属性を使用している要素に指定すると、タブレットや携帯電話など、ハードウェアキーボードが利用できないような端末での画面の仮想キーボードの動作を制御することができます。

この属性は、以下の値のいずれかを取る必要があります。

* `auto` または空文字列の場合は、この要素がフォーカスまたはタップされた際に、自動的に仮想キーボードを表示します。
* `manual` の場合は、要素へのフォーカスやタップを仮想キーボードの状態から切り離します。
仕様書
---

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* すべてのグローバル属性
* `HTMLElement.contentEditable` および `HTMLElement.isContentEditable`
* 仮想キーボード API (en-US)
contenteditable
===============

**`contenteditable`** グローバル属性は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。

試してみましょう
--------

この属性は、以下の値のうち一つを取る必要があります。

* `true` または *空文字列*: 要素が編集可能であることを示す
* `false`: 要素が編集不可であることを示す
* `plaintext-only`: 要素の生のテキストは編集可能だが、リッチテキスト形式が無効であることを示す

この属性が値なしで指定された場合、たとえば `<label contenteditable>Example Label</label>` のような場合、値は空文字列として扱われます。

この属性が存在しないか、値が無効であった場合、値は親要素から継承されます。したがって、親が編集可能であればこの要素は編集可能になります。

なお、許可されている値は `true` と `false` ですが、この属性は列挙型であり、論理属性ではありません。

キャレットの挿入文字列を描画するのに使用される色は、 `caret-color` プロパティで設定できます。

`contentitable` 属性を使用して編集可能になった要素、つまりインタラクティブになった要素は、フォーカスを当てることができます。また、キーボードの連続したナビゲーションに参加することができます。しかし、`contenteditable` 属性を持つ要素が他の `contenteditable` 要素の中に入れ子になっている場合、既定値ではタブ操作の順番に追加されません。`tabindex` 値 (`tabindex="0"`) を指定することにより、ネストした `contenteditable` 要素をキーボードナビゲーションシーケンスに追加することができるようになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* すべてのグローバル属性
* `HTMLElement.contentEditable` および `HTMLElement.isContentEditable`
* CSS の `caret-color` プロパティ
* HTMLElement の `input` イベント
autocapitalize
==============

**`autocapitalize`** グローバル属性は列挙型の属性で、ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうか、どのように行われるかを制御します。

以下の値を指定することができます。

* `off` または `none`: 自動的な大文字化は適用されません (すべての文字は既定で小文字です)。
* `on` または `sentences`: 各文の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。
* `words`: 各語の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。
* `characters`: すべての文字は既定で大文字になります。

`autocapitalize` 属性は、物理キーボードからの入力時の挙動には影響しません。モバイル端末の仮想キーボードや音声入力など、他の入力方式の挙動に影響します。その様な方式では、文の最初の文字を自動的に大文字化することでユーザーを補助することがよくあります。 `autocapitalize` 属性は要素単位の挙動を上書きすることができます。

`autocapitalize` 属性では、 `<input>` 要素の `type` の値が `url`, `email`, `password` の場合は自動大文字化が有効になりません。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTML 属性: maxlength
==================

**`maxlength`** 属性は、ユーザーが `<input>` または `<textarea>` に入力できる最大文字数を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。

maxlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最大長が設定されません。

`maxlength` の値はすべて、 `minlength` が存在して有効である場合は、その値以上である必要があります。フィールドのテキスト値の長さが maxlength の UTF-16 コード単位の長さを超える場合、入力欄は制約検証に失敗します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。

### 制約検証

ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 `ValidityState` オブジェクトの読み取り専用の `tooLong` プロパティが true になります。

試してみましょう
--------

例
-


```html
<input type="password" maxlength="4" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-maxlength-and-minlength-attributes |

ブラウザーの互換性
---------

### html.elements.input.maxlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.textarea.maxlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `minlength`
* `size`
* `pattern`
* 制約検証
* 制約検証 API
* `<input>`
HTML 属性: step
=============

**`step`** 属性は、が従わなければならない刻み値を指定する数値、またはキーワード `any` です。数値の入力型、たとえば date, month, week, time, datetime-local, number, range 型に有効です。

`step` は、スピナーボタンを上下にクリックしたり、範囲上でスライダーを左右に動かしたり、異なる日付タイプを検証したりする際の*刻み間隔*を設定します。明示的に指定されていない場合、 `step` の既定値は、 `number` と `range` の場合は 1、日付/時刻入力型の場合は1単位 (分、週、月、日) になります。値は正の整数または浮動小数点数、または刻みが指定されておらず、 (`min` や `max` のような他の制約を除いて) すべての値が可能であることを意味する特別な値 `any` のいずれかでなければなりません。

`number` 入力型の既定の刻み値は 1 で、刻みの基底値が整数でない場合を*除き*、整数のみを入力することができます。 `time` の既定の刻み値は 1 秒で、 900 は15分と等しくなります。

構文
--

step の既定値| 入力型 | 構文 | 例 |
| --- | --- | --- |
| date | 1 (日) | `<input type="date" min="2019-12-25" step="1">` |
| month | 1 (月) | `<input type="month" min="2019-12" step="12">` |
| week | 1 (週) | `<input type="week" min="2019-W23" step="2">` |
| time | 60 (分) | `<input type="time" min="09:00" step="900">` |
| datetime-local | 1 (日) | `<input type="datetime-local" min="2019-12-25T19:30"
step="7">` |
| number | 1 | `<input type="number" min="0" step="0.1" max="10">` |
| range | 1 | `<input type="range" min="0" step="2" max="10">` |

`any` が明示的に設定されていない場合、 `number`, 日付/時刻入力型, `range` の入力型で有効な値は、刻みの基底値と等しくなります。 - `min` の値と、それに step の値を `max` の値 (指定されている場合) まで加えていった値です。例えば、 `<input type="number" min="10" step="2">` は 10 以上の偶数が有効です。省略された場合、 `<input type="number">` は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは `step` の既定値が 1 だからです。 4.2 を有効にするには、 `step` を `any`、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば `<input type="number" min="-5.2">` のようにする必要があります。

### min の step への影響

`min` と `step` の値は、 `step` 属性がない場合も含め、どの値が有効であるかを定義します。 `step` の既定値は `0` です。

無効な入力の周囲に太く赤い境界を追加します。


```css
input:invalid {
  border: solid red 3px;
}
```


それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。


```html
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />
```


有効な値は、 `1.2`, `3.2`, `5.2`, `7.2`, `9.2`, `11.2` などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 `1.2` 以上の有効な浮動小数点以下の値のみ表示されます。

**メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 `:invalid` と `:out-of-range` の擬似クラスに一致します。

詳しくはクライアント側制約検証と `stepMismatch` を参照してください。

アクセシビリティの考慮
-----------

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 `min` 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 `<label>` 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 `aria-labelledby` または `aria-describedby` を使用することを検討してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-input-step |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `max`
* `min`
* 制約検証
* 制約検証 API
* `validityState.stepMismatch`
* `:out-of-range`
* `<input>`
* date, month, week, time, datetime-local, number, range 型と `<meter>`
HTML 属性: placeholder
====================

**`placeholder`** 属性は、フォームコントロールに値が無いときにコントロールに表示するテキストを定義します。プレースホルダーテキストは、ユーザーにコントロールに入力するべきデータの種類に関する短いヒントを提供するべきです。

効果的なプレースホルダーテキストは、説明や質問ではなく、期待するデータの種類のヒントとなる単語や短いフレーズです。プレースホルダーを `<label>` のかわりに用いてはいけません。プレースホルダーはフォームコントロールの値が空でないときは見えないので、`<label>` のかわりに `placeholder` に質問を書くと使いやすさとアクセシビリティを損ねます。

`placeholder` 属性は、入力の種類 `text`、`search`、`url`、`tel`、`email`、`password` で用いることができます。``<textarea>`` 要素でも用いることができます。以下の例では、入力フィールドで期待する形式を示すために `placeholder` 属性を用いています。

**メモ:** `placeholder` 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。

アクセシビリティの懸念
-----------

プレースホルダーはフォームに入力するべきデータの種類の例を示すためのみに用いるべきです。決して `<label>` 要素の代替として用いてはいけません。そのような使用法は、アクセシビリティとユーザー体験を損ねます。

`<label>` のテキストは、視覚上、そしてプログラム上対応するフォームコントロールと紐づいています。スクリーンリーダーはデフォルトではプレースホルダーの内容を読み上げませんが、ラベルの内容は読み上げます。補助技術を用いるユーザーに、コントロールにどのようなデータを入力するべきかを伝えるのは、ラベルです。ラベルは、ポインティングデバイスを用いているユーザーのユーザー体験も向上させます。ユーザーが `<label>` をクリック・タッチ・タップすると、そのラベルに紐づいたフォームコントロールにフォーカスが移動します。

補助技術に頼っていない人にとっても、プレースホルダーはラベルの代替として信頼することはできません。プレースホルダーテキストは、通常のフォームコントロールテキストより低いカラーコントラストで表示されます。これは、ユーザーにプレースホルダーテキストとフォームフィールドに入力したデータを混同させないための仕様です。しかし、このようにコントラストが低いことは、弱視のユーザーにとって問題になります。さらに、プレースホルダーテキストは、ユーザーがテキストの入力を始めるとフォームフィールドから消えます。消えるプレースホルダーテキストに指示の情報や例が含まれていると、認知に問題があるユーザーを混乱させる可能性があります。プレースホルダーにラベルが含まれる場合は、フォームが使用できなくなる可能性があります。

例
-

### HTML


```html
<form action="/ja/docs/Web/HTML/Attributes/placeholder">
  <label for="name">名前を入力:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">送信</button>
</form>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-input-placeholder |

ブラウザーの互換性
---------

### html.elements.input.placeholder

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.textarea.placeholder

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML `title`
* CSS `:placeholder-shown` 擬似クラスセレクター
* CSS `::placeholder` 疑似要素セレクター
HTML 属性: min
============

**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 (`value`) がこれより小さい場合、その要素は制約検証に失敗します。この値は、`max` 属性の値以下でなければなりません。

入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 `min` に有効な数値に変換できない値が指定された場合（あるいは最小値が設定されなかった場合）、その入力には最小値が設定されません。

これは数値入力型、例えば date, month, week, time, datetime-local, number, range 型や `<meter>` 要素で有効であり、 `min` 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。

### 構文

`min` の構文（入力 `type` 別）| 入力型 | 構文 | 例 |
| --- | --- | --- |
| date | `yyyy-mm-dd` | `<input type="date" min="2019-12-25" step="1">` |
| month | `yyyy-mm` | `<input type="month" min="2019-12" step="12">` |
| week | `yyyy-W##` | `<input type="week" min="2019-W23" step="">` |
| time | `hh:mm` | `<input type="time" min="09:00" step="900">` |
| datetime-local | `yyyy-mm-ddThh:mm` | `<input type="datetime-local" min="2019-12-25T19:30">` |
| number | <number> | `<input type="number" min="0" step="5" max="100">` |
| range | <number> | `<input type="range" min="60" step="5" max="100">` |

**メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 `:invalid` の擬似クラスに一致するようになります。

詳しくは クライアント側検証と `rangeUnderflow` を参照してください。

`<meter>` 要素における `min` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (`max` 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

その他の要素における `min` 値の構文| 入力型 | 構文 | 例 |
| --- | --- | --- |
| `<meter>` | <number> | `<meter id="fuel" min="0" max="100" low="33" high="66"
optimum="80" value="40"> at 40/100</meter>` |

### step への影響

`min` と `step` の値は、 `step` 属性がない場合も含め、どの値が有効であるかを定義します。 `step` の既定値は `0` です。

無効な入力の周囲に太く赤い境界を追加します。


```css
input:invalid {
  border: solid red 3px;
}
```


それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。


```html
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />
```


`step` の既定値は 1 なので、有効な値は `7.2`, `8.2`, `9.2`, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。

明示的に含まれていない限り、 `number`、 `range` では `step` は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。

アクセシビリティの考慮
-----------

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 `min` 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 `<label>` 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 `aria-labelledby` または `aria-describedby` を使用することを検討してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-min-and-max-attributes |
| HTML Standard # attr-meter-max |

ブラウザーの互換性
---------

### html.elements.input.min

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.meter.min

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `step`
* `max`
* その他の meter 属性: `low`, `high`, `optimum`
* 制約検証
* 制約検証 API
* `validityState.rangeUnderflow`
* `:out-of-range`
* `<input>`
* date, month, week, time, datetime-local, number, range 型、 `<meter>`
HTML 属性: max
============

**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 (`value`) がこれより大きい場合、その要素は制約検証に失敗します。この値は、 `min` 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。

これは数値入力型、例えば date, month, week, time, datetime-local, number, range 型や `<progress>` および `<meter>` 要素で有効であり、 `max` 属性はフォームコントロールで妥当と見なされる最も大きな値を指定する数値です。

値が許容される最大値を超えた場合、 `validityState.rangeOverflow` が true となり、そのコントロールは `:out-of-range` および `:invalid` 擬似クラスに一致するようになります。

### 構文

`max` の構文（入力 `type` 別）| Input type | Syntax | Example |
| --- | --- | --- |
| date | `yyyy-mm-dd` | `<input type="date" max="2019-12-25" step="1">` |
| month | `yyyy-mm` | `<input type="month" max="2019-12" step="12">` |
| week | `yyyy-W##` | `<input type="week" max="2019-W23" step="">` |
| time | `hh:mm` | `<input type="time" max="17:00" step="900">` |
| datetime-local | `yyyy-mm-ddThh:mm` | `<input type="datetime-local" max="2019-12-25T23:59">` |
| number | <number> | `<input type="number" min="0" step="5" max="100">` |
| range | <number> | `<input type="range" min="60" step="5" max="100">` |

**メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 `:invalid` と `:out-of-range` の擬似クラスに一致するようになります。

詳しくは クライアント側検証と `rangeOverflow` を参照してください。

`<progress>` 要素における `max` 属性は、 `progress` 要素で示されたタスクの作業の必要量を記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 `<meter>` 要素における `max` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値（`min` 属性）よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

その他の要素における `max` 値の構文| 入力型 | 構文 | 例 |
| --- | --- | --- |
| `<progress>` | <number> | `<progress id="file" max="100" value="70"> 70%
</progress>` |
| `<meter>` | <number> | `<meter id="fuel" min="0" max="100" low="33" high="66"
optimum="80" value="40"> at 40/100</meter>` |

アクセシビリティの考慮
-----------

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 `max` 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 `<label>` 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 `aria-labelledby` または `aria-describedby` を使用することを検討してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-min-and-max-attributes |
| HTML Standard # attr-meter-max |
| HTML Standard # attr-progress-max |

ブラウザーの互換性
---------

### html.elements.input.max

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.meter.max

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.progress.max

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `step`
* `min`
* 他の meter の属性: `low`, `high`, `optimum`
* 制約検証
* 制約検証 API
* `validityState.rangeOverflow`
* `:out-of-range`
* `<input>`
* date, month, week, time, datetime-local, number, range 型、 `<meter>` 要素
HTML 属性: required
=================

論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。

`required` 属性は `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `checkbox`, `radio`, `file` の `<input>` 型と `<select>` および `<textarea>` のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 `:required` 擬似クラスが一致します。属性が設定されていない場合は `:optional` 擬似クラスが一致します。

この属性は range と color は対応していませんし、どちらも既定値を持っているので関係がありません。 hidden は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 `image` を含むボタンの種類もいずれも対応していません。

なお、 `color` と `range` は `required` に対応していませんが、 `color` 型は既定値が `#000000` であり、 `range` は、 `min` と `max` の中間点が既定値です。 — 宣言されていない場合、ほとんどのブラウザーでは `min` と `max` の既定値はそれぞれ 0 と 100 です。 — 従って、常に値があります。

同じ名前が付けられた radio ボタンのグループのでは、グループ内の一つのラジオボタンに `required` 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに `required` 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。

同じ名前が付けられた checkbox 入力型のグループでは、 `required` 属性がついたチェックボックスのみが必須になります。

**メモ:** `aria-required="true"` を設定すると、ある要素（任意の要素）が必須であることを画面リーダーに伝えますが、その要素が任意であるかどうかには関係ありません。

### 属性の相互作用

読み取り専用フィールドは値を持つことができないので、 `required` は `readonly` 属性が指定されている入力欄には影響を与えません。

### ユーザビリティ

`required`属性を設定する、その `<input>`, `<select>`, `<textarea>` が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを `:required` 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと画面リーダーの組み合わせがまだ `required` に対応していない場合には問題ありません。

### 制約検証

要素が必須で、かつ要素の値が空文字列の場合、その要素は `valueMissing` に悩まされ、その要素が `:invalid` 擬似クラスに一致してします。

アクセシビリティの考慮
-----------

ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。

例
-

### HTML


```html
<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>
```

### 結果

仕様書
---

{{Specifications}}ブラウザーの互換性
---------

{{Compat}}関連情報
----

* `validityState.valueMissing`
* `:required` および `:optional`
* `<input>`
* `<select>`
HTML 属性: elementtiming
======================

**`elementtiming`** 属性は、ある要素が `PerformanceObserver` オブジェクトで `"element"` 型を使用したものによる追跡のためのフラグを立てていることを示すために使用されます。詳細は、 `PerformanceElementTiming` インターフェイスを参照してください。

この属性は `<img>`、 `<svg>` の中の `<image>` 要素、 `<video>` 要素のポスター画像、 `background-image` がある要素、及び `<p>` などテキストノードを持つ要素に対して適用することができます。

DOM では、この属性は `Element.elementTiming` として反映されます。

使用方法
----

`elementtiming` に指定された値は、観測された要素の識別子になります。


```html
<img alt="alt" src="img.jpg" elementtiming="label for element" />
```


観察したい要素のグッドコンテンダーは以下の通りです。

* 記事のメイン画像
* ブログ投稿のタイトル
* ショッピングサイトのカルーセル内の画像
* ページ内の主要動画のポスター画像
例
-


```html
<img alt="Alt for a main blog post image" src="my-massive-image.jpg" elementtiming="Main image">

<p elementtiming="important-text">Some very important information.</p">
```

関連情報
----

* `PerformanceElementTiming`
* `Element.elementTiming`
HTML 属性: crossorigin
====================

**`crossorigin`** 属性は、`<audio>`, `<img>`, `<link>`, `<script>`, `<video>` の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。

メディア要素の `crossorigin` コンテンツ属性は CORS 設定属性です。

これらの属性は列挙型で、以下の値を取ることができます。

`anonymous`

リクエストは CORS ヘッダーを使用し、資格情報フラグには `'same-origin'` に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド SSL 証明書、HTTP 認証による**ユーザー資格情報**の交換は行われません。

`use-credentials`

リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**が常に含まれます。

`""`

`crossorigin` または `crossorigin=""` のように属性に空の値を設定すると、 `anonymous` と同じになります。

不正なキーワードや空文字列を指定すると、 `anonymous` が指定されたものと同じように扱われます。

既定では（つまり、属性が指定されていない場合）、 CORS はまったく使用されません。ユーザーエージェントはそのリソースへの完全アクセス権限を求めず、オリジン間リクエストの場合、その要素の種類に応じて一定の制限が適用されます。

|  |  |
| --- | --- |
| 要素 | 制限 |
| `img`, `audio`, `video` | そのリソースが `<canvas>` 内に配置された場合、要素は*汚染*されているとマークされます。 |
| `script` | `window.onerror` によるエラーログへのアクセスが制限されます。 |
| `link` | 適切な `crossorigin` ヘッダーがないリクエストは破棄されることがあります。 |

**メモ:** Firefox 83 より前では、 `crossorigin` 属性は `rel="icon"` に対応していませんでした。 Chrome についての未解決の問題もあります。

### 例: `<script>` 要素の `crossorigin`

以下の `<script>` 要素を使用すると、ユーザー資格情報を送信せずに `https://example.com/example-framework.js` スクリプトを実行します。


```html
<script
 src="https://example.com/example-framework.js"
 crossorigin="anonymous"></script>
```

### 例: 資格情報付きのウェブマニフェスト

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても `use-credentials` の値を使用する必要があります。


```html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

ブラウザーの互換性
---------

### html.elements.img.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.link.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.script.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.video.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* オリジン間リソース共有 (CORS)
* HTML 属性: `rel`
HTML 属性: size
=============

**`size`** 属性は、 `<input>` 要素の幅と `<select>` 要素の高さを定義します。 `input` については、 `type` 属性が text または password の場合は文字数です。これは 0 以上の整数でなければなりません。 `size` が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。

`size` 属性は制約検証には影響しません。

試してみましょう
--------

例
-

一部の入力型で `size` を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。


```html
<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>
```

仕様書
---

#### No specification found

No specification data found for `html.elements.attribute.size`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `maxlength`
* `minlength`
* `pattern`
HTML 属性: minlength
==================

**`minlength`** 属性は、ユーザーが `<input>` または `<textarea>` に入力できる最小文字数を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は maxlength の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。

フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 `validityState.tooShort` が `true` を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。

試してみましょう
--------

例
-

`minlength="5"` を追加すると、値は空か 5 文字以上でないと有効にはならなくなります。


```html
<label for="fruit">Enter a fruit name that is at least 5 letters long</label>
<input type="text" minlength="5" id="fruit" />
```


擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null （空欄）または 5 文字以上であれば有効になります。*ライム色*は無効であり、*レモン色は有効です*。


```css
input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink, lightgreen);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-maxlength-and-minlength-attributes |

ブラウザーの互換性
---------

### html.elements.input.minlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.textarea.minlength

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `maxlength`
* `size`
* `pattern`
* 制約検証
* 制約検証 API
* `<input>`