contenteditable - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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.


itemprop - HTML: ハイパーテキストマークアップ言語

itemprop
========

**`itemprop`** はグローバル属性で、アイテムにプロパティを追加するために使用します。すべての HTML 要素に `itemprop` 属性を設定することができ、 `itemprop` は名前と値の組み合わせで構成されます。名前と値の組み合わせは**プロパティ**と呼ばれ、 1 つまたは複数のプロパティで**アイテム**を構成します。プロパティ値は文字列又は URL のどちらかで、 `<audio>`, `<embed>`, `<iframe>`, `<img>`, `<link>`, `<object>`, `<source>`, `<track>`, `<video>` など、広範にわたる要素と関連付けすることができます。

例
-

以下の例は `itemprop` 属性でマークアップされた要素のセットのソースと、その後で結果の構造化データを表す表を示します。

### HTML

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
    Trailer
  </a>
</div>
```

### 構造化データ

|  |  |
| --- | --- |
|  | **Item** |
| **itemprop name** | **itemprop value** |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |

プロパティ
-----

プロパティは、文字列か URL のどちらかの形で値を持ちます。文字列の値が URL である場合、 `<a>` 要素とその `href` 属性、 `<img>` 要素とその `src` 属性、または外部リソースにリンクしたり埋め込んだりするその他の要素を用いて表現されます。

### 文字列の値を持つ 3 つのプロパティ

```html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>
```

### 値が URL である "image" による 1 つのプロパティ

```html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>
```

文字列の値が人間にとって読んだり理解したりするのが簡単ではない場合（例えば、数字や文字による長い文字列）、 data 要素の中身にもっと人間理解しやすいもの（これは構造化データの一部ではありません。―以下の例を参照）を入れた上で、 value 属性を使用して表現することができます。

### 値がプロダクト ID であるプロパティがあるアイテム

ID が人間にとって読みやすくない場合、 ID の代わりに製品名が人間から見える文字列になります。

```html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

数値データの場合、 meter 要素とその value 属性を使用することができます。

### meter 要素

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>
```

同様に、日付や時間に関連するデータについては、 time 要素と datetime 属性を使用することができます。

### 値が日付であるプロパティ、 "birthday" を 1 つだけ持つアイテム

```html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>
```

プロパティはまた、プロパティを宣言する要素で itemscope 属性を置くことによって、名前と値の組のグループを持つことができます。それぞれの値は、文字列か名前と値の組（すなわちアイテム）のグループのいずれかです。

### 外側のアイテムは人物を表し、内側のアイテムはバンドを表す

```html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)</span
 >
  </p>
</div>
```

上の外側のアイテムは、 "name" と "band" の2つのプロパティを持ちます。 "name" は "Amanda" であり、 "band" はそれ自身がアイテムであり、2つのプロパティ "name" と "size" を持ちます。バンドの "name" は "Jazz Band" であり、 "size" は "12" です。この例における外側のアイテムは、トップレベルのマイクロデータアイテムです。他の一部でないアイテムは、トップレベルマイクロデータアイテムと呼ばれます。

### プロパティがすべてアイテムから分離された例

この例は前のものと同じですが、すべてのプロパティがアイテムから分離されています。

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

これは 1 つ前の例と同じ結果になります。最初のアイテムは2つのプロパティを持ちます、 "name" は "Amanda" に設定され、 "band" はもう 1 つのアイテムに設定されます。 2 つ目のアイテムはさらに 2 つのプロパティを持ち、 "name" は "Jazz Band" に設定され、 "size" は "12" に設定されます。

アイテムは同じ名前で異なる値をもつ複数のプロパティを持つことができます。

### 2 つの風味のアイスクリーム

```html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>
```

この結果は 2 つのプロパティを持つアイテムになり、どちらも名前は "flavor" で、値は "Lemon sorbet" および "Apricot sorbet" になります。

プロパティを導入する要素は、複数のプロパティが同じ値を持つ場合に重複を避けるために、一度に複数のプロパティを導入することもできます。

### 2 つのプロパティ "favorite-color" および "favorite-fruit" を持ち、どちらも "orange" の値に設定されるアイテム

```html
<div itemscope>
  <span
 itemprop="favorite-color
 favorite-fruit"
 >orange</span
 >
</div>
```

**メモ:** マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。

### 2 つの異なる方法でマークアップされた同じ構造化データ

以下の 2 つの例には意味的な違いはありません。

```html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
```

```html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>
```

どちらも caption を伴う figure を持ち、両者とも、 figure に完全に関連しない、名前 "name" と値 "The Castle" をもつ名前と値の組を持つアイテムを持ちます。唯一の違いは、ユーザーが文書の外に figcaption をドラッグする場合、アイテムがドラッグ＆ドロップデータに含まれることです。アイテムに関連付けられる画像は含まれません。

名前と値
----

プロパティは、大文字小文字を区別して名前と値の組を表す一意なトークンの順序なしセットです。下記の例で、それぞれのデータセルはトークンです。

### 名前の例

|  | Item |
| --- | --- |
| itemprop **name** | itemprop **value** |
| itemprop | country | Ireland |
| itemprop | Option | 2 |
| itemprop | https://www.flickr.com/photos/nlireland/6992065114/ | Ring of Kerry |
| itemprop | img | https://www.flickr.com/photos/nlireland/6992065114/ |
| itemprop | website | flickr |
| itemprop | (token) | (token) |

**トークン**は、文字列か URL のいずれかです。アイテムは、 URL の場合に**型付きアイテム**と呼ばれます。そうでなければ文字列です。文字列は、ピリオドまたはコロンを含むことができません（下記参照）。

1. アイテムが型付きアイテムの場合、次のいずれかでなければなりません。
    1. 定義されたプロパティ名。
    2. または、妥当な URL。これは、語彙定義を参照します。
    3. 独自のアイテムプロパティ名を表す妥当な URL （つまり、公式な私用で定義されていないもの）。
2. アイテムが型付きアイテムでない場合は、次のようになります。
    1. "`.`" (U+002E FULL STOP) 文字と "`:`" (U+003A COLON) 文字を含まず、所有者のアイテムプロパティ名 (公式な仕様で定義されないもの) として使用される文字列。

**メモ:** 上記の規則では、URL ではない値では ":" が許可されていません。そうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。

値
-

名前と値の組のプロパティ値は、次のリストで最初に一致するものに与えられます。

* 要素が `itemscope` 属性を持つ場合
    + 値は要素によって作成された**アイテム**を持つ
* 要素が `meta` 要素である場合
    + 値は、要素の `content` 属性の値である
* 要素が `audio`, `embed`, `iframe`, `img`, `source`, `track`, `video` 要素である場合
    + 値は、属性が設定される時に要素のノード文書（マイクロデータ DOM API の一部）に関連する要素の src 属性の解析する値に由来する結果の URL 文字列である
* 要素が `a`, `area`, `link` 要素である場合
    + 値は、属性が設定される時に要素のノード文書に関連する要素の href 属性の解析する値に由来する結果の URL 文字列である
* 要素が `object` 要素である場合
    + 値は、属性が設定される時に要素のノード文書に関連する要素の data 属性の解析する値に由来する結果の URL 文字列である
* 要素が `data` 要素である場合
    + 値は、要素の value 属性の値である
* 要素が `meter` 要素である場合
    + 値は、要素の `value` 属性の値である
* 要素が `time` 要素である場合
    + 値は、要素の `datetime` 値である

それ以外

* 値は、要素の *textContent* である。

プロパティの値が `URL` である場合、プロパティは URL プロパティ要素を使用して指定されなければなりません。 URL プロパティ要素は、 `a`, `area`, `audio`, `embed`, `iframe`, `img`, `link`, `object`, `source`, `track`, `video` 要素です。

### 名前の順序

名前は互いに順不同ですが、特定の名前が複数の値を持つ場合、その値は相対的な順序を持ちます。

以下の例では、 "a" プロパティは "1" 及び "2" の値を*その順番で*持ちますが、 "a" プロパティが "b" プロパティの前にくることは重要ではありません

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>
```

以下のものは同等です。

```html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
```

以下も同等です。

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

以下も同等です。

```html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

### 本のための構造化データの表現

この例では、マイクロデータ属性を用いて、以下の構造化データを表現しています。

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 |
| itemprop | title | Owls of the Eastern Ice |
| itemprop | author | Jonathan C Slaght |
| itemprop | datePublished | 2020-08-04 |

#### HTML

```html
<dl
 itemscope
 itemtype="https://schema.org/Book"
 itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # names:-the-itemprop-attribute |

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

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

関連情報
----

* それ以外のグローバル属性
* その他のマイクロデータに関するグローバル属性:
    + `itemid`
    + `itemref`
    + `itemscope`
    + `itemtype`


HTML 属性: pattern - HTML: ハイパーテキストマークアップ言語

HTML 属性: pattern
================

**`pattern`** 属性は、フォームコントロールの値が一致すべき正規表現を指定します。`null` 以外の値が `pattern` 値によって設定された制約に適合しない場合、`ValidityState` オブジェクトの読み取り専用の `patternMismatch` プロパティが真になります。

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

概要
--

`pattern` 属性は text, tel, email, url, password, search の入力型の属性です。

`pattern` 属性は、制約検証を通過させるために、入力の `value` が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 `RegExp` 型で使用されたり、正規表現ガイドで説明されているものと同じものです。正規表現をコンパイルする際に `'u'` フラグが指定されるので、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。

パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。

**メモ:** `title` 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼っては**いけません**。ユーザービリティについての詳細は以下を参照してください。

pattern 属性に対応している入力型の中には、特に email および url 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 `ValidityState` オブジェクトの読み取り専用の `typeMismatch` プロパティが true になります。

### ユーザービリティ

`pattern` を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する `title` 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。

### 制約検証

 入力の値が空文字列でなく、正規表現全体に一致しない場合、`ValidityState` オブジェクトの `patternMismatch` プロパティが `true` になって報告される制約違反が存在することになります。。
 パターンの正規表現は、値に対して照合されるとき、その始まりが文字列の始まりに、その終わりが文字列の終わりに固定されます。これは、JavaScript の正規表現と少し異なります。pattern 属性の場合、値のどこか一部ではなく値全体に対して照合され、まるでパターンの先頭に `^(?:` が、末尾に `)$` があるかのようになります。

**メモ:** `pattern` 属性が値なしで指定された場合、その値は暗黙的に空文字列となります。したがって、**空でない**入力欄の `value` は制約に違反することになります。

例
-

### 電話番号の照合

以下のものを考えてみてください。

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

ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で `pattern` 属性によってそれぞれ設定されています。

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 `true` の場合、要素は CSS の `:invalid` 擬似クラスに一致します。

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

代わりに `minlength` と `maxlength` 属性を用いた場合、 `validityState.tooLong` または `validityState.tooShort` が true になります。

### パターンの指定

`pattern` 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、正規表現での検証を参照してください）。

以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。

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

```
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;
}
```

This renders like so:

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

コントロールに `pattern` 属性がある場合、 `title` 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために `title` 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。

一部のブラウザーでは `title` を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。

仕様書
---

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

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

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

関連情報
----

* 制約検証
* フォーム: データフォーム検証
* 正規表現


HTML 属性: rel - HTML: ハイパーテキストマークアップ言語

HTML 属性: rel
============

**`rel`** 属性は、リンク先のリソースと現在の文書との関係を定義します。 `<link>`、`<a>`、`<area>`、`<form>` で有効で、対応する値は属性が見つかった要素に依存します。

関係の種類は `rel` 属性の値によって決まりますが、 `rel` 属性が存在する場合は、一連の固有のキーワードが順不同で空白で区切られたものであることが必要です。意味を表現しないクラス名とは異なり、 `rel` 属性は機械と人間の両方にとって意味のあるトークンを表現しなければなりません。現在、 `rel` 属性の値として登録されているのは、 IANA link relation registry、HTML Living Standard、そして Living Standard が提案している microformats wiki の自由に編集可能な existing-rel-values page ページです。上記の 3 つの情報源のいずれにも存在しない `rel` 属性が使用された場合、 HTML バリデーター（W3C Markup Validation Service など）によっては警告を生成します。

次の表は、既存のキーワードの中でも特に重要なものです。空白で区切られた値の中のすべてのキーワードは、その値の中で一意でなければなりません。

| `rel` の値 | 説明 | ``<link>`` | ``<a>`` および ``<area>`` | ``<form>`` |
| --- | --- | --- | --- | --- |
| `alternate` | 現在の文書の別な表現。 | リンク | リンク | 不許可 |
| `author` | 現在の文書や記事の著者。 | リンク | リンク | 不許可 |
| `bookmark` | 直近の祖先の章に対するパーマリンク。 | 不許可 | リンク | 不許可 |
| `canonical` | 現在の文書の推奨 URL。 | リンク | 不許可 | 不許可 |
| `dns-prefetch` | 宛先リソースのオリジンに対する DNS 解決を先取りして行うようブラウザーに指示する | 外部リソース | 不許可 | 不許可 |
| `external` | 参照先の文書は、現在の文書と同じサイトの一部ではありません。 | 不許可 | 注釈 | 注釈 |
| `help` | コンテンツに応じたヘルプにリンクします。 | リンク | リンク | リンク |
| `icon` | 現在の文書を表すアイコンです。 | 外部リソース | 不許可 | 不許可 |
| `license` | 現在の文書のメインコンテンツが、参照先の文書で説明されている著作権ライセンスによってカバーされていることを示す。 | リンク | リンク | リンク |
| `manifest` | ウェブアプリマニフェスト | リンク | 不許可 | 不許可 |
| `me` | 現在の文書がリンク先のコンテンツを所有する人物を表すことを示す | リンク | 不許可 | 不許可 |
| `modulepreload` | スクリプトを先取りして取得し、後で評価できるようにこの文書のモジュールマップに保存するようブラウザーに指示します。オプションで、モジュールの依存関係も読み取ることができます。 | 外部リソース | 不許可 | 不許可 |
| `next` | 現在の文書が一連の文書の一部であり、その中の次の文書が参照先の文書であることを示します。 | リンク | リンク | リンク |
| `nofollow` | 現在の文書の原著者または発行者が、参照先の文書を支持していないことを示します。 | 不許可 | 注釈 | 注釈 |
| `noopener` | ハイパーリンクが補助的な閲覧コンテキストのいずれかを生成する (つまり、適切な `target` 属性値を持つ) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを生成します。 | 不許可 | 注釈 | 注釈 |
| `noreferrer` | `Referer` ヘッダーを含めません。さらに、 `noopener` と同じ効果もあります。 | 不許可 | 注釈 | 注釈 |
| `opener` | ハイパーリンクによって、補助閲覧コンテキストではない最上位の閲覧コンテキストが生成される場合 (すなわち、 `target` 属性の値が "`_blank`" である場合)、補助閲覧コンテキストを生成します。 | 不許可 | 注釈 | 注釈 |
| `pingback` | 現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定します。 | 外部リソース | 不許可 | 不許可 |
| `preconnect` | ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みすることを指定します。 | 外部リソース | 不許可 | 不許可 |
| `prefetch` | ユーザーエージェントが、後続のナビゲーションに必要となる可能性の高いターゲットリソースを先取りしてキャッシュすることを指定します。 | 外部リソース | 不許可 | 不許可 |
| `preload` | `[as](as)` 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュしなければならないことを指定する。 | 外部リソース | 不許可 | 不許可 |
| `prerender` | ユーザーエージェントが、対象となるリソースを先取りして取得し、将来的に高速なレスポンスを実現するための処理を行うことを指定します。 | 外部リソース | 不許可 | 不許可 |
| `prev` | 現在の文書が一連の文書の一部であり、その中の前の文書が参照先の文書であることを示します。 | リンク | リンク | リンク |
| `search` | 現在の文書とその関連ページを検索するのに使用できるリソースへのリンクを提供します。 | リンク | リンク | リンク |
| `stylesheet` | スタイルシートをインポートします。 | 外部リソース | 不許可 | 不許可 |
| `tag` | 現在の文書に適用される (与えられたアドレスで識別される) タグを与えます。 | 不許可 | リンク | 不許可 |

`rel` 属性は `<link>`、`<a>`、`<area>`、`<form>` の各要素に関連していますが、これらの要素のサブセットにのみ関連する値もあります。他の HTML キーワード属性の値と同様に、これらの値は大文字小文字の区別がありません。

`rel` 属性には既定値がありません。属性が省略された場合や、属性の値がいずれも対応されていない場合、文書は宛先のリソースとの間にハイパーリンクがあるということ以外には、特に関係を持ちません。この場合、 `<link>` と `<form>` では、 `rel` 属性がない場合、キーワードがない場合、または上記の空白で区切られたキーワードのうち 1 つ以上がない場合、その要素はいかなるリンクも生成しません。 `<a>` と `<area>` はリンクを生成しますが、関係は定義されません。

値
-

`alternate`

現在の文書の代替表現を示します。 `<link>`、`<a>`、`<area>` で有効であり、意味は他の属性の値に依存します。

* `stylesheet` キーワードと共に `<link>` で使用された場合は、代替スタイルシートを生成します。

```html
<!-- 常設スタイルシート -->
<link rel="stylesheet" href="default.css" />
<!-- 代替スタイルシート -->
<link
 rel="alternate stylesheet"
 href="highcontrast.css"
 title="High contrast" />
```

* この文書の言語と異なる `hreflang` 属性と共に使用された場合は、翻訳版を表します。
* `type` 属性が `"application/rss+xml"` または `"application/atom+xml"` の値で共に使用された場合は、シンジケーションフィードを参照するハイパーリンクが生成されます。

```html
<link
 rel="alternate"
 type="application/atom+xml"
 href="posts.xml"
 title="Blog" />
```

* それ以外の場合は、現在の文書の代替表現を参照するハイパーリンクを作成します。その性質は `hreflang` と `type` 属性によって与えられます。
    + もし `hreflang` が `alternate` と共に指定され、 `hreflang` の値が現在の文書の言語と異なる場合には、参照された文書が翻訳であることを示します。
    + もし `type` が `alternate` と一緒に指定された場合、参照された文書が代替形式（PDF など）であることを示します。
    + `hreflang` と `type` 属性は、どちらも `alternate` と同時に指定することができます。
```html
<link
 rel="alternate"
 href="/fr/html/print"
 hreflang="fr"
 type="text/html"
 media="print"
 title="French HTML (for printing)" />
<link
 rel="alternate"
 href="/fr/pdf"
 hreflang="fr"
 type="application/pdf"
 title="French PDF" />
```

`author`

参照する文書が、現在の文書または記事の著者に関する追加情報を提供することを示します。`<link>`, `<a>`, `<area>` 要素に関連します。

`<a>` と `<area>` では、リンクされた文書（または `mailto:`）が、最も近い `<article>` の祖先があればその、なければ文書全体の著者に関する情報を提供することを示します。

`<link>` では、文書全体の作者を表します。

**メモ:** 歴史的な理由から、廃止された属性値 `rev="made"` は `rel="author"` として扱われます。

`bookmark`

`<a>` および `<area>` 属性の `rel` 属性の値として使用されます。最も近い祖先 `<article>` 要素がある場合、そのパーマリンクを与えます。祖先となる `<article>` 要素がない場合、リンクしている要素が最も近いとされるセクションのパーマリンクを与えます。

`canonical`

`<link>` で有効であり、現在の文書で推奨される URL を示します。検索エンジンが重複するコンテンツをまとめるのに有用です。

`dns-prefetch`

`<link>` 要素が `<body>` と `<head>` の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある dns-prefetch (en-US) を参照してください。

`external`

`<form>`、`<a>`、`<area>` に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。

`help`

`<form>`, `<link>`, `<a>`, and `<area>` に関連し、 `help` キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。 `<link>` 内で使用された場合、ヘルプは文書全体を対象とします。 `<a>` および `<area>` に含まれていて対応している場合、既定のカーソルが `pointer` ではなく `help` になります。

`icon`

`<link>` と共に有効で、リンクされたリソースは、現在の文書の、ユーザーインターフェースでページを表現するためのリソースであるアイコンを表します。

`icon` の値の最も一般的な用途はファビコンです。

```html
<link rel="icon" href="favicon.ico" />
```

複数の `<link rel="icon">` があった場合、ブラウザーはそれぞれの `media` 属性、`type` 属性、`sizes` 属性を使って、最も適切なアイコンを選択します。複数のアイコンが同じように適切である場合は、最後のアイコンが使用されます。最も適切なアイコンが、対応していないファイル形式を使用しているなどの理由で不適切であることが後に判明した場合、ブラウザーは次に適切なアイコンを選択します。

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

**メモ:** Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や `sizes` 属性を使用していません。
 代わりに、標準外の `apple-touch-icon` および `apple-touch-startup-image` をそれぞれ使用しています。

**メモ:** `shortcut` リンク種別が `icon` の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので**使用しないでください**。

`license`

`<a>`, `<area>`, `<form>`, `<link>` の各要素で有効である `license` の値は、ハイパーリンクがライセンス情報を記述した文書につながること、現在の文書のメインコンテンツが、参照された文書で記述された著作権ライセンスによってカバーされていることを示します。 `<head>` 要素内にない場合、規格では、文書の特定の部分に適用されるハイパーリンクか、文書全体に適用されるハイパーリンクかを区別していません。ページ上のデータのみがこれを示すことができます。

```html
<link rel="license" href="#license" />
```

**メモ:** 認識はされているものの、同義語の `copyright` は正しくないため使用しないでください。

`manifest`
Experimental

ウェブアプリマニフェストです。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。

`modulepreload`

パフォーマンスの向上に役立ちます。文書内の `<link>` に関連して、 `rel="modulepreload"` を設定すると、ブラウザーはスクリプト (および依存関係) を先取りして取得し、文書のモジュールマップに保存して後で評価するようになります。 `modulepreload` リンクは、モジュールが必ずしも必要になる前に、モジュールマップに準備された (評価されていない) モジュールでネットワークの取得を確実に行うことができます。`modulepreload` も参照してください。

`next`

`<form>`, `<link>`, `<a>`, `<area>` に関連する `next` の値は、現在の文書が一連の文書の一部であり、次の文書が参照先の文書であることを示します。 `<link>` に含まれている場合、ブラウザーはその文書が次に取得されると仮定し、リソースのヒントとして扱うことができます。

`nofollow`

`<form>`, `<a>`, `<area>` に関連する `nofollow` キーワードは、サーチエンジンスパイダーにリンク関係を無視するよう指示します。 nofollow の関係は、現在の文書の所有者が、参照先の文書を支持していないことを示す場合があります。このキーワードは、検索エンジンオプティマイザーが、リンクファームがスパムページではないことを示すために使用します。

`noopener`

`<form>`, `<a>`, `<area>` に関連するもので、ハイパーリンクがそもそもこれらのいずれかを作成する（つまり、適切な `target` 属性値を持っている）場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを作成します。言い換えれば、 `window.opener` が null で `[target](target)="_parent"` が設定されているかのようにリンクを動作させます。

これは `opener` の逆です。

`noreferrer`

`<form>`, `<a>`, `<area>` に関連するもので、この値を含めると、リファラーを不明とし（`Referer` ヘッダーが含まれません）、あたかも `noopener` も設定されているかのように、最上位のの閲覧コンテキストが生成されます。

`opener`

ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合 (すなわち "`_blank`" が `target` 属性の値として設定されている場合)、補助的な閲覧コンテキストを生成します。事実上、 noopener の逆です。

`pingback`

現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。ピンバック仕様書を参照してください。

`preconnect`

ブラウザーがリンク先のウェブサイトへの接続を開くためのヒントを事前に提供し、個人情報の開示やコンテンツのダウンロードを行わず、リンクが続いたときにリンク先のコンテンツをすばやく取得できるようにします。

`prefetch`

ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。リンク先読み FAQ には、どのリンクが先読みされるか、また代替方法についての詳細があります。

`preload`

`as` 属性で指定された潜在的な方向（および対応する方向に関連する優先度）に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュする必要があることを指定します。`preload` の値は、このページを参照してください。

`prerender`

ユーザーエージェントが対象リソースを先取りして取得し、そのサブリソースの取得やレンダリングの実行など、将来的に高速なレスポンスを提供することを支援する方法で処理することを指定します。

`prev`

`next` キーワードと同様に、`<form>`, `<link>`, `<a>`, `<area>` に関連する `prev` の値は、現在の文書が一連の文書の一部であり、このリンクが一連の文書内の直前の文書を参照していることを示します。

メモ: 別名である `previous` は正しくないため使用しないでください。

`search`

`<form>`, `<link>`, `<a>`, `<area>` の各要素に関連する `search` キーワードは、ハイパーリンクが、現在の文書、サイト、および関連リソースでの検索のために特別に設計されたインターフェイスを持つ文書を参照していることを示し、検索に使用できるリソースへのリンクを提供します。

`type` 属性が `application/opensearchdescription+xml` に設定されている場合、そのリソースは、Firefox のインターフェイスに簡単に追加できる OpenSearch プラグインです。

`stylesheet`

`<link>` 要素で有効で、スタイルシートとして使われる外部リソースをインポートします。 `type` 属性は `text/css` スタイルシートの場合は既定値となっているので必要ありません。`text/css` 型スタイルシートでない場合は、 type を宣言するのがベストです。

この属性は、リンクがスタイルシートであることを定義しますが、他の属性や rel 値内の他のキーワードとの相互作用は、スタイルシートがダウンロードされるかどうかや使用されるかどうかに影響します。

`alternate` キーワードと一緒に使われると、代替のスタイルシートを定義します。この場合、空ではない `title` を入れてください。

メディアが `media` 属性の値と一致しない場合、外部スタイルシートは使用されず、ダウンロードもされません。

オリジンをまたいだ読み取りには CORS プロトコルが必要です。

`tag`

`<a>` と `<area>` 要素で有効であり、現在の文書に適用される (指定されたアドレスで識別される) タグを与えます。タグの値は、リンク先の文書に適用されるタグを記述した文書を参照していることを示します。このリンク種別は、タグクラウド内のタグには適していません。タグクラウド内のタグは、複数のページに適用されるのに対し、 `rel` 属性の `tag` 値は単一の文書に適用されるからです。

### 標準外の値

`apple-touch-icon`

iOS 端末上のウェブアプリケーションのアイコンを指定します。

仕様書
---

| Specification |
| --- |
| HTML Standard # linkTypes |

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

### html.elements.link.rel

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

### html.elements.a.rel

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

### html.elements.area.rel

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

関連情報
----

* `HTMLLinkElement.relList`
* `HTMLAnchorElement.relList`
* `HTMLAreaElement.relList`


HTML 属性: maxlength - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 属性: multiple - HTML: ハイパーテキストマークアップ言語

HTML 属性: multiple
=================

論理属性の **`multiple`** 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。 email と file の入力型と `<select>` に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。

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

概要
--

型によっては、`multiple` 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 `<select>` コントロールに `multiple` 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 email 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると `:invalid` 擬似クラスに一致します。

`multiple` が email 入力型に設定されている場合、ユーザーは 0 個（`required` がない場合）、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。

```html
<input type="email" multiple name="emails" id="emails" />
```

`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。

`multiple` が file 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法（`Shift` か `Control` を押したまま、それからクリックするなど）で選択することができます。

```html
<input type="file" multiple name="uploads" id="uploads" />
```

この属性を省略した場合は、 `<input>` あたりに 1 つのファイルしか選択することができません。

`multiple` 属性を `<select>` 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 `<select>` 要素は、選択肢のリストから単一の `<option>` を選択するためのコントロールを表します。

```html
<select multiple name="dwarfs" id="dwarfs">
  <option>Grumpy</option>
  <option>Happy</option>
  <option>Sleepy</option>
  <option>Bashful</option>
  <option>Sneezy</option>
  <option>Dopey</option>
  <option>Doc</option>
</select>
```

`multiple` を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。

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

ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 `multiple` 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。

複数選択で `size="1"` を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。

例
-

### email 入力型

```html
<label for="emails">誰にメールしますか？</label>
<input
 type="email"
 multiple
 name="emails"
 id="emails"
 list="dwarf-emails"
 required
 size="64" />

<datalist id="dwarf-emails">
  <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>
```

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

`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 `required` 属性が存在する場合、少なくとも 1 つのメールアドレスが必要です。

ブラウザーによっては、 `multiple` が存在する場合に関連付けられた `<datalist>` から配下のメール会アドレスのためにオプションの `list` を表示することがあります。他のブラウザーは対応していません。

### file 入力型

`multiple` が file 入力型に設定されている場合、1 つ以上のファイルを選択することができます。

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

`multiple` が設定された `file` 入力欄と、設定されていない入力欄との外見の違いに注意してください。

フォームが送信されたとき、 `method="get"` を使用していれば、選択された各ファイルの名前が URL 引数に `?uploads=img1.jpg&uploads=img2.svg` のように追加されていたはずです。しかし、マルチパートのフォームデータを送信しているので、post を使用しています。詳しくは `<form>` 要素とフォームデータの送信を参照してください。

### select

`<select>` 要素の `multiple` 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、`<select>` 要素は、選択肢のリストから単一の `<option>` を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。

```html
<form method="get" action="#">
  <p>
    <label for="dwarfs">好きなドワーフの木こりを選んでください:</label>
    <select multiple name="dwarfs" id="dwarfs">
      <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>
```

2 つのフォームコントロール間の外観の違いに注意してください。

```css
/\* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 \*/

/\*
select[multiple] {
 height: 1.5em;
 vertical-align: top;
}
select[multiple]:focus,
select[multiple]:active {
 height: auto;
}
\*/
```

複数の属性を持つ `<select>` 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は `Ctrl`、`Command`、または `Shift` キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは `<select>` 要素に焦点を当てて、カーソルキーの `Up` と `Down` を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: `Space` キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。

仕様書
---

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

関連情報
----

* `<input>`
* `<select>`
* 複数のメールアドレスの許可


HTML 属性: min - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 - HTML: ハイパーテキストマークアップ言語

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 属性: autocomplete - HTML: ハイパーテキストマークアップ言語

HTML 属性: autocomplete
=====================

HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。

入力値としてテキストまたは数値を取る `<input>` 要素、 `<textarea>` 要素、 `<select>` 要素、 `<form>` 要素で利用できます。

提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しています。

`<input>`, `<select>`, `<textarea>` 要素に `autocomplete` 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ `<form>` 要素、または `<form>` 要素で `id` がその要素の `form` 属性で指定されているものの `autocomplete` 属性の値を使用します。

詳しくは、 `<form>` 要素の `autocomplete` 属性をご覧ください。

**メモ:** 自動補完を提供するために、ユーザーエージェントは `<input>`/`<select>`/`<textarea>` 要素に次のことを要求することがあります。

1. `name` や `id` 属性を持つこと
2. `<form>` 要素の子孫であること
3. フォームが submit ボタンを持つこと

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

値
-

"`off`"

ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。

**メモ:** ほとんどの現行ブラウザーでは `autocomplete` 属性を "`off`" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 autocomplete 属性とログインフィールドをご覧ください。

"`on`"

ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。

"`name`"

このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "`name`" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の `autocomplete` の値を使用することができます。

"`honorific-prefix`"

接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")

"`given-name`"

名 (ファーストネーム)

"`additional-name`"

ミドルネーム

"`family-name`"

苗字 (ファミリーネーム、「ラスト」ネーム)

"`honorific-suffix`"

接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")

"`nickname`"

ペンネームやハンドルネーム

"`email`"

メールアドレス。

"`username`"

ユーザー名またはアカウント名。

"`new-password`"

新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (autocomplete="new-password" による自動補完の防止も参照してください)。

"`current-password`"

ユーザーの現在のパスワードです。

"`one-time-code`"

ユーザー自身を確認するために使われるワンタイムコードです

"`organization-title`"

職名や組織内の肩書です (例: "上級技術ライター", "社長", "副部隊長")

"`organization`"

企業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。

"`street-address`"

住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。

"`address-line1`", "`address-line2`", "`address-line3`"

住所のそれぞれの行です。これらは "`street-address`" が存在しない場合のみ置くことができます。

"`address-level4`"

住所が4段階まである場合のもっとも細かい行政レベルです。

"`address-level3`"

少なくとも3段階の行政レベルがある住所において、3番目の行政レベルです。

"`address-level2`"

少なくとも2段階の行政レベルがある住所において、2番目の行政レベルです。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。

"`address-level1`"

住所の一番上行政レベルです。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。

"`country`"

国コードです。

"`country-name`"

国名です。

"`postal-code`"

郵便番号です (アメリカでは ZIP コードです)。

"`cc-name`"

クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。

"`cc-given-name`"

クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。

"`cc-additional-name`"

クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。

"`cc-family-name`"

クレジットカードなどの支払手段に指定された姓です。

"`cc-number`"

クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。

"`cc-exp`"

支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。

"`cc-exp-month`"

支払手段の有効期限の月です。

"`cc-exp-year`"

支払手段の有効期限の年です。

"`cc-csc`"

支払手段のセキュリティコードです。クレジットカードでは、カードの裏に書かれた3桁の認証番号です。

"`cc-type`"

支払手段の種類です。 (例: "Visa" や "Master Card").

"`transaction-currency`"

この取引で決済が行われる通貨です。

"`transaction-amount`"

支払を行う金額の "`transaction-currency`" の単位による量です。

"`language`"

優先言語で、有効な BCP 47 言語タグ で指定されたものです。

"`bday`"

生年月日の全体です。

"`bday-day`"

生年月日の日の部分です。

"`bday-month`"

生年月日の月の部分です。

"`bday-year`"

生年月日の年の部分です。

"`sex`"

性別で ("Female", "Fa'afafine", "Hijra", "Male", "Nonbinary" など)、改行のない自由な形式のテキストです。

"`tel`"

国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。

"`tel-country-code`"

国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。

"`tel-national`"

国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。

"`tel-area-code`"

市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。

"`tel-local`"

国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "`tel-local-prefix`" は "555"、 "`tel-local-suffix`" は "6502" となります。

"`tel-extension`"

電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。

"`impp`"

インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。

"`url`"

URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。

"`photo`"

このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。

詳しくは WHATWG 仕様書 をご覧ください。

**メモ:** Firefox は他のブラウザーとは異なり、 `autocomplete` 属性で、ページを再読み込みしても `<input>` を 動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか を制御します。この維持機能は、既定で有効です。 `autocomplete` 属性の値に `off` を設定すると、この機能を無効化できます。またこの設定は、`type` 属性が通常 `autocomplete` を適用しない値である `<input>` 要素でも有効です。 Firefox バグ 654072 をご覧ください。

例
-

```html
<div>
  <label for="cc-number">Enter your credit card number</label>
  <input name="cc-number" id="cc-number" autocomplete="off" />
</div>
```

住所における行政レベル
-----------

行政レベルの 4 つの欄 (`address-level1` ～ `address-level4`) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。

`address-level1` は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。

### フォームのレイアウトの自由度

国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。

### 変化形

それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。

#### アメリカ

アメリカ国内の一般的な住所は次のようになります。

 432 Anywhere St
 Exampleville CA 95555

アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって `address-level1` は州、この場合は "CA" となります。

住所で 2 番目に大きな括りの部分は市区町村名なので、 `address-level2` はこの例の住所では "Exampleville" となります。

アメリカの住所では、 3 以上の行政単位は使用されません。

#### イギリス

イギリスの住所入力フォームでは、住所のレベルは 1 つで、住所に応じて 1 ～ 3 行の住所が含まれることがあります。完全な住所は次のようになります。

 103 Frogmarch Street
 Upper-Wapping
 Winchelsea
 TN99 8ZZ

住所レベルは次のようになります。

* `address-level1`: ポストタウン — この場合は "Winchelsea" です。
* `address-line2`: 地区 — この場合は "Upper-Wapping" です。
* `address-line1`: 家屋番号や通りの詳細 — "103 Frogmarch Street"

郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と `address-line1` だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。

#### 中国

中国では、省、市、区の 3 つの行政レベルを使用することができます。

6 桁の郵便番号は必ずしも必要ではありませんが、提供される場合は、わかりやすくするためにラベルと一緒に別置しています。例えば次のようになります。

 北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元
 邮编：100005

#### 日本

日本の住所は一般的に **1 行で**、広域的な部分から詳細な部分の順に (**アメリカとは逆順**に) 書かれます。住所には 2 ～ 3 の行政レベルが含まれます。建物名や部屋番号を表すために、もう 1 行が追加されることもあります。例を示します。

 〒 381-0000
 長野県長野市某町 123

「〒」と続く 7 桁の番号は郵便番号です。

`address-level1` は都道府県に使用されます。この場合は「長野県」です。 `address-level2` は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町123」は `address-line1` で、町名と地番からなります。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-fe-autocomplete |

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

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

関連情報
----

* `<input>` 要素
* `<select>` 要素
* `<textarea>` 要素
* `<form>` 要素
* HTML フォーム
* すべてのグローバル属性


HTML 属性: minlength - HTML: ハイパーテキストマークアップ言語

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


HTML 属性: for - HTML: ハイパーテキストマークアップ言語

HTML 属性: for
============

**`for`** 属性は `<label>` と `<output>` で利用できる属性です。 `<label>` 要素上で使用された場合、このラベルが説明するフォーム要素を示します。 `<output>` 要素上で使用された場合、その出力欄で使用される値を表す要素間の関係を明示的に示すことができます。

使用方法
----

`<label>` の属性として使用された場合、 `for` 属性はそのラベルが関連するフォーム要素の `id` 値を保持します。

```html
<label for="username">Your name</label> <input type="text" id="username" />
```

`<output>` の属性として使用された場合、 `for` 属性はその出力を作成するために使用される要素の `id` 値を、空白で区切ったリストである値を保持します。

```html
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
```

例
-

`<label>` および `<output>` の要素ページの使用例を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-label-for |
| HTML Standard # attr-output-for |

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

### html.elements.label.for

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

### html.elements.output.for

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


HTML 属性: disabled - HTML: ハイパーテキストマークアップ言語

HTML 属性: disabled
=================

**`disabled`** は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。

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

概要
--

フォームコントロールに `disabled` 属性が指定された場合、その要素とフォームコントロールの子孫は制約検証が行われません。多くの場合、ブラウザーはそのようなコントロールをグレーアウトし、マウスクリックやフォーカス関連のイベントなどの閲覧イベントを受け取りません。

`disabled` 属性は、 `<button>`, `<fieldset>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>`, `<input>` が対応しています。

論理属性の disabled は、ユーザーがコントロールやその子孫のコントロールと対話できないことを示します。この属性が指定されていない場合、コントロールは、例えば `fieldset` のような包含要素からその設定を継承します。 `disabled` 属性が設定されている包含要素がなく、コントロール自体がこの属性を持っていない場合、コントロールは有効になります。 `<optgroup>`上で宣言された場合、 select は（特に無効化されていない限り）操作可能になりますが、オプショングループの項目はどれも選択不可能になります。

**メモ:** `<fieldset>`が 無効になると、 `<legend>` 内のフォーム制御を除いて、子孫のフォーム制御もすべて無効になります。

対応する要素に `disabled` 属性が適用されている場合、 `:disabled` 擬似クラスも適用されます。逆に、 `disabled` 属性に対応しているが、その属性が設定されていない要素は、 `:enabled` 擬似クラスに一致します。

この論理属性は、ユーザーがボタンを操作することを防ぎます。この属性が設定されていない場合でも、例えば `<fieldset>` のような包含要素からボタンを無効にすることができます。 `disabled` 属性が設定された包含要素が存在しない場合、ボタンは有効になります。

Firefox は他のブラウザーとは異なり、ページを再読み込みしても `<button>` の動的な無効状態を維持します。この機能を制御するには `autocomplete` 属性を使用します。

### 属性の操作

`disabled` と `readonly` の違いは、コントロールは読み取り専用 (read-only) になっても機能し、フォーカスを受けることができますが、無効なコントロールはフォーカスを受けることができず、フォームと共に送信されず、一般的には有効になるまでコントロールとして機能しないということです。

無効にされたフィールドはその値を変更することができないので、 `required` は `disabled` 属性も指定されている入力に対しては効果がありません。さらに、要素が変更不可になるので、`pattern` のような他のほとんどの属性も、コントロールが有効になるまで効果がありません。

**メモ:** `disabled` 属性が指定されている入力フィールドでは、 `required` 属性は許可されません。

### ユーザビリティ

ブラウザーは無効なフォームコントロールを灰色で表示します。無効なフォームコントロールは不変であり、フォーカスやマウスクリックなどの閲覧イベントを受け取らず、フォームと一緒に送信されないためです。

対応している要素に ``:disabled`` 擬似クラスが存在する場合、それに一致するようになります。この属性が含まれていない場合は ``:enabled`` 擬似クラスが一致します。要素が disabled 属性に対応していない場合は、この属性は何の効果も持たず、 `:disabled` および `:enabled` 擬似クラスにも一致しません。

### 制約検証

要素が `disabled` である場合、要素の値はフォーカスを受けることができず、ユーザーによって更新されることもなく、制約検証が行われることもありません。

例
-

フォームコントロールが無効になったとき、多くのブラウザーは既定で、より薄いグレーアウトした色で表示します。ここでは、無効になったチェックボックス、ラジオボタン、 `<option>` と `<optgroup>` の例と、祖先の `<fieldset>` 要素に設定された disabled 属性によって無効にされているいくつかのフォーム制御の例を示します。 `<option>` は無効になっていますが、 `<select>` 自体は無効になっていません。 `<select>` 是t内を無効にするには、子孫ではなく、その要素にこの属性を追加します。

```html
<fieldset>
  <legend>チェックボックス</legend>
  <p>
    <label> <input type="checkbox" name="chbox" value="regular" /> 通常 </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>ラジオボタン</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> 通常 </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<p>
  <label
 >選択してください:
    <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option disabled>Option 2.2</option>
        <option>Option 2.3</option>
      </optgroup>
      <optgroup label="Group 3" disabled>
        <option>Disabled 3.1</option>
        <option>Disabled 3.2</option>
        <option>Disabled 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>無効なフィールドセット</legend>
  <p>
    <label> 名前: <input type="name" name="radio" value="通常" /> 通常 </label>
  </p>
  <p>
    <label>数値: <input type="number" /></label>
  </p>
</fieldset>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-fe-disabled |
| HTML Standard # attr-optgroup-disabled |
| HTML Standard # attr-option-disabled |

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

### html.elements.button.disabled

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

### html.elements.fieldset.disabled

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

### html.elements.input.disabled

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

### html.elements.optgroup.disabled

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

### html.elements.option.disabled

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

### html.elements.select.disabled

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

### html.elements.textarea.disabled

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

関連情報
----

* `:disabled` および `:enabled`


HTML 属性: dirname - HTML: ハイパーテキストマークアップ言語

HTML 属性: dirname
================

**`dirname`** 属性は `<textarea>` および `<input>` 要素で用いることができ、フォームの送信時に要素のテキストの内容の向きを表します。
 ブラウザーは、この属性の値をユーザーが入力したテキストが左から右に読むのか、右から左に読むのかを識別するのに用います。
 使用された場合、要素のテキストの方向の値がフォームの送信データに含まれ、そのフィールド名は `dirname` 属性の値になります。

使用法のメモ
------

`dirname` 属性はすべての `<textarea>` 要素、および種類が text、search、tel、url、email のいずれかであるすべての `<input>` 要素で用いることができます。

 送信されるデータの形式は `{dirname_value}={direction}` です。`{dirname_value}` は `dirname` 属性の値に、`{direction}` はテキストの方向になります。
 たとえば、ユーザーが属性 `name="comment"` および `dirname="comment-direction"` を持つ要素に「Hello」を入力した場合、`GET` リクエストでフォームを送信する際の URL エンコードされたデータは `comment=Hello&comment-direction=ltr` となるでしょう。

方向は、以下のいずれかです。

`rtl`

ユーザーが入力したテキストを書く方向は右から左です。

`ltr`

ユーザーが入力したテキストを書く方向は左から右です。

テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントのデフォルトのテキストの方向を用います。

例
-

### textarea 要素の方向

この例では、textarea 要素に `dir="auto"` 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。

```html
<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">挨拶を送信</button>
</form>
```

 ユーザーがフォームを送信するとき、ユーザーエージェントは名前が `comment`、値が「سيب」のフィールドと、名前が `comment-direction`、値が「rtl」のフィールドの 2 個のフィールドを含めます。
 送信用に URL エンコードされたボディは以下のようになります。

```url
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
```

### input 要素の方向

この例では、input 要素に `dir="auto"` 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。

```html
<form method="get" action="https://www.example.com/submit">
  <input
 type="text"
 name="comment-input"
 dir="auto"
 dirname="comment-direction"
 value="Hello" />
  <button type="submit">挨拶を送信</button>
</form>
```

ユーザーがフォームを送信するとき、ユーザーエージェントは名前が `comment-input`、値が「Hello」のフィールドと、名前が `comment-direction`、値が「ltr」のフィールドの 2 個のフィールドを含めます。

```url
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
```

### 方向の継承

以下の `<input>` 要素と `<textarea>` 要素には `dir` 属性が無いので、親要素から明示的に指定されたテキストの方向 `rtl` を継承します。

```html
<div dir="rtl">
  <form method="get" action="https://www.example.com/submit">
    <input
 type="text"
 name="user"
 dirname="user-direction"
 value="LTR Username" />
    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
    <button type="submit">コメントを投稿</button>
  </form>
</div>
```

送信用に URL エンコードされたボディは以下のようになります。

```url
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-fe-dirname |

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

### html.elements.textarea.dirname

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

### html.elements.input.dirname

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

関連情報
----

* `dir` 属性
* `<input>`
* `<textarea>`


HTML 属性: capture - HTML: ハイパーテキストマークアップ言語

HTML 属性: capture
================

**`capture`** 属性は、オプションとして、新しいファイルをキャプチャすることと、 `accept` 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。

値としては、 `user` と `environment` があります。 capture 属性は file 入力型が対応しています。

`capture` 属性は、accept 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。

| 値 | 説明 |
| --- | --- |
| `user` | ユーザー側のカメラやマイクを使用します。 |
| `environment` | 外向きのカメラやマイクを使用します。 |

**メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。

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

例
-

ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェースが表示されます。

```html
<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/\*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/\*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/\*" />
</p>
```

なお、これらはモバイル端末でより効果的に機能します。お使いの端末がデスクトップコンピュータの場合、一般的なファイルピッカーが表示されるでしょう。

仕様書
---

| Specification |
| --- |
| HTML Media Capture # dfn-capture |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* ファイル API
* `HTMLInputElement.files`


HTML 属性: accept - HTML: ハイパーテキストマークアップ言語

HTML 属性: accept
===============

**`accept`** 属性は、値としてカンマ区切りでファイル種別または固有ファイル種別指定子を取り、どのファイル種別を受け入れるかを記述します。

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

概要
--

accept プロパティは file 型の `<input>` 要素のプロパティです。もとは `<form>` 要素で対応していましたが、 HTML5 で削除され、 file に変更されました。

与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。

例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは `<input>` を次のように使用するかもしれません。

```html
<input
 type="file"
 id="docpicker"
 accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
```

一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。

```html
<input type="file" id="soundFile" accept="audio/\*" />
<input type="file" id="videoFile" accept="video/\*" />
<input type="file" id="imageFile" accept="image/\*" />
```

`accept` 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。

このため、期待される要件をサーバー側で検証するようにしてください。

例
-

ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。

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

なお、最後の例では複数の画像を選択することができます。詳しくは `multiple` 属性を参照してください。

固有ファイル種別指定子
-----------

**固有ファイル種別指定子**は文字列で、ユーザーが `<input>` 要素の `file` 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。

* ピリオド (".") 文字から始まる有効なファイル拡張子で、大文字小文字の区別をしないもの。例えば、 `.jpg`, `.pdf`, `.doc` などです。
* 有効な MIME タイプの文字列で、拡張子なしのもの。
* 文字列 `audio/*` は「任意の音声ファイル」を意味します。
* 文字列 `video/*` は「任意の映像ファイル」を意味します。
* 文字列 `image/*` は「任意の画像ファイル」を意味します。

`accept` 属性は、カンマ区切りの 1 つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。

```html
<input type="file" accept="image/\*,.pdf" />
```

file 入力の使用
----------

### 基本的な例

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

```
div {
  margin-bottom: 10px;
}
```

これは次のような出力を生成します。

**メモ:** この例は GitHub でも見ることができます。 — ソースコードとライブ実行を確認してください。

ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。

上記のように `multiple` 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、`Shift` キーまたは `Control` キーを押しながらクリックするなど)。 `<input>` ごとに 1 つのファイルのみを選択させたい場合は、 `multiple` 属性を省略してください。

### 受け付けるファイル種別の制限

多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 JPEG や PNG などのウェブ互換の画像形式を選択させたいと思うでしょう。/p>

許容されるファイル種別は、 `accept` 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。

* `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付ける。
* `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付ける。
* `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける（また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。）
* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思しきすべてのファイルを受け付ける。

もっと完全な例を見てみましょう。

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

```
div {
  margin-bottom: 10px;
}
```

仕様書
---

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

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* ファイル API


HTML 属性: readonly - HTML: ハイパーテキストマークアップ言語

HTML 属性: readonly
=================

**`readonly`** は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

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

概要
--

`readonly` 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。

`readonly` 属性はフォームコントロールの `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `month`, `week`, `time`, `datetime-local`, `number` の ``<input>`` 型と ``<textarea>`` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、``:read-only`` 擬似クラスが一致します。この属性が含まれなかった場合は、``:read-write`` 擬似クラスが一致します。

この属性は ``<select>`` や、 checkbox や radio のように既に変更不可能な入力型、file 入力型のように定義上初期状態で値を設定できない入力型は対応していません。range や color は、どちらも既定値があります。hidden も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。

**メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。

入力に `readonly` 属性が設定されている場合、 `:read-only` 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 `:read-write` 擬似クラスに一致します。

### 属性の相互作用

`disabled` と `readonly` の違いは、読み取り専用 (readonly) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。

読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 `required` は `readonly` 属性が一緒に指定されている入力欄では効果がありません。

readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。

**メモ:** `required` 属性は `readonly` 属性が指定された入力欄では許可されていません。

### ユーザビリティ

ブラウザーは `readonly` 属性を表示します。

### 制約検証

要素が読み取り専用である場合、要素の値をユーザーによって更新することができないため、制約検証は行われません。

例
-

### HTML

```html
<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>
```

### 結果

仕様書
---

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

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

### html.elements.input.readonly

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

### html.elements.textarea.readonly

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

関連情報
----

* `:read-only` および `:read-write`
* `<input>`
* `<select>`


rel=manifest - HTML: ハイパーテキストマークアップ言語

rel=manifest
============

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`manifest`** キーワードを `<link>` 要素の `rel` 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-manifest |

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

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


rel=modulepreload - HTML: ハイパーテキストマークアップ言語

rel=modulepreload
=================

**`modulepreload`** キーワードを `<link>` 要素の `rel` 属性に指定すると、モジュールスクリプトとその依存関係を先取りして取得し、後で評価するために文書のモジュールマップに保存するための宣言的な方法を提供します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-modulepreload |

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

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


rel=dns-prefetch - HTML: ハイパーテキストマークアップ言語

rel=dns-prefetch
================

**`dns-prefetch`** キーワードを `<link>` 要素の `rel` 属性に指定すると、ユーザーがターゲットリソースのオリジンにあるリソースを必要としている可能性が高く、したがってブラウザーがそのオリジンの DNS 解決を先取りして実行することでユーザーの使い勝手が向上する可能性が高いというヒントをブラウザーに与えます。

詳しくは dns-prefetch の使用 (en-US)を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-dns-prefetch |

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

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


rel=noreferrer - HTML: ハイパーテキストマークアップ言語

rel=noreferrer
==============

**`noreferrer`** キーワードを `<a>`, `<area>`, `<form>` の各要素の `rel` 属性に指定すると、ターゲットリソースへ移動する際、 `Referer` ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 `noopener` キーワードを設定しているかのように動作します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-noreferrer |

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

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


rel=preconnect - HTML: ハイパーテキストマークアップ言語

rel=preconnect
==============

**`preconnect`** キーワードを `<link>` 要素の `rel` 属性に使用すると、ユーザーがターゲットリソースのオリジンからのリソースを必要とする可能性が高いことをブラウザーに示唆します。そのため、ブラウザーはそのオリジンへの接続を事前に開始することでユーザーの操作性を向上させることができる可能性があります。事前接続は、ハンドシェイクの一部またはすべてを事前に実行することにより、指定された元からの将来の読み込みを高速化します（HTTP の場合は DNS+TCP、HTTPS の場合は DNS+TCP+TLS が元となります）。

```html
<link rel="preconnect" href="https://example.com" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-preconnect |

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

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


rel=me - HTML: ハイパーテキストマークアップ言語

rel=me
======

**`me`** は `rel` 属性のキーワードで、 `<link>` および `<a>` 要素で使用します。現在のリソースがリンク先の当事者によって表されていることを示します。この `me` 値は XHTML Friends Network (XFN) 仕様書 で導入されたものです。

```html
<link rel="me" value="example.com" />
```

`rel="me"` 属性は RelMeAuth や Web sign in 仕様書において、ドメイン名や特定の URL を使用してウェブサービスに対して個人を特定できるようにする方法として使用されています。

仕様書
---

#### No specification found

No specification data found for `html.elements.link.rel.me`.
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.


rel=prefetch - HTML: ハイパーテキストマークアップ言語

rel=prefetch
============

**`prefetch`** キーワードを `<link>` 要素の `rel` 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-prefetch |

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

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


rel=prerender - HTML: ハイパーテキストマークアップ言語

rel=prerender
=============

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`prerender`** キーワードを `<link>` 要素の `rel` 属性に設定すると、ユーザーが次のナビゲーションで対象のリソースを必要とするかもしれないので、ブラウザはリソースを先取りして取得・処理し、例えばサブリソースの取得や画面外のバックグラウンドで何らかのレンダリングを実行すれば、おそらくユーザー体験を改善できる、というヒントになるものです。

仕様書
---

#### No specification found

No specification data found for `html.elements.link.rel.prerender`.
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.


rel=noopener - HTML: ハイパーテキストマークアップ言語

rel=noopener
============

**`noopener`** キーワードを `<a>`, `<area>`, `<form>` の各要素の `rel` 属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの `Window.opener` プロパティプロパティは設定されません（`null` を返します）。

これは、信頼されていないリンクを開くときに特に有効で、 `Window.opener` プロパティを介して発信元の文書を改ざんできないようにするためです (詳細は rel=noopener についてを参照してください)。ただし、 HTTP の `Referer` ヘッダーは（`noreferrer` を同時に使用しない限り）提供されます。

なお、 `noopener` を使用した場合、ターゲット名に `_top`, `_self`, `_parent` 以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて `_blank` と同様に扱われます。

**メモ:** `target="_blank"` を `<a>` 要素に設定すると、暗黙的に `rel` の動作が `rel="noopener"` を設定した場合と同様、 `window.opener` を設定しないようになりました。対応状況についてはブラウザーの互換性を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-noopener |

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

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


rel=preload - HTML: ハイパーテキストマークアップ言語

rel=preload
===========

`preload` は `<link>` 要素の `rel` 属性の値で、その HTML の `<head>` の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。名前には *load* という言葉が含まれていますが、これはスクリプトを読み込んで実行するのではなく、ダウンロードとキャッシュをより高い優先度で行うようにスケジュールするだけです。

基本概念
----

多くの場合は以下のように、 `<link>` を使用して CSS ファイルを読み取り、ページにスタイルを適用します。

```html
<link rel="stylesheet" href="styles/main.css" />
```

しかしここで、 `rel` の値に `preload` を使用すると、 `<link>` 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。

* リソースのパスを `href` 属性へ
* リソースの種類を `as` 属性へ

簡単な例を示すと、次のようになります (JS と CSS の例のソースおよびライブ)。

```html
<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>
```

ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 `<link rel="stylesheet">` と `<script>` 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。

* フォントや画像など、 CSS の中から指しているリソース
* JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース
* より大きな画像や動画ファイル。

`preload` には他の利点もあります。 `as` によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。

* リソースの読み取りの優先付けがより正確にできる。
* 可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用できる。
* リソースに対して正しくコンテンツセキュリティポリシーを適用できる。
* 正しい `Accept` リクエストヘッダーを設定できる。
### 先読みできるコンテンツの種類

さまざまな種類のコンテンツが先読みできます。 `as` 属性で使用できる値は以下の通りです。

* `audio`: 通常は `<audio>` で使用される音声ファイル。
* `document`: `<frame>` や `<iframe>` に埋め込まれる HTML 文書。
* `embed`: `<embed>` 要素の中に埋め込まれるリソース。
* `fetch`: ArrayBuffer や WebAssembly/WASM バイナリーや JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
* `font`: フォントファイル。
* `image`: 画像ファイル。
* `object`: `<object>` 要素の中に埋め込まれるリソース。
* `script`: JavaScript ファイル。
* `style`: CSS スタイルシート。
* `track`: WebVTT ファイル。
* `worker`: JavaScript ウェブワーカーまたは共有ワーカー。
* `video`: 通常は `<video>` で使用される動画ファイル。

**メモ:** `font` および `fetch` の先読みには、 `crossorigin` 属性を設定する必要があります。下記の CORS を使用したフェッチを参照してください。

**メモ:** 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — link element extensions を参照してください。また、フェッチの仕様書で管理されている `as` 属性の値の完全な一覧は、 request destinations を参照してください。

MIME タイプを含める
------------

`<link>` 要素は `type` 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは `type` 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。

この例を動画のデモで見ることができます（ソースコード全体とデモ版もご覧ください。）。コードスニペットは下記の通りです。

```html
<head>
  <meta charset="utf-8" />
  <title>Video preload example</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4" />
    <source src="sintel-short.webm" type="video/webm" />
    <p>
      Your browser doesn't support HTML video. Here is a
      <a href="sintel-short.mp4">link to the video</a> instead.
    </p>
  </video>
</body>
```

上記の例のコードでは、`video/mp4` の動画は対応ブラウザーでのみ先読みされま す。そして、`video/mp4` をサポートしているブラウザーでは、`video/mp4` の動画が実際に使用されます（これは、最初の `<source>` が指定されたため）。これにより、ブラウザーの `video/mp4` に対応しているユーザーにとって、動画プレーヤーがよりスムーズでレスポンスのよいものになることを期待しています。

なお、ブラウザーが `video/mp4` と `video/webm` の両方に対応しているユーザーのために、そのコードで `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` 要素も指定すると、実際にはどちらかのみが使用されても `video/mp4` と `video/webm` 動画がどちらも先読みされることになります。

したがって、同じリソースに対して複数の種類の先読みを指定することは推奨されません。その代わりに、ユーザーの大半が実際に使用する可能性のある種類にのみ、先読みを指定することが最善の手法です。上の例のコードで、`video/webm` の動画に先読みさせることを指定していないのはそのためです。

しかし、先読みさせないからといって、`video/webm` の動画が必要な人に実際に使用されないわけではありません。`video/mp4` に対応していないけれども `video/webm` には対応しているユーザーのために、上記の例のコードは `video/webm` 動画を使用するようにしても、他の多くのユーザーに不必要な先読みをしてもらうようなことはしないようにしているのです。

CORS を使用したフェッチ
--------------

CORS を有効にして取得したリソースを先読みする場合 (`fetch()`、`XMLHttpRequest`、フォントなど)、 `<link>` 要素の `crossorigin` 属性の設定に特別な注意を払う必要があります。この属性は、取得がオリジンを越えない場合でも、リソースの CORS や認証モードに合わせて設定する必要があります。

上記のように、これが当てはまる興味深いケースの 1 つが、フォントファイルです。さまざまな理由により、これらは匿名モードの CORS を使用してフェッチする必要があります（Font fetching requirements参照）。

このケースを例として使用してみましょう。完全なサンプルソースコードは GitHub のソースコード例 (およびライブ版) にあります。

```html
<head>
  <meta charset="utf-8" />
  <title>Web font example</title>

  <link
 rel="preload"
 href="fonts/cicle\_fina-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />
  <link
 rel="preload"
 href="fonts/zantroke-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />

  <link href="style.css" rel="stylesheet" />
</head>
<body>
  …
</body>
```

`type` 属性に MIME タイプのヒントを提供するだけでなく、先読みの CORS モードが最終的なフォントリソースリクエストと一致することを確認するために、 `crossorigin` 属性も提供しています。

media を含める
----------

`<link>` 要素の優れた機能のひとつが、 `media` 属性を受け入れることができることです。この属性は、メディア種別や本格的なメディアクエリーを受け付けることができるので、レスポンシブな先読みを行うことができます。

例を見てみましょう (GitHub 上のソースコード、デモ)。

```html
<head>
  <meta charset="utf-8" />
  <title>Responsive preload example</title>

  <link
 rel="preload"
 href="bg-image-narrow.png"
 as="image"
 media="(max-width: 600px)" />
  <link
 rel="preload"
 href="bg-image-wide.png"
 as="image"
 media="(min-width: 601px)" />

  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>

  <script>
 const mediaQueryList = window.matchMedia("(max-width: 600px)");
 const header = document.querySelector("header");

 if (mediaQueryList.matches) {
 header.style.backgroundImage = "url(bg-image-narrow.png)";
 } else {
 header.style.backgroundImage = "url(bg-image-wide.png)";
 }
 </script>
</body>
```

`media` 属性を `<link>` 要素に設定することで、ビューポートが狭い場合は幅の狭い画像を、ビューポートが広い場合は幅の広い画像を先読みするようにします。このために `Window.matchMedia` / `MediaQueryList` を使用しています（詳しくはメディアクエリーのテストを参照）。

これにより、ページのレンダリング時にそのフォントが利用できる可能性が高くなり、 FOUT （スタイル付け前のテキストの点滅）を減らすことができます。

これは、画像に限らず、同じ種類のファイルであっても、大きな意味を持ちます。帯域幅や CPU が限られている狭い画面では、シンプルな SVG の図を先読みして表示したり、ユーザーのリソースに余裕がある場合は、複雑な JavaScript を先読みし、それを使ってインタラクティブな 3D モデルをレンダリングしたりすることができるでしょう。

スクリプトと先読み
---------

これらの先読みに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは `HTMLLinkElement` インスタンスを作成し、それを DOM に取り付けています。

```js
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
```

これは、ブラウザーは `myscript.js` ファイルを先読みしますが、実際はまだ使用されていません。これを使用するには、次のようにします。

```js
const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
```

これは、スクリプトを先読みしたいが、必要なときまで実行を延期する場合に便利です。

その他のリソース先読み機構
-------------

先読み機能は他にもありますが、 `<link rel="preload">` ほど目的に合ったものはありません。

* `<link rel="prefetch">` は長い間ブラウザーが対応してきましたが、これは ***次の*** 操作やページ読み取り（次のページに移動するときなど）で使用されるリソースを先読みするためのものでした。これはこれで良いのですが、現在のページには役に立ちません。さらに、ブラウザーは `prefetch` のリソースを `preload` リソースよりも低い優先度で表示します。現在のページは次のページよりも重要なのです。詳しくはリンク先読みの FAQ を参照してください。
* `<link rel="prerender">` は、指定されたウェブページをバックグラウンドでレンダリングし、ユーザーがそのページに移動した場合の読み込みを高速化します。ユーザーの帯域幅を浪費する可能性があるため、 Chrome は `prerender` を代わりに NoState 先読みとして扱います。
* `<link rel="subresource">`
Non-standard
 は、しばらく前に Chrome が、 `preload` と同じ問題に取り組むために対応していましたが、問題がありました。項目の優先順位を計算する方法がなかったため（当時は `as` が存在しなかったため）、すべての項目がかなり低い優先順位で取得されてしまっていました。
* スクリプトベースのリソースローダーは数多く存在しますが、ブラウザーの取得優先度キューを制御することはできず、同様のパフォーマンスの問題があります。
仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-preload |

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

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

関連情報
----

* Preload: What Is It Good For? by Yoav Weiss


<bdi>: 書字方向分離要素 - HTML: ハイパーテキストマークアップ言語

<bdi>: 書字方向分離要素
===============

**`<bdi>`** は HTML の要素で、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立しているものと扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入するとき、挿入されるテキストの書字方向が不明な場合に便利です。

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

双方向のテキストとは、文字の並びが左から右（左書き、LTR）のものと、右から左（右書き、RTL）のものの両方を含むテキストであり、英語の文字列の中に埋め込まれたアラビア語の引用などがあります。ブラウザーはこれを扱うために、 Unicode Bidirectional Algorithm を実装しています。このアルゴリズムでは、文字には暗黙の書字方向が与えられます。例えば、ラテン文字は左書きとして扱われるのに対し、アラビア文字は右書きとして扱われます。その他の一部の文字（空白や一部の区切り文字など）は中立として扱われ、周囲の文字に従って書字方向が割り当てられます。

ふつう、書字方向アルゴリズムは特別なマークアップを行わずに正しく動作しますが、時々、アルゴリズムが助けを必要とすることがあります。これが `<bdi>` の出番です。

`<bdi>` 要素はテキストの区間を囲んで、書字方向アルゴリズムにこのテキストが周囲から独立していることを指示します。これは 2 通りに動作します。

* `<bdi>` で囲まれたテキストの書字方向は、周囲のテキストの書字方向に*影響を与えない*。
* `<bdi>` で囲まれたテキストの書字方向は、周囲のテキストの書字方向から*影響を受けない*。

例えば、以下のようなテキストを想定してください。
```

EMBEDDED-TEXT - 1st place
```

`EMBEDDED-TEXT` が左書きである場合、これは正しく動作します。しかし、`EMBEDDED-TEXT` が右書きである場合は、`- 1` は右書きのテキストとして扱われます（中立または弱い文字で構成されているためです）。結果は次のように混乱します。
```

1 - EMBEDDED-TEXTst place
```

さらに、 `EMBEDDED-TEXT` の書字方向が分かる場合は、`dir` 属性のついた `<span>` で `EMBEDDED-TEXT` を囲むことでこの問題を修正できます。しかし、書字方向が分からない場合は - 例えば、 `EMBEDDED-TEXT` がデータベースから読み込まれたり、ユーザーに入力されたりするものであれば - `<bdi>` を使用して、 `EMBEDDED-TEXT` の書字方向が周囲に影響されることを防ぐべきです。

同様の視覚効果は、 CSS の `unicode-bidi``: isolate` を `<span>` またはその他の文字書式のための要素に付けることで達成できますが、これは意味が含まれず、ブラウザーは CSS の整形を無視することが許されているので、 HTML ではこのアプローチを使用しないでください。

`<span dir="auto">` に囲まれた文字は、 `<bdi>` を使用するのと同様の効果が得られますが、意味論的には不明確になります。

属性
--

この要素は、他のすべての HTML 要素と同様にグローバル属性に対応していますが、 `dir` 属性の挙動が通常とは異なります。初期値は `auto` であり、親要素から値を継承しないことを示します。つまり、 `dir` に `rtl` または `ltr` のどちらかの値を指定しない限り、ユーザーエージェントは `<bdi>` の内容に基づいて正しい方向を特定します。

例
-

### bdi がなく左書きのみの場合

この例では、競争の勝者を `<span>` のみを使用して列挙しています。名前は左書きのテキストのみが入れば、見栄えが良い結果になります。

```html
<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
```

```
body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}
```

### bdi がなく右書きを含むテキストの場合

この例では、競争の勝者を `<span>` のみを使用して列挙しており、右書きのテキストから成る名前を含んでいます。この場合、右書きの名前を入れると、書字方向が中立または弱い文字で構成された "`- 1`" の部分は、右書きのテキストの書字方向に合わられ、結果が混乱してしまいます。

```html
<ul>
  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
```

```
body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}
```

### bdi を使用した左書きと右書きのあるテキストの場合

この例では、競争の勝者を `<bdi>` を使用して列挙しています。これらの要素がブラウザーに、名前を埋め込み先のコンテキストから分離することを指示するので、例の出力は正しく並べられます。

```html
<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>
```

```
body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツ
 を受け入れるすべての要素
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-bdi-element |

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

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

関連情報
----

* Inline markup and bidirectional text in HTML
* Unicode Bidirectional Algorithm basics
* ローカライズ
* 関連 HTML 要素: `<bdo>`
* 関連 CSS プロパティ: `direction`, `unicode-bidi`


<portal>: ポータル要素 - HTML: ハイパーテキストマークアップ言語

<portal>: ポータル要素
================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`<portal>`** は HTML の要素で、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。

`<portal>` は `<iframe>` に似ています。 `<iframe>` では独立した閲覧コンテキストを作成して埋め込みます。しかし、 `<portal>` で埋め込まれるコンテンツは `<iframe>` の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 `<portal>` は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。

属性
--

この要素にはグローバル属性があります。

`referrerpolicy`

リファラーポリシーを設定します。これは、 `src` 属性の値で指定された URL のページをリクエストする際に使用されます。

`src`

埋め込むページの URL です。

例
-

### 基本的な例

以下の例は `https://example.com` のコンテンツをプレビューとして埋め込みます。

```html
<portal id="exampleportal" src="https://example.com/"></portal>
```

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

`<portal>` が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、アクセシビリティツリーの要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。

ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。`aria-label` (en-US) 属性を使用すると、これを上書きすることができます。

事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の `display` プロパティの値を `none` にして非表示にしてください。

ポータルがアクティブ化している間にアニメーションを使用する場合は、 `prefers-reduced-motion` メディア特性を尊重してください。

技術的概要
-----

|  |  |
| --- | --- |
| 暗黙の ARIA ロール | button |
| DOM インターフェイス | `HTMLPortalElement` |

仕様書
---

| Specification |
| --- |
| Portals # the-portal-element |

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

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


<noembed>: 埋め込みフォールバック要素 - HTML: ハイパーテキストマークアップ言語

<noembed>: 埋め込みフォールバック要素
========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`<noembed>`** は HTML の要素で、廃止された、標準外の方法であり、 `<embed>` 要素に対応していないブラウザーや、ユーザーが仕様とした種類の埋め込みコンテンツに対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは `<object>` 要素の開始タグと終了タグの間に配置されるようになりました。

**メモ:** 現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに `<object>` 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。

例
-

`<noembed>` 要素内のメッセージは、ブラウザーが `<embed>` 要素に対応していない場合にのみ表示されます。

### 代替コンテンツの表示

```html
<embed type="vide/webm" src="/media/examples/flower.mp4" width="200" height="200">
  <noembed>
    <h1>代替コンテンツ</h1>
  </noembed>
</embed>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # noembed |

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

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


<object>: 外部オブジェクト要素 - HTML: ハイパーテキストマークアップ言語

<object>: 外部オブジェクト要素
====================

**`<object>`** は HTML の要素で、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表します。

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

属性
--

この要素にはグローバル属性があります。

`archive`
非推奨

オブジェクトのリソースの URI 群を、半角スペースで区切って指定します。

`border`
非推奨

コントロールの境界線の幅で、ピクセル単位です。

`classid`
非推奨

オブジェクトの実装の URI。 **data** 属性とともに、または **data** 属性の代替として用いることができます。

`codebase`
非推奨

**classid** 属性、**data** 属性、**archive** 属性で指定された相対 URI を解決するための基準パス。指定しない場合、既定値は現在の文書のベース URI となります。

`codetype`
非推奨

**classid** によって指定されたデータのコンテンツ型。

`data`

リソースのアドレスを有効な URL で指定。**data** 属性と **type** 属性のうち、少なくとも 1 つは定義しておく必要があります。

`declare`
非推奨

この論理属性は属性名を指定するだけで有効になります。オブジェクトは、後続する `<object>` 要素でインスタンス化しなければなりません。HTML5 ではリソースを再利用するごとに、完全な形の <object> 要素を繰り返し配置します。

`form`

このオブジェクト要素がフォームに関連付けられていれば、そのフォーム要素（*フォームオーナー*）。属性値は、同一文書内の `<form>` 要素の ID でなければなりません。

`height`

表示されるリソースの高さを CSS ピクセル数 で指定。(絶対値に限ります。パーセント値は不可)

`name`

有効な閲覧コンテキストの名前 (HTML5) またはコントロールの名前 (HTML 4)。

`standby`
非推奨

オブジェクトの実装とデータの読み込み中にブラウザーに表示することができるメッセージ。

`type`

**data** 属性によって指定されたリソースの コンテンツ型。**data** 属性と **type** 属性のうち、少なくとも 1 つは定義しておく必要があります。

`usemap`

`<map>` 要素を参照するハッシュ名。 '#' の後に map 要素の `name` 属性を繋げた文字列を属性値として記述します。

`width`

表示されるリソースの幅を CSS ピクセル数 で指定。（絶対的な値に限ります。パーセンテージは不可）

例
-

### 動画を埋め込む

#### HTML

```html
<object
 type="video/mp4"
 data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
 width="600"
 height="140">
  <img src="path/image.jpg" alt="useful image description" />
</object>
```

#### 結果

この例の動画が読み込めなかった場合、代替コンテンツとしてユーザーに画像が提供されます。画像を表示するために `<img>` タグを使用しています。`src` 属性には埋め込みたい画像のパスを設定します。また、画像にアクセシビリティのある名前を提供するために `alt` 属性も記載しています。画像も読み込めなかった場合は、`alt` 属性のコンテンツが表示されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ、要素が `usemap` 属性を持つ場合は 対話型コンテンツ、リスト化/送信可能 な フォーム関連要素 |
| 許可されている内容 | 0 個以上の `<param>` 要素とそれに続く 透過的コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `application`, `document`, `img` (en-US) |
| DOM インターフェイス | `HTMLObjectElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-object-element |

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

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

関連情報
----

* `<embed>`
* `<param>`


<search>: 一般検索要素 - HTML: ハイパーテキストマークアップ言語

<search>: 一般検索要素
================

**`<search>`** は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。`<search>` 要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。

属性
--

この要素はグローバル属性のみを持ちます。

使用上の注意
------

`<search>` 要素は検索結果を表示するためのものではありません。むしろ、検索やフィルタリングの結果はそのウェブページのメインコンテンツの一部として存在するべきです。とはいえ、検索や 絞り込み機能の中の「クイック検索」機能の一部である提案やリンクは、検索機能なので `<search>` 要素のコンテンツの中で入れ子にするのが適切です。

例
-

### ヘッダーの検索フォーム

この例では、単純なサイト全体の検索を行うために、ウェブサイトヘッダー内の検索のコンテナーとして `<search>` を使用する例を示します。`<search>` は `<form>` の意味づけコンテナーであり、ユーザーが入力した検索クエリーをサーバーへ送信します。

#### HTML

```html
<header>
  <h1>動画のウェブサイト</h1>
  <search>
    <form action="./search/">
      <label for="movie">動画を検索</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">検索</button>
    </form>
  </search>
</header>
```

#### 結果

### ウェブアプリの検索

この例は、ウェブアプリケーションで JavaScript によって動的に行うの検索機能を実装する際の DOM コンテンツの可能性を示しています。検索機能がすべて JavaScript で実装された場合、フォームが送信されなければ `<form>` 要素も送信 `<button>` も必要ありません。意味づけのために、`<search>` 要素が検索と絞り込み機能を含めるために使用されています。

#### HTML

```html
<search>
  <label>
    検索して絞り込み
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    完全一致のみ
  </label>

  <section>
    <h3>結果:</h3>
    <ul id="results">
      <!-- 検索結果コンテンツ -->
    </ul>
    <output id="no-results">
      <!-- 結果のない時のコンテンツ -->
    </output>
  </section>
</search>
```

#### 結果

**メモ:** JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。

### 複数の検索

この例は、2 つの検索機能を持つページを示しています。最初の検索はヘッダー上のグローバルサイト検索です。2 つ目はページのコンテキストに基づいた検索とフィルターで、この例では車の検索です。

#### HTML

```html
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ. |
| 許可されているコンテンツ | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 暗黙の ARIA ロール | `search` |
| 許可されている ARIA ロール | `form`, `group`, `none` (en-US), `presentation`, `region`, `search` |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-search-element |

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

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

関連情報
----

* 他の検索に関する要素: `<header>`, `<footer>`, `<aside>`, `<nav>`, `<form>`
* ARIA: Search ロール


<q>: インライン引用要素 - HTML: ハイパーテキストマークアップ言語

<q>: インライン引用要素
==============

**`<q>`** は HTML の要素で、中に含まれるテキストが短いインラインの引用であることを示します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 `<blockquote>` 要素を使用してください。

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

属性
--

この要素はグローバル属性を持ちます。

`cite`

この属性の値は、引用した情報の引用元となる文書やメッセージの URL です。この属性は、引用文のコンテキストや参照先を説明する情報を指すためのものです。

例
-

```html
<p>
  According to Mozilla's website,
  <q cite="https://www.mozilla.org/en-US/about/history/details/">
    Firefox 1.0 was released in 2004 and became a big success.
  </q>
</p>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | No corresponding role |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLQuoteElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-q-element |

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

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

関連情報
----

* `<blockquote>` 要素は長い引用のためのものです。
* `<cite>` 要素は引用元のためのものです。