<input>: 入力欄（フォーム入力）要素 - HTML: ハイパーテキストマークアップ言語

<input>: 入力欄（フォーム入力）要素
======================

**`<input>`** は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。`<input>` 要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。

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

<input> の型
----------

`<input>` の動作は `type` 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は `text` です。

利用可能な型は次の通りです。

| 型 | 説明 | 基本的な例 |
| --- | --- | --- |
| button | プッシュボタンで、既定の動作を持たず、`value` 属性の値（既定では空）を表示します。 |
```
<input type="button" name="button" value="ボタン" />
```
 |
| checkbox | チェックボックスで、選択または未選択のうちひとつの値をとることができます。 |
```
<input type="checkbox" name="checkbox"/>
```
 |
| color | 色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。 |
```
<input type="color" name="color"/>
```
 |
| date | 日付（時刻を除いた年、月、日）を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。 |
```
<input type="date" name="date"/>
```
 |
| datetime-local | タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。 |
```
<input type="datetime-local" name="datetime-local"/>
```
 |
| email | 電子メールアドレスを編集するための欄です。`text` 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 |
```
<input type="email" name="email"/>
```
 |
| file | ユーザーがファイルを選択するコントロールです。`accept` 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。 |
```
<input type="file" accept="image/\*, text/\*" name="file"/>
```
 |
| hidden | 表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。 |
```
<input id="userId" name="userId" type="hidden" value="abc123">
```
 |
| image | グラフィックの `submit` ボタンです。`src` 属性で定義された画像を表示します。`alt` 属性は `src` の画像が見つからないときに表示されます。 |
```
<input type="image" name="image" src="" alt="image input"/>
```
 |
| month | タイムゾーン情報がない年と月を入力するためのコントロールです。 |
```
<input type="month" name="month"/>
```
 |
| number | 数値を入力するためのコントロールです。スピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。 |
```
<input type="number" name="number"/>
```
 |
| password | 入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。 |
```
<input type="password" name="password"/>
```
 |
| radio | ラジオボタンで、同じ `name` の値を持つ複数の選択肢から一つの値を選択することができます。 |
```
<input type="radio" name="radio"/>
```
 |
| range |
 厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。
 `min` と `max` の組み合わせで、受け入れる値の範囲を定義することができます。
  |
```
<input type="range" name="range" min="0" max="25"/>
```
 |
| reset | フォームのコントロールを既定値に初期化するボタンです。推奨しません。 |
```
<input type="reset" name="reset"/>
```
 |
| search | 検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、Enter キーの代わりに検索アイコンを表示します。 |
```
<input type="search" name="search"/>
```
 |
| submit | フォームを送信するボタンです。 |
```
<input type="submit" name="submit"/>
```
 |
| tel | 電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。 |
```
<input type="tel" name="tel"/>
```
 |
| text | 既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。 |
```
<input type="text" name="text"/>
```
 |
| time | タイムゾーン情報がない時刻を入力するためのコントロールです。 |
```
<input type="time" name="time"/>
```
 |
| url | URL を入力するための入力欄です。`text` 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 |
```
<input type="url" name="url"/>
```
 |
| week | 年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。 |
```
<input type="week" name="week"/>
```
 |
| 廃止された値 |
| `datetime`
非推奨
 | UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。 |
```
<input type="datetime" name="datetime"/>
```
 |

属性
--

`<input>` 要素は属性があるためたいへん強力です。上記の例で説明している `type` 属性が最も重要です。すべての `<input>` 要素が、`HTMLInputElement` インターフェイスに基づいているため、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性が一部の特定の入力型にのみ影響を与えます。さらに、ある属性が入力に与える影響は入力の種類によって異なり、様々な入力型に様々な方法で影響を与えます。

この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。

`<input>` 要素の属性にはグローバル属性が含まれ、さらに次のものがあります。

| 属性 | 型 | 説明 |
| --- | --- | --- |
| `accept` | `file` | ファイルアップロードコントロールで期待されるファイル形式のヒント |
| `alt` | `image` | image 型の alt 属性です。アクセシビリティのために必要です。 |
| `autocomplete` | `checkbox`、`radio`、ボタンを除くすべて | フォームの自動補完機能のためのヒント |
| `capture` | `file` | ファイルアップロードコントロールのメディアキャプチャ入力方法 |
| `checked` | `checkbox`, `radio` | コマンドやコントロールがチェックされているか |
| `dirname` | `search`, `text` | フォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前 |
| `disabled` | すべて | コントロールが無効であるかどうか |
| `form` | すべて | コントロールを form 要素に関連付ける |
| `formaction` | `image`, `submit` | フォームの送信に使用する URL |
| `formenctype` | `image`, `submit` | フォームの送信に使用するデータセットのエンコード種別 |
| `formmethod` | `image`, `submit` | フォームの送信に使用する HTTP メソッド |
| `formnovalidate` | `image`, `submit` | フォームの送信でフォームの検証をバイパス |
| `formtarget` | `image`, `submit` | フォーム送信に使用する閲覧コンテキスト |
| `height` | `image` | `<img>` の height 属性と同じで、垂直方向の大きさ |
| `list` | `hidden`, `password`, `checkbox`, `radio`, ボタンを除くすべて | 自動補完の選択肢の入った `<datalist>` の id 属性の値 |
| `max` | `date`, `month`, `week`, `time`, `datetime-local`, `range` | 最大値 |
| `maxlength` | `text`, `search`, `url`, `tel`, `email`, `password` | `value` の最大長（文字数） |
| `min` | `date`, `month`, `week`, `time`, `datetime-local`, `range` | 最小値 |
| `minlength` | `text`, `search`, `url`, `tel`, `email`, `password` | `value` の最短長（文字数） |
| `multiple` | `email`, `file` | 論理属性。複数の値を許可するかどうか |
| `name` | すべて | 入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される |
| `pattern` | `text`, `search`, `url`, `tel`, `email`, `password` | 有効になるために `value` が一致する必要があるパターン |
| `placeholder` | `text`, `search`, `url`, `tel`, `email`, `password`, `number` | フォームコントロールが空の時にフォームコントロール内に表示される内容 |
| `popovertarget` | `button` | `<input type="button">` がポップオーバー要素の制御用として指定する |
| `popovertargetaction` | `button` | ポップオーバー制御で実行するアクションを指定する |
| `readonly` | `hidden`, `range`, `color`, `checkbox`, `radio`, ボタンを除くすべて | 論理属性。値が編集できない |
| `required` | `hidden`, `range`, `color`, ボタンを除くすべて | 論理属性。フォームが送信できるようにするためには値が必要 |
| `size` | `text`, `search`, `url`, `tel`, `email`, `password` | コントロールの大きさ |
| `src` | `image` | `<img>` の `src` 属性と同じで、画像リソースのアドレス |
| `step` | `date`, `month`, `week`, `time`, `datetime-local`, `range` | 有効と見なされる増分 |
| `type` | すべて | フォームコントロールの型 |
| `value` | すべて | コントロールの初期値 |
| `width` | `image` | `<img>` の `width` 属性と同じで、水平方向の大きさ |

標準的な属性の説明の後に、いくつかの非標準的な属性を追加で記載しています。

### 個々の属性

`accept`

`file` 入力型に対してのみ有効です。`accept` 属性は `file` アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。file 入力型を参照してください。

`alt`

`image` ボタンに対してのみ有効です。`alt` 属性は画像の代替テキストを提供します。`src` の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。image 入力型を参照してください。

`autocomplete`

（論理属性では**ありません**!） `autocomplete` 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、`email` 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は `autocomplete` を参照してください。

`autocomplete` 属性は `hidden`, `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, `color`, `password` で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、`checkbox`, `radio`, `file` とすべてのボタン型を除いたすべての入力型で有効になります。

詳しい情報については `autocomplete` 属性を参照してください。パスワードセキュリティに関する情報や、`autocomplete` が `hidden` に対して他の入力型とどう異なるのかについての情報があります。

`autofocus`

論理属性で、指定された場合は、ページの読み込みが完了したとき（またはその要素を含む `<dialog>` が表示されたとき）に、自動的にその入力欄がフォーカスを持つことを示します。

**メモ:** `autofocus` 属性がついた要素は、`DOMContentLoaded` イベントが発生する前にフォーカスを得ることがあります。

文書中で一つの要素だけが `autofocus` 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。

`autofocus` は `hidden` 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。

**警告:** フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。`autofocus` が割り当てられると、スクリーンリーダーは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。

`autofocus` 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。スクリーンリーダーはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。

`capture`

HTML Media Capture 仕様書で導入され、`file` 入力型に対してのみ有効です。`capture` 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで `file` アップロードコントロールを使用してアップロードするかを定義します。file 入力型を参照してください。

`checked`

`radio` 型と `checkbox` 型の両方で有効で、`checked` は論理属性です。`radio` 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。`checkbox` 型に存在した場合、(ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものでは*ありません*。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。（`HTMLInputElement` の `checked` IDL 属性のみが更新されます。）

**メモ:** 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 `checked` の状態にある場合だけ送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。

例えば、`name` が `fruit` で、`value` が `cherry` であるチェックボックスがチェックされていると、送信されるフォームデータには `fruit=cherry` が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の `value` は `on` です。

`dirname`

`text` および `search` 入力型のみに有効で、`dirname` 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは 2 組の名前と値を送信します。1 組目は `name` と `value` であり、2 組目は名前が `dirname` の値で、値に `ltr` または `rtl` がブラウザーによって設定されます。

```html
<form action="page.html" method="post">
  <label
 >Fruit:
    <input type="text" name="fruit" dirname="fruit.dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit.dir=ltr -->
```

上記のフォームが送信されると、入力欄は `name` / `value` の組である `fruit=cherry` と、`dirname` / 書字方向の組である `fruit.dir=ltr` が送信されます。

`disabled`

論理属性で、存在する場合、ユーザーが入力欄を操作できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示す形で表示されます。

特に、無効になった入力欄は `click` イベントを受け取らず、フォームと共に送信されることもありません。

**メモ:** 仕様書で要件とはされていませんが、Firefox は既定で、ページを再読み込みしても `<input>` を 動的に無効化した状態を維持します。この機能は `autocomplete` 属性で制御することができます。

`form`

文字列で、入力欄が関連づけられた `<form>` 要素（つまり、**フォームオーナー**）を指定します。存在する場合、この文字列値は同一文書内の `<form>` 要素の `id` と一致している必要があります。この属性が指定されない場合は、`<input>` 要素は直近の内包するフォームに（もしあれば）関連付けられます。

`form` 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。

**メモ:** 入力欄は一つのフォームとしか関連付けることができません。

`formaction`

`image` および `submit` 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

`formenctype`

`image` および `submit` 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

`formmethod`

`image` および `submit` 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

`formnovalidate`

`image` および `submit` 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

`formtarget`

`image` および `submit` 入力型でのみ有効です。詳しくは submit 入力型を参照してください。

`height`

`image` 入力型でのみ有効です。`height` はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。image 入力型を参照してください。

`id`

すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための `<label>` の `for` 属性の値として使用されます。`<label>` を参照してください。

`inputmode`

すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては `none`, `text`, `tel`, `url`, `email`, `numeric`, `decimal`, `search` があります。

`list`

`list` 属性で与えられる値は、同じ文書内にある `<datalist>` 要素の `id` としてください。`<datalist>` は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに `type` と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。

これは `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, `color` で有効です。

仕様書によれば、`list` 属性は `hidden`, `password`, `checkbox`, `radio`, `file` それにボタン型では対応していません。

ブラウザーによっては、独自のカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、`<select>` のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型についてはブラウザーの互換性一覧表を参照してください。

`<datalist>` 要素を参照してください。

`max`

`date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` で有効であり、許可される値の範囲の最大値を定義します。要素に入力された `value` がこれを超えた場合、要素は制約検証に不合格になります。`max` 属性の値が数値でない場合は、要素に最大値は設定されません。

特殊な場合があります。データ型が期間を表す場合（日付や時刻など）、`max` の値は `min` の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。

`maxlength`

`text`, `search`, `url`, `tel`, `email`, `password` で有効であり、ユーザーがフィールドに入力することができる文字数（UTF-16 コード単位）を定義します。これは `0` 以上の整数値でなければなりません。`maxlength` が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は `minlength` の値以上である必要もあります。

欄に入力されたテキストの文字数が UTF-16 コード単位で `maxlength` よりも多いと、この入力欄は制約検証に不合格になります。既定では、ブラウザーはユーザーが `maxlength` 属性で許可された文字数以上を入力するのを防ぎます。詳しくはクライアント側検証を参照してください。

`min`

`date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された `value` がこれを下回った場合、要素は制約検証に不合格になります。`min` 属性の値が数値でない場合は、要素に最小値は設定されません。

この値は `max` 属性の値以下である必要があります。`min` 属性が存在するものの、指定されていなかったり無効であったりした場合は、`min` の値は適用されません。`min` 属性が有効であり、値が空ではなく `min` 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくはクライアント側検証を参照してください。

特殊な場合があります。データ型が期間を表す場合（日付や時刻など）、`max` の値は `min` の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後 10 時から午前 4 時までの自国の範囲を指定することができます。

`minlength`

`text`, `search`, `url`, `tel`, `email`, `password` で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、`maxlength` で指定された値以下の整数値でなければなりません。`minlength` が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。

欄に入力されたテキストの文字数が UTF-16 コード単位で `minlength` よりも少ないと、この入力欄は制約検証に不合格になります。詳しくはクライアント側検証を参照してください。

`multiple`

論理属性の `multiple` は、設定されている場合、email 入力欄ではユーザーがウィジェット内でカンマ区切りで複数のメールアドレスを入力できること、また `file` 入力欄では複数のファイルを選択することができることを意味します。email および file 入力型を参照してください。

`name`

入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。

`name` は（厳密にはそうではありませんが）必須の属性と考えてください。入力欄に `name` が指定されていなかった場合や `name` が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。（無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。）

特殊な場合が 2 つあります。

1. `_charset_` : `<input>` 要素の hidden 型として使用された場合、入力欄の `value` には自動的に、フォームを送信するのに使用される文字エンコーディングがユーザーエージェントによって設定されます。
2. `isindex`: 歴史的な理由で、`isindex` という名前は許可されていません。

`name` 属性はラジオボタンでは独特の動きをします。

同名のラジオボタングループ内で、一度にチェックできるラジオボタンは 1 つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。

同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの 1 つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの 1 つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、1 つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。

グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。

入力要素に `name` が与えられると、その名前は所有するフォーム要素の `HTMLFormElement.elements` プロパティのプロパティになります。`name` が `guest` に設定されている入力と、`name` が `hat-size` に設定されている入力がある場合、以下のコードを使用することができます。

```js
let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];
```

このコードを実行すると、`guestName` が `HTMLInputElement` の `guest` フィールドに、`hatSize` が `hat-size` フィールドのオブジェクトになります。

**警告:** フォームの組み込みプロパティに対応する `name` をフォーム要素に与えないようにしてください。そうすると、対応する入力欄に参照するとき、定義済みのプロパティやメソッドを上書きしてしまうからです。

`pattern`

`text`, `search`, `url`, `tel`, `email`, `password` で有効です。`pattern` 属性は、指定された場合、入力の `value` が一致すれば値が制約検証を通過したとみなされる正規表現を指定します。これは `RegExp` 型で使用される有効な JavaScript の正規表現でなければならず、これは正規表現のガイドで説明されている通りです。正規表現をコンパイルする際には `'u'` フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。

`pattern` 属性が存在するが、指定されていないか無効な場合、正規表現は適用されず、この属性は完全に無視されます。`pattern` 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。

**メモ:** `pattern` 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、`title` 属性を含めることもできます。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。

詳しくはクライアントサイドの検証を参照してください。

`placeholder`

`text`, `search`, `url`, `tel`, `email`, `password`, `number` で有効です。`placeholder` 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明やプロンプトではなく、期待されるデータのタイプのヒントとなる単語や短いフレーズである必要があります。テキストには、改行を含めては*いけません*。例えば、ユーザーの名前を入力するフィールドで、そのラベルが "First Name" の場合、適切なプレースホルダーは "e.g. Mustafa" となります。

**メモ:** `placeholder` 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細はラベルを参照してください。

`popovertarget`

`<input type="button">` をポップオーバー制御ボタンにします。制御するポップオーバー要素の ID を値として取ります。詳細はポップオーバー API のランディングページを参照してください。

`popovertargetaction`

制御用の `<input type="button">` で制御されるポップオーバー要素で行われる動作を指定します。取りうる値は次の通りです。

`"hide"`

このボタンは、表示されているポップオーバーを非表示にします。非表示になっているポップオーバーを非表示にしようとした場合は、何もしません。

`"show"`

このボタンは、非表示のポップオーバーを表示させます。すでに表示されているポップオーバーを表示させようとしても、何もしません。

`"toggle"`

このボタンは、ポップオーバーの表示と非表示を切り替えます。ポップオーバーが非表示の場合、表示させます。ポップオーバーが表示されている場合、非表示になります。`popovertargetaction` が省略された場合は、`"toggle"` が制御ボタンで実行される既定のアクションです。

`readonly`

論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。`readonly` 属性は `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `password` の各入力型が対応しています。

詳しくは HTML 属性: `readonly` を参照してください。

`required`

`required` は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。`required` 属性は `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `password`, `checkbox`, `radio`, `file` の各入力型で対応しています。

詳しくはクライアントサイドの検証および HTML 属性: `required` を参照してください。

`size`

`email`, `password`, `tel`, `text` の `input` 型でのみ有効です。入力内容をどれだけ表示するかを指定します。基本的には、CSS の `width` プロパティを設定するのと同じ効果が得られますが、いくつかの特徴があります。値の実際の単位は、入力型によって異なります。`password` や `text` の場合は文字数（または `em` 単位）で既定値は `20`、それ以外の場合はピクセルとなります。CSS の `width` は `size` 属性よりも優先されます。

`src`

`image` 入力ボタンにのみ有効で、`src` は、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定する文字列です。image 入力型を参照してください。

`step`

`date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` で有効です。`step` 属性は、値が準拠すべき粒度を指定する数値です。

明示的に指定しない場合は次のようになります。

* `step` の既定値は、`number` と `range` の場合は 1 です。
* 日付や時刻の入力型では、型ごとにふさわしい `step` の既定値があります。`date`、`datetime-local`、`month`、`time`、`week` の個別のページを参照してください。

値は、正の整数または浮動小数点実数、または特殊な値 `any` のいずれかでなければなりません。これは、刻みが考慮されず、あらゆる値が許容されることを意味します（`min` や `max` などの他の制約がない場合）。

`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">` に）設定する必要があります。

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

詳しくはクライアントサイドの検証を参照してください。

`tabindex`

すべての要素、すべての入力型で有効なグローバル属性で、要素が入力フォーカスを受けられる (フォーカス可能) かどうかを示す整数属性であり、順次キーボードナビゲーションに加わるべきかどうかを示します。hidden 型の入力を除くすべての入力型がフォーカス可能であるため、この属性はフォームコントロールに使用すべきではありません。そうすると文書内のすべての要素のフォーカス順序を管理しなければならず、間違って行うとユーザビリティやアクセシビリティを損なう危険性があるからです。

`title`

すべての要素、すべての入力型で有効なグローバル属性で、所属する要素に関連するアドバイス情報を表すテキストを指定します。このような情報は、ふつうツールチップとしてユーザーに提示されますが、必ずそうとは限りません。title は、フォームコントロールの目的の主たる説明として使用してはいけません。代わりに `<label>` 要素を使用し、その `for` 属性でフォームコントロールの `id` 属性を指すようにしてください。下記のラベルを参照してください。

`type`

文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、`checkbox` の値が使用されます。省略された場合（または不明な値が指定された場合）は、入力型に `text` が使用され、テキストの入力欄が生成されます。

許可されている値は input の型にあります。

`value`

入力コントロールの値です。HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの `HTMLInputElement` オブジェクトの `value` プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。`value` 属性は常に省略可ですが、`checkbox`, `radio`, `hidden` においては必須だと考えてください。

`width`

`image` 入力ボタンにのみ有効で、`width` にはグラフィックの送信ボタンを表現するために表示する画像ファイルの幅を指定します。image 入力型を参照してください。

### 標準外の属性

一部のブラウザーでは、以下の標準外の属性も利用できます。原則として、どうしようもない場合を除き、これらの使用は避けるべきです。

| 属性 | 説明 |
| --- | --- |
| `autocapitalize` | テキスト要素の内容に、どのように自動大文字化が適用されるべきかを示す文字列です。**Safari のみ**。 |
| `autocorrect` | 自動補完が `on` であるか `off` であるかを示す文字列です。**Safari のみ。** |
| `incremental` | ユーザーがフィールドの値を編集している途中にライブで検索結果を更新できるように、`search` イベントを繰り返し送信するかどうかを設定します。**WebKit および Blink のみ（Safari, Chrome, Opera, など）。** |
| `mozactionhint` | 文字列で、ユーザーがフィールドの編集中に `Enter` キーや `Return` キーを押したときに実行されるアクションの種類を示す文字列です。仮想キーボード上で、そのキーに対応する適切なラベルを決定するために使用されます。
**非推奨: 代わりに `enterkeyhint` を使用してください。** |
| `orient` | 範囲のスライダーの向きを設定します。**Firefox のみ。** |
| `results` | 以前の検索クエリーのドロップダウンリストに表示する項目の最大数です。**Safari のみ。** |
| `webkitdirectory` | 論理属性で、ユーザーがディレクトリー（または `multiple` も存在すれば複数のディレクトリー）を選択できるようにするかどうかを示します。 |

`autocapitalize`
Non-standard

（Safari のみ） ユーザーがこのフィールドを編集している間、自動大文字化がどのように適用されるべきかを示す文字列。許可されている値は次の通りです。

`none`

どのテキストにも自動大文字化を行いません。

`sentences`

各文の最初の文字を自動的に大文字化します。

`words`

各語の最初の文字を自動的に大文字化します。

`characters`

すべての文字を自動的に大文字化します。

`autocorrect`
Non-standard

（Safari のみ）。文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

`on`

構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。

`off`

自動修正やテキストの置き換えを無効にします。

`incremental`
Non-standard

論理属性 `incremental` は WebKit および Blink 拡張で（そのため Safari, Opera, Chrome, などが対応）、もし存在すれば、ユーザーエージェントに入力をライブ検索として処理します。ユーザーがフィールドの値を編集すると、ユーザーエージェントは `search` イベントを検索ボックスを表す `HTMLInputElement` オブジェクトへ送信します。これにより、ユーザーが検索を編集するたびに、コードからリアルタイムに検索結果を更新することができます。

`incremental` が指定されていない場合、`search` イベントはユーザーが明示的に検索を実行した時のみ（フィールドを編集中に `Enter` または `Return` キーを押すなど) 送信されます。

`search` イベントは発生頻度が制限されているため、実装により定義された間隔よりも頻繁に送信されることはありません。

`orient`
Non-standard

CSS の標準外の -moz-orient non-standard プロパティと同様に `<progress>` および `<meter>` 要素に影響を与える `orient` 属性は、範囲スライダーの向きを定義する定義します。値は `horizontal` が範囲を水平方向に描画することを、`vertical` が範囲を垂直に描画することを意味します。

`results`
Non-standard

`results` 属性は Safari のみが対応しており、`<input>` 要素のネイティブな検索クエリーのドロップダウンメニューに表示する項目の最大数を上書きすることができる数値です。

この値は、負でない 10 進数でなければならなりません。指定しない場合、または無効な値を指定した場合は、ブラウザーの既定の最大項目数が使用されます。

`webkitdirectory`
Non-standard

論理属性の `webkitdirectory` は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリーのみを選択することができることを示します。詳しい解説と例については `HTMLInputElement.webkitdirectory` を参照してください。

`webkitdirectory` はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。

メソッド
----

以下のメソッドは DOM 内で `<input>` を表現する `HTMLInputElement` インターフェイスで提供されます。親インターフェイスである `HTMLElement`, `Element`, `Node`, `EventTarget` で指定されているメソッドも使用できます。

`checkValidity()`

要素の有効性チェックを直ちに実行し、値が有効でない場合は文書に対して `invalid` イベントを要素に発生させます。

`reportValidity()`

要素の値が有効性チェックを通過した場合は `true` を返します。それ以外の場合は `false` を返し、要素に対して `invalid` イベントを発行し、（そのイベントが取り消されない場合）問題をユーザに報告します。

`select()`

要素が選択可能な場合、`<input>` 要素の内容を選択します。選択可能なテキストコンテンツがない要素（カラーピッカーまたはカレンダー日付入力など）では、このメソッドは何もしません。

`setCustomValidity()`

入力要素の値が有効ではないときに表示する独自のメッセージを設定します。

`setRangeText()`

入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。`selectMode` 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。

`setSelectionRange()`

テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。

`stepDown()`

数値入力欄の値を既定で 1、または指定された数値の単位だけ減少させます。

`stepUp()`

数値入力欄の値を既定で 1、または指定された数値の単位だけ増加させます。

CSS
---

置換要素である入力欄には、フォーム要素以外には適用できない特性がいくつかあります。フォームコントロールをその UI の特性に基づいて指定できる CSS セレクターがあり、UI 擬似クラスとも呼ばれています。また、属性セレクターを使って、input 要素を型別に指定することもできます。また、特に便利なプロパティもあります。

### UI 擬似クラス

`<input>` 要素に関連する説明| 擬似クラス | 説明 |
| --- | --- |
| `:enabled` | 現在有効な要素で、アクティブ化（選択、クリック、入力など）またはフォーカスを受け受け取ることができ、無効な状態、すなわちアクティブ化やフォーカスを受け取ることができない状態を持つものです。 |
| `:disabled` | 現在無効な要素で、有効な状態、すなわち無効化されていなければアクティブ化 (選択、クリック、入力など) やフォーカスを受け取ることができる状態になることができるものです。 |
| `:read-only` | ユーザーが編集することができない要素 |
| `:read-write` | ユーザーが編集できる要素です。 |
| `:placeholder-shown` | 現在 `placeholder` のテキストを表示している要素で、`<input>` や `<textarea>` 要素に `placeholder` 属性が付いていて、まだ値がないものを含みます。 |
| `:default` | 関連する要素のグループの中で、既定となるフォーム要素です。checkbox や radio の入力型のうち、ページの読み込み時やレンダリング時にチェックされていたものに一致します。 |
| `:checked` | checkbox や radio の入力型のうち、現在チェックされている (また `<select>` の `<option>` のうち現在選択されているもの) に一致します。 |
| `:indeterminate` | checkbox 要素で indeterminate プロパティが JavaScript から true に設定されている場合、radio 要素で同じ name の値を持つすべてのラジオボタンがチェックされていない場合、`<progress>` 要素が indeterminate の状態にある場合 |
| `:valid` | フォームコントロールのうち、制約検証が適用でき、現在有効であるもの。 |
| `:invalid` |
 制約条件の検証が適用され、現在有効ではないフォームコントロール。
 `required`,
 `pattern`,
 `step`,
 `max` などの属性で設定された制約条件に値が適合しないフォームコントロールに一致します。
  |
| `:in-range` | 空でない入力欄のうち、現在の値が `min` および `max` 属性、および `step` 属性で指定された範囲内にあるもの。 |
| `:out-of-range` | 空でない入力欄のうち、現在の値が `min` および `max` 属性の範囲内にないか、`step` の制約に準拠していないもの。 |
| `:required` | `<input>`, `<select>`, `<textarea>` の各要素で、`required` 属性が設定されているもの。
 必須になる要素のみに一致します。
 必須にならない要素にこの属性を設定しても、一致するようにはなりません。
  |
| `:optional` | `<input>`, `<select>`, `<textarea>` の各要素で、`required` 属性が設定されていないもの。必須になることがない属性には一致しません。 |
| `:blank` | `<input>` および `<textarea>` 要素のうち現在値がないものです。 |
| `:user-invalid` | `:invalid` と似ていますが、フォーカスを失ったときに適用されます。無効な入力欄に一致しますが、コントロールにフォーカスが移動したり、コントロールから離れたり、無効なコントロールを含むフォームを送信しようとしたときなど、ユーザーの操作があって初めて一致します。 |

#### 擬似クラスの例

チェックボックスのラベルを、そのチェックボックスがチェックされているかどうかに基づいてスタイル設定することができます。この例では、`color` と `font-weight` でチェックされたボックスの直後にある `<label>` をスタイル設定しています。`input` がチェックされていない場合はスタイルを適用しません。
```

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput"
 >このチェックボックスのオンとオフを切り替えてください</label
>
```

```css
input:checked + label {
  color: red;
  font-weight: bold;
}
```

### 属性セレクター

属性セレクターを使用すると、様々なフォームコントロールの型のターゲットを type に基づいて絞ることができます。CSS の属性セレクターは、属性の有無または属性の値に基づいて要素を照合します。

```css
/\* password 入力欄に一致 \*/
input[type="password"] {
}

/\* 有効な値の範囲が限定されているフォームコントロールに一致 \*/
input[min][max] {
}

/\* pattern 属性の付いたフォームコントロールに一致 \*/
input[pattern] {
}
```

### ::placeholder

既定では、プレイスホルダーのテキストは半透明または明るい灰色で表示されます。`::placeholder` 擬似要素は入力欄の `placeholder` のテキストです。これは限定された CSS プロパティでスタイル設定することができます。

```css
::placeholder {
  color: blue;
}
```

`::first-line` 擬似要素に適用できる CSS プロパティのサブセットのみが、セレクターに `::placeholder` を使用した規則で使用することができます。

### appearance

`appearance` プロパティは、（ほぼ）あらゆる要素をオペレーティングシステムのテーマに基づいたプラットフォームのネイティブのスタイルで表示したり、`none` の値でプラットフォームのネイティブのスタイルを削除したりすることができます。

`<div>` に `div {appearance: radio;}` を設定してラジオボタンのように見せたり、`[type="radio"] {appearance: checkbox;}` でチェックボックスのように見せたりすることができますが、やらないでください。

`appearance: none` を設定するとプラットフォームのネイティブの境界が削除されますが、機能は削除されません。

### caret-color

テキスト入力関連要素に特有のプロパティとして、CSS の `caret-color` プロパティがあり、テキスト入力欄のキャレットを描くのに使用する色を設定することができます。

#### HTML

```html
<label for="textInput">赤いキャレットに注意:</label>
<input id="textInput" class="custom" size="32" />
```

#### CSS

```css
input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### 結果

### object-position と object-fit

`<input>` 要素は特定の場合（多くはテキスト以外の入力や特殊なインターフェイス）（には、置換要素になることがあります。その場合、CSS の `object-position` および `object-fit` プロパティを使って、要素の枠内での大きさと位置を調整することができます。

### スタイル設定

HTML の要素に色を追加することの関する詳しい情報は、次の記事を参照してください。

* CSS を使った HTML の要素への色の適用

こちらも参照してください。

* HTML フォームへのスタイル設定
* HTML フォームへの高度なスタイル設定
* フォームウィジェット向けプロパティ実装状況一覧
追加機能
----

### ラベル

ラベルは支援テキストを `<input>` に関連付けるために必要です。`<label>` 要素は、フォームの入力欄を説明するために、(レイアウト方法はさておき）*常に*適切な手段です。`<label>` を使用して `<input>` や `<textarea>` に何を入力するべきかを説明することは、決して悪い考えではありません。

#### 関連付けられたラベル

`<input>` 要素と `<label>` 要素を意味的に連携させると、スクリーンリーダーなどの支援技術に役立ちます。`<label>` の `for` 属性を使って連携させることで、ラベルと入力欄を結び付け、画面リーダーがユーザーに入力欄についてより正確に説明できるようになります。

`<input>` 要素にプレーンテキストが隣接しているだけでは十分ではありません。ユーザビリティとアクセシビリティのためには、暗黙的または明示的な `<label>` を含めることが必要です。

```html
<!-- アクセシブルではない -->
<p>名前を入力してください: <input id="name" type="text" size="30" /></p>

<!-- 暗黙的なラベル -->
<p>
  <label
 >名前を入力してください: <input id="name" type="text" size="30"
 /></label>
</p>

<!-- 明示的なラベル -->
<p>
  <label for="name">名前を入力してください: </label>
  <input id="name" type="text" size="30" />
</p>
```

最初の例は、プロンプトと `<input>` 要素の間に関係がないため、アクセシブルではありません。

ラベルはアクセシブルな名前を提供するばかりではなく、マウスやタッチパネルのユーザーがクリックしたりタッチしたりする際に、「ヒット」領域を拡大することができます。`<label>` と `<input>` を連携させることで、どちらかをクリックすると `<input>` にフォーカスが当たります。入力欄の「ラベル」にプレーンテキストを使用した場合、このようなことは起こりません。入力欄のアクティベーション領域にプロンプト部分が含まれていると、運動制御の条件を持つ人には便利です。

ウェブ開発者として大切なのは、私たちが知っていることを、人々がすべて知っていると思わないことです。ウェブを利用する人々に多様性があるということは、自分のウェブサイトにも及ぶことですが、サイトの訪問者の中には、思考プロセスや状況に何らかの違いがあり、明確で適切なラベルがなければ、あなたのフォームをあなたとは全く異なるように解釈する人がいるということでもあります。

#### プレイスホルダーはアクセシブルではない

`placeholder` 属性で、`<input>` 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために決して必要なものではありません。プレイスホルダーはラベルではありませんので、代用として使用してはいけません。プレイスホルダーは、入力された値がどのように見えるかのヒントを提供するために使用されるもので、説明やプロンプトではありません。

プレイスホルダーは、スクリーンリーダーがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりした場合、プレイスホルダーは非表示になります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップすることがあります。すなわち `placeholder` は翻訳されないことがあります。

**メモ:** 避けることができるのであれば、`placeholder` 属性を使用しないでください。`<input>` 要素にラベルを付ける必要があるのであれば、`<label>` 属性を使用してください。

### クライアント側の検証

**警告:** クライアント側の検証は便利ですが、サーバーが有効なデータを受け取ることを保証するものではありません。データが特定の形式でなければならない場合は、必ずサーバー側でも検証を行い、形式が無効な場合は HTTP の `400` レスポンスを返してください。

上記の UI 擬似クラスの節で述べたように、CSS を用いて、それぞれの入力欄の現在の状態に基づく `:valid` または `:invalid` の UI 状態に基づいて入力欄にスタイル設定をすることに加え、フォームを送信（しようと）したときに、ブラウザーはクライアントサイドの検証を行います。フォームを送信する時に、制約検証に不合格になったフォームコントロールがある場合、対応しているブラウザーは、最初の無効なフォームコントロールにエラーメッセージを表示します。エラー種別に基づいた既定のメッセージを表示したり、ユーザーが設定したメッセージを表示したりします。

一部の入力型やその他の属性によっては、入力に対して有効な値を制限するものがあります。例えば、`<input type="number" min="2" max="10" step="2">` の場合、2、4、6、8、10 の数値のみが有効になります。様々なエラーが発生する可能性があります。例えば、`rangeUnderflow` エラー（値が 2 より小さい場合）、`rangeOverflow` （10 より大きい場合）、`stepMismatch` （値が 2 から 10 の間の数字で偶数の整数でない (`step` 属性の要件に合わない) 場合）、`typeMismatch` （値が数値ではない場合）などです。

可能な値の範囲が周期的な（つまり、値が取りうる最大値で終了するのではなく、最初に戻る）入力型では、`max` プロパティと `min` プロパティの値を逆にして、許可される値の範囲が `min` から始まり、可能な最小値まで回り込んで、`max` に達するまで続くことを示すことが可能です。これは日付や時刻の場合、例えば午後 8 時から午前 8 時までの範囲を許可したい場合などに特に便利です。

```html
<input type="time" min="20:00" max="08:00" name="overnight" />
```

決まった属性と値の組み合わせが、`ValidityState` の決まったエラーを発生させます。

`<input>` の属性とその値による検証オブジェクトエラー| 属性 | 関連するプロパティ | 説明 |
| --- | --- | --- |
| `max` | `validityState.rangeOverflow` | 値が `max` 属性で定義された最大値よりも大きい場合に発生する |
| `maxlength` | `validityState.tooLong` | `maxlength` プロパティで許可された値よりも文字数が多い場合に発生する |
| `min` | `validityState.rangeUnderflow` | 値が `min` 属性で定義された最小値よりも小さい場合には発生する |
| `minlength` | `validityState.tooShort` | `minlength` プロパティで必要とされる値よりも文字数が少ない場合に発生する |
| `pattern` | `validityState.patternMismatch` | pattern 属性に有効な正規表現が設定されており、`value` がそれに一致しない場合に発生する。 |
| `required` | `validityState.valueMissing` | `required` 属性があるにもかかわらず、値が `null` であるか、ラジオボタンやチェックボックスがチェックされていない場合に発生する。 |
| `step` | `validityState.stepMismatch` | 値が step の増分に一致していない。増分の既定値は `1` であるため、`type="number"` で step が指定されていない場合は整数のみが有効になります。`step="any"` ではこのエラーは発生しません。 |
| `type` | `validityState.typeMismatch` | 値が正しい型ではない場合、例えばメールアドレスに `@` が含まれていない場合や、URL にプロトコルが含まれていない場合に発生します。 |

フォームコントロールに `required` 属性がない場合、値がなかったり空文字列であったりしても無効にはなりません。`required` 以外の上記の属性があった場合も、空文字列でエラーにはなりません。

どのような値を受け入れることができるかの制限を設けることができるので、対応しているブラウザーはこれらのフォームの値をネイティブに検証し、フォームの送信時に誤りがある場合はユーザーに警告を発します。

上記の表で説明したエラーに加え、`validityState` インターフェイスには `badInput`, `valid`, `customError` の論理型の読み取り専用プロパティがあります。検証オブジェクトに含まれるのは次の通りです。

* `validityState.valueMissing`
* `validityState.typeMismatch`
* `validityState.patternMismatch`
* `validityState.tooLong`
* `validityState.tooShort`
* `validityState.rangeUnderflow`
* `validityState.rangeOverflow`
* `validityState.stepMismatch`
* `validityState.badInput`
* `validityState.valid`
* `validityState.customError`

これらの論理型プロパティではそれぞれ、`true` の値で指定された観点の検証に合格しなかった可能性があることを示しますが、`valid` プロパティは例外で、その要素の値がすべての検証に合格したときに `true` になります。

エラーがあった場合、対応しているブラウザーでは、ユーザーに警告するとともに、フォームの送信を阻止します。注意点としては、独自のエラーに真とみなされる値（空の文字列や `null` 以外）が設定されていると、フォームの送信が阻止されます。独自のエラーメッセージがなく、他のどのプロパティも true を返さない場合、`valid` は true となり、フォームは送信されます。

```js
function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("値が必要です");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("値が低すぎます");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("値が高すぎます");
  } else {
    input.setCustomValidity("");
  }
}
```

最後の行、独自の検証メッセージを空文字列に設定することが重要です。ユーザーがエラーを起こし、validity が設定されている場合、すべての値が有効であっても、メッセージが `null` になるまで送信に失敗します。

#### 独自の検証エラーの例

フィールドの検査に不合格になった場合に独自のエラーメッセージを表示させたい場合は、`<input>` (および関連する) 要素で利用できる制約検証機能を使用する必要があります。以下のような形を取ってください。

```html
<form>
  <label for="name"
 >ユーザー名を入力してください（英大文字および小文字）:
  </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>
```

基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、`pattern` と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。

独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。

```js
const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("名前を入力してください。");
  } else {
    nameInput.setCustomValidity(
      "ユーザー名には英大文字と小文字のみが使えます。入力しなおしてください。",
    );
  }
});
```

この例は次のように表示されます。

簡単に言えば、以下の通りです。

* input 要素が有効であるかの状態をチェックするために、値が変更されるたびに `checkValidity()` メソッドを `input` イベントハンドラーから呼び出します。
* 値が有効ではない場合、`invalid` イベントが発行され、`invalid` イベントのハンドラー関数が実行されます。この関数の中で、値が無効である原因が空欄であるためであるか、パターンに一致しないためであるかを確認し、`if ()` ブロックを使用して、独自の検証エラーメッセージを設定します。
* 結果として、送信ボタンが押されたときに入力値が有効ではない場合は、独自のエラーメッセージのうちの一つが表示されます。
* 有効である場合は、期待通りに送信されます。この場合、独自の検証は `setCustomValidity()` を空文字列で呼び出すことで中断されます。従って、`input` イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に有効な値を持っていたとしても、入力欄は無効であるとして登録されます。

**メモ:** 常に、クライアント側とサーバー側の両方で入力値の制約を検証するようにしてください。制約検証は、*サーバー側*での検証の必要性をなくすものではありません。古いブラウザーや悪意のある人物によって、無効な値が送信される可能性があります。

**メモ:** Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — `x-moz-errormessage` — に対応していました。これはバージョン 66 で削除されました（Firefox バグ 1513890 を参照）。

### ローカライズ

`<input>` 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、他のロケールではこの数値を入力する方法が 1.000,00 であったりします。

Firefox は（少なくとも `type="number"` において）ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。

* 当該要素または親要素の `lang`/`xml:lang` 属性で指定された言語
* HTTP の `Content-Language` ヘッダーで指定された言語
* 何も指定されていない場合は、ブラウザーのロケール
### 技術的概要

|  |  |
| --- | --- |
| コンテツカテゴリー | フローコンテンツ、リスト化、サブミット可能、リセット可能、フォーム関連要素、記述コンテンツ。`type` の値が `hidden` でない場合はラベル付け可能要素、知覚可能コンテンツ。 |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはなりません。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | * `type=button`:
 `button`
* `type=checkbox`:
 `checkbox`
* `type=email`
    + `list` 属性なし:
     `textbox`
    + `list` 属性あり: `combobox` (en-US)
* `type=image`:
 `button`
* `type=number`: `spinbutton` (en-US)
* `type=radio`: `radio`
* `type=range`: `slider`
* `type=reset`:
 `button`
* `type=search`
    + `list` 属性なし: `searchbox` (en-US)
    + `list` 属性あり: `combobox` (en-US)
* `type=submit`:
 `button`
* `type=tel`
    + `list` 属性なし:
     `textbox`
    + `list` 属性あり: `combobox` (en-US)
* `type=text`
    + `list` 属性なし:
     `textbox`
    + `list` 属性あり: `combobox` (en-US)
* `type=url`
    + `list` 属性なし:
     `textbox`
    + `list` 属性あり: `combobox` (en-US)
* `type=color|date|datetime-local|file|hidden|month|password|time|week`:
 対応するロールなし
 |
| 許可されている ARIA ロール | * `type=button`: `checkbox`,
 `combobox` (en-US),
 `link`,
 `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US),
 `option`, `radio`,
 `switch`, `tab`
* `type=checkbox`: `button` ただし `aria-pressed`,
 `menuitemcheckbox` (en-US),
 `option`, `switch` と共に使用された場合
* `type=image`: `link`,
 `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US),
 `radio`, `switch`
* `type=radio`: `menuitemradio` (en-US)
* `type=text` で `list` 属性なし:
 `combobox` (en-US), `searchbox` (en-US),
 `spinbutton` (en-US)
* `type=color|date|datetime-local|email|file|hidden|`
`month|number|password|range|reset|search|submit|tel|url|week`
 または `text` に `list` 属性がある場合: 許可されている `role` なし
 |
| DOM インターフェイス | `HTMLInputElement` |

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

### ラベル

入力欄を設定する際、ラベルを一緒に付けることがアクセシビリティ上の要件です。これは、支援技術を使っている人が、何のための入力なのかを知るために必要です。また、ラベルをクリックまたはタッチすると、ラベルに関連付けられたフォームコントロールにフォーカスが設定されます。これにより、目の不自由なユーザーのアクセシビリティとユーザビリティが向上し、ユーザーがクリックまたはタッチしてフォームコントロールを起動できる領域が増えます。この機能は、ラジオボタンやチェックボックスのような小さなフォームコントロールに特に便利です。ラベルの詳細については、ラベルを参照してください。

次の例は、上記の形で `<label>` を `<input>` 要素に関連付ける方法の例です。`<input>` に `id` 属性を設定する必要があります。そして `<label>` には入力欄の `id` と同じ値を持つ `for` 属性が必要になります。

```html
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />
```

### 大きさ

フォーム入力欄のような対話型要素は、簡単に有効化できるだけの大きさを持たせてください。これにより、手足の不自由な人や、スタイラスや指のような精度の低い入力方法を使用している人など、様々な人にとって有用です。対話型の大きさとしては、44×44 CSS ピクセル を最小値とすることが推奨されています。

* Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
* Target Size and 2.5.5 | Adrian Roselli
* Quick test: Large touch targets - The A11Y Project
仕様書
---

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

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

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

関連情報
----

* フォームの制約検証
* 初めての HTML フォーム
* HTML フォームを構成する方法
* ネイティブのフォームウィジェット
* フォームデータの送信
* フォームデータの検証
* 独自のフォームコントロールの作成方法
* 古いブラウザーでの HTML フォーム
* HTML フォームへのスタイル設定
* HTML フォームへの高度なスタイル設定
* CSS プロパティの互換性一覧表


<del>: 削除済みテキスト要素 - HTML: ハイパーテキストマークアップ言語

<del>: 削除済みテキスト要素
=================

**`<del>`** は HTML の要素で、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。`<ins>` 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。

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

一般的にこの要素は（必ずではありませんが）打ち消し線のスタイルを伴って描画されます。

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

属性
--

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

`cite`

変更についての説明を記したリソース（例えば、議事録など）への URI を示す。

`datetime`

この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。日付のない文字列の書式については、日付の文字列を参照してください。日付と時刻の両方を含んだ文字列の書式は、地方時の日付と時刻の文字列にあります。

例
-

```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### 結果

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

`del` 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の `content` プロパティを `::before` 及び `::after` 擬似要素と共に使うことでアナウンスさせることができます。

```css
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [削除開始] ";
}

del::after {
  content: " [削除終了] ";
}
```

スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが削除されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
仕様書
---

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

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

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

関連情報
----

* テキストへの挿入を示す `<ins>` 要素
* テキストの削除とは異なる抹消を表すための `<s>` 要素


<tr>: 表の行要素 - HTML: ハイパーテキストマークアップ言語

<tr>: 表の行要素
===========

**`<tr>`** は HTML の要素で、表内でセルの行を定義します。行のセルには `<td>` （データセル）および `<th>` （見出しセル）要素をを混在させることができます。

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

セルをどのように列に収める（または列にまたがる）かを制御できるようにするため、`<th>` および `<td>` で `colspan` 属性をサポートします。これはセルの幅をいくつの列にするかを指定でき、既定値は 1 です。同様に、セルが複数の行にまたがることを示す `rowspan` 属性も使用できます。

表を作成するとき、正しい表にするために少し経験が必要かもしれません。以下にいくつか例がありますが、さらに多くの例や詳しいチュートリアルは、ウェブ開発を学ぶ領域の HTML 表シリーズをご覧ください。表形式のデータを正しいレイアウトに整形するため、 table 要素やその属性の使い方を学ぶことができます。

属性
--

この要素にはグローバル属性があります。使用を避けるべき非推奨の属性もいくつかありますが、古いコードを読む際は知っている必要があるでしょう。

### 非推奨の属性

以下の属性はまだブラウザーが実装していますが、すでに HTML 仕様に含まれていませんのでまったく動作しない、あるいは期待どおりに動作しない可能性があります。使用は避けてください。

`align`
非推奨

文字列で、行の各セルの中身について、水平方向の配置方法を指定します。これは行内の全セルで個別に `align` を使用することに対する一括指定です。以下の値を指定可能です。

`left`

各セルの中身を左側に揃えます。

`center`

中身をセルの左端と右端の間で中央揃えにします。

`right`

各セルの中身を右側に揃えます。

`justify`

テキストが各セルの幅全体を満たす（両端揃え）ように、テキスト内のホワイトスペースを広げます。

`char`

行内の各セルを、特定の文字に対して揃えます (この方法で設定された列内の各行は、その文字に対して揃えます)。これは `char` および `charoff` を使用して、揃える文字 (数値データを揃える際の "." や "," が一般的です) および揃える文字に続く文字の数を指定します。この配置方法は、広くは対応されていませんでした。

`align` の値が明示的に設定されていない場合は、親ノードの値を継承します。

**メモ:** 行内のセルで配置方法を指定するには、廃止された `align` 属性の代わりに CSS の `text-align` プロパティで `left`, `center`, `right`, `justify` を指定してください。文字ベースの配置方法を適用するには、 CSS の `text-align` プロパティに揃える文字 (`"."` や `","` など) を設定してください。

`bgcolor`
非推奨

文字列で、行の各セルの背景色を定義します。値は 16 進 `#RRGGBB` または `#RGB` 値、あるいは色キーワードを使用できます。属性を省略するか JavaScript で `null` を設定すると、行のセルは親要素の背景色を継承します。

**メモ:** `<tr>` 要素は CSS を使用してスタイルを設定するべきです。 `bgcolor` 属性と同様の効果を与えるには、CSS の `background-color` プロパティを使用してください。

`char`
非推奨

文字列で、行のそれぞれの列のセルで揃える文字を設定します（同一の文字を使用して、それぞれの行の中心がほかの行と揃えられます）。典型的な値に、数値や金額を揃えようとするときのピリオド (`"."`) やカンマ (`","`) があります。 `align` 属性が `char` ではない場合は、この属性は無視されます。

**メモ:** この属性は廃止され、かつほとんど実装されていませんでした。 `char` と同様の効果を得るには、 CSS の `text-align` プロパティの値として `char` の値を使用します（例えば `text-align: "."`）。

`charoff`
非推奨

文字列で、 `char` 属性で指定した揃え文字から行のデータをオフセットする文字数を示します。例えば通貨単位の 100 分の 1 の値を使用する通貨 (例えばドルであり、100 セントに分割されます) の金額を表示するときは、一般的に値 2 を指定するでしょう。 `char` に `"."` を設定することと組み合わせると、列内の値が小数点できれいに揃い、セントの数値が小数点の右側へ適切に表示されます。

**メモ:** この属性は廃止されただけでなく、ほとんど実装されていませんでした。

`valign`
非推奨

文字列で、行の各セルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

`baseline`

異なるフォントやフォントサイズの文字列を、その行で使用されているフォントのベースラインに沿って整列させることによって処理します。もし行の全ての文字が同じサイズであれば、効果は `bottom` と同じになります。

`bottom`

行の各セル内のテキストを、セルの下辺に可能な限り近づけて描画します。

`middle`

各セルのテキストは垂直方向の中央に配置されます。

`top`

各セルのテキストは、含まれるセルの上端に可能な限り沿って描画されます。

**メモ:** `valign` 属性は廃止されたため、使用しないでください。代わりに CSS の `vertical-align` プロパティを使用してください。

例
-

`<tr>` 要素の使用例については、 `<table>` を参照してください。

### 基本的な例

これは、人名とクラブまたはサービスのさまざまな会員情報を載せる表を表示する簡単な例です。

#### HTML

この HTML は、表のもっとも基本的な構造を示します。グループ、複数の行や列にまたがるセル、タイトルはなく、明確に似ているもののために表の構成要素の周りに線を生成する、もっとも基本的なスタイルだけがあります。

表には 4 列（1 列の見出しを含む）があるの行が 4 行（1 行の見出しを含む）があります。表セクション要素は使用していません。代わりに、ブラウザーはそれらを自動的に定義できます。この次の例では `<thead>`, `<tbody>`, `<tfoot>` を追加します。

```html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>
```

#### CSS

このシンプルな CSS は表とセルの周りに黒い実線の境界線を追加するものであり、セルは `<th>` と `<td>` の両方を使用して指定します。このようにして、見出しセルとデータセルが簡単に区別できます。

```css
table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
```

#### 結果

### 行や列をつなげる

次に、ユーザーの有効期限のデータを表示する列を追加しましょう。また、 "joined" と "canceled" のデータの上に、 "Membership Dates" という大見出しも追加します。これは行や列をまたぐセルを表に追加するということであり、見出しのセルを正しい位置に置くことができます。

#### 結果

始めに、実際の表示結果を見ましょう。

見出し領域が実際は 2 行あることに注目してください。ひとつは "Name", "ID", "Membership Dates", "Balance" の見出し、もうひとつは "Joined" と "Canceled" であり、これは "Membership Dates" の小見出しです。これは以下のようにして実現します。

* 1 行目の "Name", "ID", "Balance" の見出しセルは、`rowspan` 属性を使用して 2 行にまたがっており、それぞれのセルの高さが 2 行分になります。
* 1 行目の "Membership Dates" の見出しセルは、`colspan` 属性を使用して 2 列にまたがっており、実際に見出しの幅が 2 列分になります。
* 2 行目の `<th>` 要素は、"Joined" と "Canceled" しかありません。ほかの列は 2 行目にまたがっている 1 行目のセルがすでに占有しているためであり、 2 行目のセルは "Membership Dates" の下へ適切に配置されます。

#### HTML

HTML は前の例に似ていますが、それぞれのデータ行に新しい列を追加したことと、見出しを変更したことが異なります。変更した HTML は以下のようになります。

```html
<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td><time datetime="2017-04-08">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>
```

(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。 "Name", "ID", "Balance" の見出しで `rowspan` を使用して 2 行を占めていることと、 "Membership Dates" の見出しで `colspan` を使用して 2 列を占めていることに注意してください。

CSS は変更していません。
```

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
```

### 表の内容のグループを明示する

この表にスタイルを設定する前に、 CSS を簡単にするために行や列のグループを追加する時間をとりましょう。

#### HTML

この作業を行う場所は HTML であり、また作業はとても単純です。

```html
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。 "Name", "ID", "Balance" の見出しで `rowspan` を使用して 2 行を占めていることと、 "Membership Dates" の見出しで `colspan` を使用して 2 列を占めていることに注意してください。

ここでも、 CSS は変更しません。
```

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}
```

#### 結果

内部では役に立つ文脈情報を追加したにもかかわらず、表示結果はまったく変わっていません。

### 基本的な整形

表のすべての部分の場合と同じく、 CSS を使用して表の行やその中身の外観を変更できます。 `<tr>` 要素に適用したスタイルは、セルに適用したセルで上書きされない限り、行内のすべてのセルに影響を与えます。

使用する書体の調節するスタイルと、見出し行に背景色を追加するスタイルを適用しましょう。

#### 結果

再び、始めに表示結果を見ましょう。
```

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

#### CSS

ここでは HTML を変更せず、CSS に手を加えます。

```css
table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr {
  background-color: rgb(228, 240, 245);
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
```

ここで `font` プロパティを `<table>` 要素に追加して、視覚的に目立つ書体 (または人の意見によっては忌々しい sans-serif 書体) を設定する一方、興味深いところは 2 番目のスタイルで、 `<tr>` 要素のうち `<thead>` の中にあるものの背景色がライトブルーになります。これは、見出し領域内にあるすべてのセルへ一斉に背景色を適用するためのてっとり早い方法です。

1 列目の `<th>` 要素の会員名は行の見出しとして扱っていますが、このスタイルは*影響を与えません*。

### 高度なスタイル設定

次は全力を尽くして、行の色を交互に設定する、行内の位置に応じてさまざまな色を設定するなど、見出しや本体の行にスタイルを設定します。

#### 結果

表は最終的に以下のようになります。

ここでも HTML は変更しません。 HTML を適切に準備することがどのようなことか分かりましたか？
```

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

#### CSS

ここでは CSS をさらに変更します。複雑ではありませんが、多くのことを行います。詳しく説明しましょう。

##### 表と基本的なスタイル

```css
table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
```

ここでは `border-spacing` および `border-collapse` を追加して、セル間の間隔を取り除き、 2 本の境界線を互いに接する1本の境界線にまとめます。

```css
th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}
```

ここには、表のすべてのセルに既定のスタイルがあります。次に、カスタマイズしましょう!

##### 上部の見出し全体

上部の見出し 2 つに分けて見ていきます。始めに、見出し全体のスタイルです。

```css
thead > tr {
  background-color: rgb(228, 240, 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;
}
```

これは、表の見出し (`<thead>` を使用して指定します) 内にあるすべての `<tr>` 要素の背景色を設定します。そして上部の見出しの下ボーダーを、幅が 2 ピクセルの線に設定します。ただし、見出しの *2 行目*に `border-bottom` を適用するために `:nth-of-type` セレクターを使用していることに注目してください。なぜでしょう? これは、いくつかのセルがまたがっている 2 つの行で見出しが構成されているためです。実際は見出しが 2 行あるということであり、 1 行目にスタイルを適用すると意図しない結果になります。

##### "Joined" および "Canceled" の見出し

新しい会員を「良く」、退会した会員を「悪く」表すために、これら 2 つの見出しを緑と赤の色合いでスタイリングしましょう。

```css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225, 255, 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255, 225, 225);
}
```

ここでは表の見出しブロックの最後の行に注目して、最初の見出しセル ("Joined") を緑系統の色、2番目の見出しセル ("Canceled") を赤系統の色に設定します。

##### 本体で行ごとに色を変える

行の色を交互に設定することは、表の可読性を高めるためによく使用されます。偶数番目の行に、少し色をつけましょう。

```css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237, 238, 242);
}
```

##### 左側の見出しにスタイルを設定

最初の列も目立たせたいので、ここにもスタイルを設定します。

```css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225, 229, 244);
}
```

表の本体のそれぞれの行で最初の見出しセルに、会員名を左揃えにする `text-align` と、いくぶん異なる背景色を設定します。

##### バランスを整える

最後に、表内の金額の値は右揃えが一般的ですので、ここで行いましょう。

```css
tbody > tr > td:last-of-type {
  text-align: right;
}
```

本体のそれぞれの行で最後の `<td>` に対して、 CSS の `text-align` プロパティに `"right"` を設定します。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<td>` 要素または `<th>` 要素。 スクリプト対応要素 (`<script>` および `<template>`) も許可されています。 |
| タグの省略 | 開始タグは必須。 `<tr>` 要素の直後に `<tr>` 要素がある場合、または親の表グループ要素 (`<thead>`, `<tbody>`, `<tfoot>`) 内で最後の要素である場合は終了タグを省略可能。 |
| 許可されている親要素 | `<table>` 要素 (子の `<tbody>` を持たない場合で、 `<caption>`, `<colgroup>`, `<thead>` の各要素より後に限る)、 `<thead>`, `<tbody>`, `<tfoot>` の各要素 |
| 暗黙の ARIA ロール | `row` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableRowElement` |

仕様書
---

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

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

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

関連情報
----

* 学習エリア: HTML の表 `<tr>` を含む、表の使用について説明します。
* `HTMLTableRowElement`: `<tr>` が準拠するインターフェイスです。
* 他の表関連要素:
    + `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<td>`, `<th>`, `<caption>`, `<col>`, `<colgroup>`


<caption>: 表キャプション要素 - HTML: ハイパーテキストマークアップ言語

<caption>: 表キャプション要素
====================

**`<caption>`** は HTML の要素で、表のキャプション（またはタイトル）を指定します。

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

属性
--

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

### 非推奨の属性

以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。

`align`
非推奨

この列挙型属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値が指定できます。

`left`

キャプションを表の左側に表示します。

`top`

キャプションを表の上側に表示します。

`right`

キャプションを表の右側に表示します。

`bottom`

キャプションを表の下側に表示します。

**警告:** この属性は非推奨ですので使用しないでください。`<caption>` 要素にスタイルを適用するには、CSS プロパティの `caption-side` および `text-align` を使用してください。

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

`<caption>` 要素は親である `<table>` 要素の最初の子とする必要があります。

`<caption>` を持つ `<table>` 要素が `<figure>` 要素の唯一の子孫である場合は、 `<figcaption>` 要素を `<caption>` の代わりに使用してください。

表の `background-color` はキャプションを含みません。両方の背景を同じ色にしたい場合は、`background-color` を `<caption>` 要素にも追加してください。

例
-

このシンプルな例は、キャプションを含む票を表します。

```html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>
```

```
caption {
  caption-side: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 |
 要素の直後に ASCII
 空白文字やコメントが続かない場合、終了タグは省略可能です。
  |
| 許可されている親要素 | `<table>` 要素で、その最初の子要素としてのみ配置可能。 |
| 暗黙の ARIA ロール | caption (en-US) |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableCaptionElement` |

仕様書
---

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

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

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

関連情報
----

* `<caption>` 要素の align 属性 の代替となる CSS プロパティ:
    + `text-align`, `caption-side`


<sub>: 下付き文字要素 - HTML: ハイパーテキストマークアップ言語

<sub>: 下付き文字要素
==============

**`<sub>`** は HTML の要素で、表記上の理由で下付き文字として表示するべきインラインテキストを示します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。

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

属性
--

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

使用上のメモ
------

`<sub>` 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。

例えば、変更したベースラインをワードマークの中で使用している企業名にスタイル付けするために `<sub>` を使用することは適切ではありません。このような場合には CSS を使用してください（例えば `vertical-align` プロパティを、 `vertical-align: sub` または、もっと詳細にベースラインの位置を制御するために、 `vertical-align: -25%` など）。

`<sub>` の適切な利用場面には次のようなものがあります（これに限定されるものでありません）。

* 脚注番号のマークアップ。例については脚注番号を参照してください。
* 数学における下付き文字の変数値のマークアップ（ただし、 MathML の数式を使うことも検討してください）。変数の下付き文字を参照してください。
* 化学式における原子数の記述（例えば、すべての開発者のお友達、C8H10N4O2 別名「カフェイン」）。化学式を参照してください。
例
-

### 脚注番号

伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは `<sub>` のよくある使い方です。

```html
<p>
  中村、ジョンソン、メイソン<sub>1</sub>の計算によると、この場合、どちらの粒子も完全に消滅することになります。
</p>
```

結果は次のようになります。

### 変数の下付き文字

数学では、同じ概念に関連する一連の変数（例えば同じ軸の距離）を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。

```html
<p>
  X軸に沿った水平座標の位置は <var>x<sub>1</sub></var> … <var>x<sub>n</sub></var> と表します。
</p>
```

出力は次の通りです。

### 化学式

化学式を書くときは、 H2O のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に 2 つの水素原子があることを表します。

他の例です。

```html
<p>
  ほぼすべての開発者が大好きな分子は
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、「カフェイン」としてよく知られています。
</p>
```

#### 結果

技術的概要
-----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

関連情報
----

* 上付き文字を表現する HTML の `<sup>` 要素。sub 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
* MathML 要素: `<msub>`, `<msup>`, `<msubsup>`
* CSS の `vertical-align` プロパティ


<samp>: サンプル出力要素 - HTML: ハイパーテキストマークアップ言語

<samp>: サンプル出力要素
================

**`<samp>`** は HTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。

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

属性
--

この要素にはグローバル属性以外の属性はありません。

使用上のメモ
------

CSS ルールを定義することで、`<samp>` 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。

CSS で既定のフォントを上書きするには、次のようにします。

```css
samp {
  font-family: "Courier";
}
```

**メモ:** ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに `<output>` 要素を使用してください。

例
-

### 基本的な例

この単純な例では、段落にプログラムの出力の例を含めます。

```html
<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>
```

結果の出力は次のようになります。

### ユーザー入力を含むサンプル出力

`<kbd>` 要素を `<samp>` ブロックの中で使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。

#### HTML

```html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
```

なお、`<span>` を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、`<kbd>` を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。

#### CSS

実現したい表示を達成するための CSS は次の通りです。

```css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}
```

これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。

#### 結果

結果の出力は次のようになります。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* 関連要素: `<kbd>`, `<code>`, `<pre>`
* `<output>` 要素: スクリプトが生成した出力のためのコンテナー


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

<hgroup>
========

**`<hgroup>`** は HTML の要素で、見出しとそれに関連する内容を表します。これは 1 つの `<h1>–<h6>` 要素と、1 つ以上の `<p>` 要素をグループ化します。

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

属性
--

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

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

`<hgroup>` 要素は、見出しと副次的な内容（副題や代替タイトル、キャッチフレーズなど）をグループ化することが可能です。これらのコンテンツは、 `<hgroup>` 要素内の `<p>` 要素として表現されます。

`<hgroup>` 要素自体は、ウェブページの文書のアウトラインに影響を与えません。むしろ、 `<hgroup>` 内で許可されている単一の見出しが文書のアウトラインに寄与します。

例
-

```html
<!doctype html>
<title>HTML Standard</title>
<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 July 2022</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id="toc">
    …
  </ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>
```

### 結果

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

現在のところ、 `<hgroup>` 要素に強いアクセシビリティの意味はありません。要素内のコンテンツ（見出しと、任意の段落）は、ブラウザーのアクセシビリティ API によって公開されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 |
 0 個以上の `<p>` と、それに続く 1 個の h1, h2,
 h3, h4,
 h5, h6 と、それに続く 0 個以上の `<p>` |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* 他のセクション関連要素: `<body>`, `<article>`, `<section>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<nav>`, `<header>`, `<footer>`, `<address>`
* HTML5 文書のセクションとアウトライン


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

<meter>: HTML メーター要素
====================

**`<meter>`** は HTML の要素で、既知の範囲内のスカラー値、または小数値を表します。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, ラベル付け可能コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ。ただし他の
 `<meter>` 要素の子孫要素として配置してはならない。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLMeterElement` |

属性
--

他のすべての要素と同様に、この要素にはグローバル属性があります。

`value`

現在の数値。これは指定されている場合、最小値と最大値（`min` 属性と `max` 属性）の間でなければなりません。この `value` 属性が未定義、あるいは不正な値であった場合は、その値は `0` となります。指定されている値が `min` 属性と `max` 属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。

**メモ:** `value` 属性の値が `0` を下限、`1` を上限とするものでない限り、`min` 属性および `max` 属性で `value` 属性の下限および上限を定義しなくてはなりません。

`min`

範囲全体の下限。 `max` 属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は `0` となります。

`max`

範囲全体の上限。 `min` 属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は `1` となります。

`low`

「低」とされる範囲全体の上限値。属性値は、`min` 属性の値より大きく、かつ `high` 属性および `max` 属性の値より小さいものでなくてはなりません (※これらが定義されている場合)。`low` が未定義、もしくはその値が `min` 属性の値より小さい場合、`low` の値は最小値と同じです。

`high`

「高」とされる範囲全体の下限値。属性値は、`max` 属性の値より小さく、かつ `low` 属性や `min` 属性の値より大きいものでなくてはなりません (※これらが定義されている場合)。`high` 属性が未定義、もしくはその値が `max` 属性の値より大きい場合、`high` の値は最大値と同じです。

`optimum`

最適な数値の範囲を表します。`min` 属性と `max` 属性によって定義される範囲内の値でなくてはなりません。 `low` 属性と `high` 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が `min` 属性と `low` 属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザーは optimum の値以下であるかどうかでメーターのバーの色を変更することがあります。

例
-

### シンプルな例

#### HTML

```html
<p>オーブンの温度: <meter min="200" max="500" value="350">350 度</meter></p>
```

#### 結果

Google Chrome での表示結果は以下のようになります。

![Google Chrome における meter 要素のスクリーンショット](/ja/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 「高」の範囲と「低」の範囲の使用例

この例では `min` 属性が省略されています。よって、下限値は `0` となっています。

#### HTML

```html
<p>
  彼は試験で
  <meter low="69" high="80" max="100" value="84">B</meter> を取りました。
</p>
```

#### 結果

Google Chrome では、 meter の結果は次のように見えます。

![Google Chrome における赤いメーター](/ja/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

仕様書
---

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

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

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

関連情報
----

* `<progress>`


<rp>: ルビの代替表示用括弧要素 - HTML: ハイパーテキストマークアップ言語

<rp>: ルビの代替表示用括弧要素
==================

**`<rp>`** は HTML の要素で、`<ruby>` 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの `<rp>` 要素で、注釈の文字列を含む `<rt>` 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。

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

属性
--

この要素にはグローバル属性以外の属性はありません。

使用上のメモ
------

* ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。`<rp>` 要素は `<ruby>` 要素に対応していない場合に使用されます。`<rp>` 要素の内容は、ルビの存在を示すために何を表示すべきか（通常は括弧）を示します。
例
-

### ルビの使用

この例はそれぞれの文字に等価なローマ字を表示するためのにルビを使用しています。

```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

```
body {
  font-size: 22px;
}
```

このブラウザーでは次のように見えます。

それ以外の例は `<ruby>` 要素の記事を参照してください。

### ルビ対応なし

上記の HTML は、ルビの対応が*ない*ブラウザーで表示すると、このように見えるかもしれません。
```

漢 (Kan) 字 (ji)
```

```
body {
  font-size: 22px;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | テキスト |
| タグの省略 |
 要素の直後に `<rt>` または他の
 `<rp>`
 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。
  |
| 許可されている親要素 | `<ruby>` 要素。 `<rp>` 要素は
 `<rt>`
 要素の直前または直後に配置しなければなりません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`


<summary>: 概要明示要素 - HTML: ハイパーテキストマークアップ言語

<summary>: 概要明示要素
=================

**`<summary>`** は HTML の要素で、 `<details>` 要素の折り畳みボックスの要約、キャプション、説明、凡例を表します。 `<summary>` 要素をクリックすると、親の `<details>` 要素の開閉状態を切り替えることができます。

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

属性
--

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

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

`<summary>` 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。

`<summary>` 要素は、 `<details>` 要素の最初の子として*のみ*使用できます。ユーザーが概要をクリックすると、親の `<details>` 要素が開閉し、 `toggle` イベントが `<details>` 要素に送信され、状態が変化したことを知るために使用することができます。

既定のラベルテキスト
----------

`<details>` 要素の最初の子が `<summary>` 要素でない場合、ユーザーエージェントは既定の文字列（ふつうは「詳細」）を折りたたみボックスのラベルとして使用します。

既定のスタイル
-------

HTML 仕様書では、`<summary>` の既定のスタイルに `display: list-item` が含まれています。これで、ラベルの隣に既定で（多くは三角形で）表示される折りたたみウィジェットとして表示されるアイコンを変更したり削除したりすることができます。

スタイルを `display: block` に変更すると、展開用の三角印を削除することができます。

詳しくはブラウザーの互換性の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。

Safari などの Webkit ベースのブラウザーでは、標準外の CSS 擬似要素 `::-webkit-details-marker` によって、アイコンの表示を制御することが可能です。三角形の表示を消すには、 `summary::-webkit-details-marker { display: none }` を使用してください。

例
-

以下に `<summary>` を使用している例をいくつか示します。 `<details>` 要素のドキュメントにもいくつか例があります。

基本的な例
-----

`<details>` 要素の中で `<summary>` の使用を示す簡単な例です。

```html
<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### 結果

見出しとしての概要
---------

次のように、 `<summary>` の中で見出し要素を使用することができます。

```html
<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### 結果

これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。

**警告:** `<summary>` 要素の既定のロールは button（子要素からはすべてのロールを外す）ですので、この例はスクリーンリーダーのような支援技術のユーザーには動作しません。 `<h4>` のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。

概要の中の HTML
----------

この例は、 `<summary>` 要素にいくらか意味を追加して、ラベルを重要であると示します。

```html
<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| 許可されている内容 | 記述コンテンツ。または 見出しコンテンツ のうちひとつの要素 |
| タグの省略 | 不可。開始タグと終了タグの両方が必要。 |
| 許可されている親要素 | `<details>` 要素 |
| 暗黙の ARIA ロール | `button` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<details>`


<col>: 表の列要素 - HTML: ハイパーテキストマークアップ言語

<col>: 表の列要素
============

**`<col>`** は HTML の要素で、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、`<colgroup>` 要素内にみられます。

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

`<col>` では CSS を使用して列にスタイルを設定できますが、列に対して効果があるプロパティは限定されています（CSS 2.1 仕様書をご覧ください）。

属性
--

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

`span`

この属性は正の整数で、 `<col>` 要素がまたがる列の数を示します。存在しない場合、既定値は `1` です。

### 非推奨の属性

以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。

`align`
非推奨

この列挙型属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。

* `left` : 内容物をセルの左側に揃えます。
* `center` : 内容物をセル内で中央揃えにします。
* `right` : 内容物をセルの右側に揃えます。
* `justify`: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。

この属性が設定されていない場合、その値は `<col>` 要素が属する `<colgroup>` 要素の `align` 属性から継承します。それも存在しない場合は、`left` 値であるものとします。

**メモ:** `left`、`center`、`right`、`justify` の値と同じ効果を実現するために、`text-align` プロパティを `<col>` 要素を与えたセレクターに設定しようとしないでください。`<td>` 要素は `<col>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、CSS の `td:nth-child(an+b)` セレクターを使用してください。`a` を 0 に、`b` を表内の列の位置を示す序数にします。例えば `td:nth-child(2) { text-align: right; }` は、2 列目を右揃えにします。

表で `colspan` 属性を使用している場合は、`[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`bgcolor`
非推奨

表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '`#`' が付いた形です。定義済みの色キーワードのうちの一つも使用できます。

同様の効果を得るには、 CSS の `background-color` プロパティを使用してください。

`char`
非推奨

この属性は、列内のセルで揃える文字を設定します。よく使用する値としては、数値や金額を揃えるときのピリオド (.) があります。 `align` 属性が `char` ではない場合は、この属性は無視されます。

`charoff`
非推奨

この属性は、 `char` 属性で指定された揃え文字からその列のデータをオフセットする文字数を示します。

`valign`
非推奨

この属性は、その列のそれぞれのセルの中にある内容物の垂直方向の配置方法を指定します。以下の値が指定可能です。

* `baseline` : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 `bottom` と同じ効果になります。
* `bottom` : テキストを可能な限りセルの下端に近づけて配置します。
* `middle` : テキストをセルの中央部に置きます。
* and `top` : テキストを可能な限りセルの上端に近づけて配置します。

**メモ:** `vertical-align` プロパティを `<col>` 要素を指定したセレクターに設定しようとしないでください。`<td>` 要素は `<col>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、 CSS の `td:nth-child(an+b)` セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ `vertical-align` プロパティを使用することができます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`width`
非推奨

この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である `0*` も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。`5*` のような幅の相対値も使用できます。

例
-

`<table>` ページに `<col>` 要素の使用例があります。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須ですが、終了タグを置いてはいけません。 |
| 許可されている親要素 | `<colgroup>` のみ。ただし開始タグが必須ではないため暗黙的に定義されることがあります。
 `<colgroup>` 要素は `span` 属性を持っていてはいけません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableColElement` |

仕様書
---

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

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

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

関連情報
----

* `<col>` 要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス:
    + 列の幅を制御するための `width` プロパティ
    + 列内のセルの配置を設定するための `:nth-child` 擬似クラス
    + すべてのセル内コンテンツを '.' などの同一文字で揃えるための `text-align` プロパティ


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

<menuitem>
==========

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

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`<menuitem>`** は HTML の要素で、ユーザーがポップアップメニューから呼び出すことができるコマンドを表します。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。

コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義する*インダイレクトコマンド*で明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を `<input type="checkbox">` および `<input type="radio">` 要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。

属性
--

この要素にはグローバル属性があります。特に `title` 属性はコマンドの説明やヒントを出すのに使われます。

`checked`
非推奨

Non-standard

コマンドが選択されているか否かを示す論理属性。`type` 属性が `checkbox` または `radio` のときのみ使われます。

`command`
非推奨

Non-standard

別の要素の ID を指定して、間接的に実行するコマンドを示します。 `checked`, `disabled`, `icon`, `label`, `radiogroup`, `type` 属性も含むメニューアイテムで使用してはいけません。

`default`
非推奨

Non-standard

この論理属性は、メニューのサブジェクト要素 (`button` や `input` など) と同じコマンドを使用することを示します。

`disabled`
非推奨

Non-standard

現在の状態ではコマンドを使用できないことを示す論理属性です。`disabled` は `hidden` とは異なりますので注意してください。`disabled` 属性は、状態の変化によってコマンドが妥当になる状況で適切です。

`icon`
非推奨

Non-standard

コマンドを表す画像を提供するために、画像の URL を指定します。

`label`

ユーザーに表示する、コマンドの名前です。`command` 属性を提供しない場合は必須です。

`radiogroup`
非推奨

Non-standard

この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。`type` 属性が `radio` である場合に限り使用できます。

`type`
非推奨

Non-standard

この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。

* `command`: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。
* `checkbox`: 2 つの異なる状態を切り替えできるコマンドを表します。
* `radio`: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。

例
-

### HTML

```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr />
  <menuitem
 type="command"
 label="This command does nothing"
 icon="favicon-192x192.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem
 type="command"
 label="This command has javascript"
 onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr />
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
```

### CSS

```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし。 |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグが必須で、終了タグはあってはいけません。 |
| 許可されている親要素 | *ポップアップメニュー*状態である `<menu>`
 要素。（`<menu>` 要素の
 `type` 属性を指定する場合は
 `popup` にしなければなりません。属性がない場合は
 `<menu>`
 の親要素自体が*ポップアップメニュー*状態の
 `<menu>` であることが必要です。）
  |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLMenuItemElement` (en-US) |

仕様書
---

現行のどの仕様書にも含まれていません。

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

どのブラウザーでも対応していません。この要素を唯一対応していたブラウザー Firefox は、85 で対応を削除しました。

関連情報
----

* HTML context menus in Firefox (Screencast and Code)


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

<rt>: ルビテキスト要素
==============

**`<rt>`** は HTML の要素で、ルビによる注釈（振り仮名）のルビテキストの部分を指定します。東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 `<rt>` 要素は常に `<ruby>` 要素の中で使用されます。

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

より多くの例については `<ruby>` 要素についての記事を参照してください。

属性
--

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

例
-

### ルビ注釈の使用

この例では、 `<ruby>` 要素内の漢字にローマ字表記を提供します。

```html
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
```

```
body {
  font-size: 22px;
}
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | `<rt>` 要素の直後に `<rt>`
 要素または `<rp>`
 要素がある場合、または親要素内に他のコンテンツがない場合は終了タグを省略可能。
  |
| 許可されている親要素 | `<ruby>` 要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `text-transform: full-size-kana`


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

<acronym>
=========

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

概要
--

**`<acronym>`** は HTML の要素で、頭字語または略語の単語を構成する文字の並びを明示することができます。

**警告:** この要素は使用しないでください。代わりに `<abbr>` 要素を使用してください。

属性
--

この要素には、全ての要素に共通のグローバル属性のみがあります。

DOM インターフェイス
------------

この要素は `HTMLElement` インターフェイスを実装しています。

例
-

```html
<p>
  The <acronym title="World Wide Web">WWW</acronym> is only a component of the
  Internet.
</p>
```

### 結果

既定のスタイル
-------

このタグの目的は単に作者の利便性のためのものであるため、ブラウザーによって既定のスタイルは様々です。

* Opera、Firefox、Chrome などでは、この要素の内容に点線の下線が付きます。
* ブラウザーによっては点線の下線を引くだけでなく、スモールキャップスにします。このスタイルを抑制するには、CSS で `font-variant``: none` などをつけてください。

従って、この要素に明確にスタイルを与えるか、ブラウザー間の違いを気にしないようにするかする必要があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # acronym |

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

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

関連情報
----

* HTML の `<abbr>` 要素


<textarea>: テキストエリア要素 - HTML: ハイパーテキストマークアップ言語

<textarea>: テキストエリア要素
=====================

**`<textarea>`** は HTML の要素で、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。

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

上記の例では `<textarea>` の様々な機能を紹介しています。

* `id` 属性により、アクセシビリティのために `<textarea>` を `<label>` 要素に結びつけることができる
* `name` 属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定している
* `rows` 属性と `cols` 属性により、`<textarea>` が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。
* 既定のコンテンツが開始タグと終了タグの間に入っています。`<textarea>` は `value` 属性に対応していません。

`<textarea>` 要素は他にも、フォームの `<input>` と共通の属性のいくつか、例えば `autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, `required` などを受け付けます。

属性
--

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

`autocomplete`

この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。

* `off`: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。
* `on`: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。

`autocomplete` 属性を `<textarea>` 要素に指定していない場合、ブラウザーは `<textarea>` 要素のフォームオーナーの `autocomplete` 属性の値を使用します。フォームオーナーは当該 `<textarea>` 要素が子孫になっている `<form>` 要素か、textarea 要素の `form` 属性で `id` を指定されている form 要素です。詳しくは、`<form>` 要素の `autocomplete` 属性をご覧ください。

`autocorrect`
Non-standard

文字列で、ユーザーがこの `textarea` を編集しているときに、自動スペルチェックとテキスト置換（設定されている場合）の処理を有効にするかどうかを指定します。許可されている値は以下の通りです。

`on`

自動スペルチェックとテキスト置換を有効にする。

`off`

自動スペルチェックと文字列置換を無効にする。

`autofocus`

この論理属性で、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書内でこの属性を指定することができる要素は、フォーム関連要素のうちのひとつだけです。

`cols`

平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定されなかった場合の既定値は `20` です。

`disabled`

この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば `<fieldset>` 要素から継承します。もし親要素に `disabled` 属性を持つものがなければ、そのコントロールは利用可能です。)

`form`

`<textarea>` 要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、`<textarea>` 要素を form 要素の子要素として配置しなければなりません。この属性により、`<textarea>` 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。

`maxlength`

ユーザーが入力可能な文字 (UTF-16 コード単位) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。

`minlength`

ユーザーが入力しなければならない最小文字数 (UTF-16 コード単位) です。

`name`

コントロールの名前です。

`placeholder`

コントロールに何を入力できるかに関する、ユーザーへの助言です。プレイスホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。

**メモ:** プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた `<label>` 要素の代わりとして使用*しない*でください。全体的な説明は、`<input>` ラベルを参照してください。

`readonly`

これは論理属性で、ユーザーがコントロールの値を変更できないことを示します。`disabled` 属性とは異なり、`readonly` 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。

`required`

この属性は、フォームを送信する前に値を入力しなければならないことを示します。

`rows`

コントロールで見ることが可能なテキストの行数です。指定する場合は、正の整数でなければなりません。指定されなかった場合、既定値は 2 になります。

`spellcheck`

`<textarea>` がブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。

* `true`: 要素でスペルや文法チェックを行う必要があることを示します。
* `default` : 要素は既定の動作、おそらく親要素の `spellcheck` 値によって動作することを示します。
* `false` : 要素でスペルチェックを行うべきではないことを示します。

`wrap`

フォームの送信において、どのように値を折り返すかを制御するかを示します。以下の値を指定可能です。

* `hard`: ブラウザーは自動的に改行 (CR+LF) を挿入し、各行がコントロールの幅より長くならないようにします。有効にするには、`cols` 属性を指定する必要があります。
* `soft`: ブラウザーは、入力された値の改行がすべて `CR+LF` のペアであることを保証しますが、値にそれ以外の改行が追加されることはありません。
* `off`
Non-standard
: `soft` に似ていますが外観を `white-space: pre` に変更しますので、`cols` を超えた部分は折り返されず、水平方向にスクロール可能になります。

この属性を指定しない場合の既定値は `soft` です。

CSS でのスタイル付け
------------

`<textarea>` は置換要素です。ラスター画像のように内在サイズを持っています。既定では、 `display` の値は `inline-block` です。ボックスモデル、フォント、カラースキームが、普通の CSS を使用して簡単に操作できるので、他のフォーム要素と比較して、スタイル付けは比較的容易です。

ウェブフォームへのスタイル設定に、 `<textarea>` をスタイル付けするためのいくつかの有益なコツがあります。

### ベースラインの不整合

HTML 仕様書では、 `<textarea>` のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。 Gecko では `<textarea>` のベースラインを textarea の最初の行のベースラインに設定しています。他のブラウザーは、`<textarea>` のボックスの下端に設定していることもあります。動作を予測できないため、 `vertical-align``: baseline` を使用しないようにしてください。

### テキストエリアの大きさの変更が可能かどうかの制御

多くのブラウザーでは、 `<textarea>` は大きさの変更が可能です。右側の隅にドラッグのためのハンドルがあり、ページ内の要素の大きさを変更するための使用できることが分かるでしょう。これは CSS の `resize` プロパティで制御されます。既定では大きさの変更が有効ですが、 `resize` の値に `none` を使用することで明示的に無効にすることができます。

```css
textarea {
  resize: none;
}
```

### 有効・無効な値のスタイル付け

`<textarea>` の値が有効であるか無効であるかを (例えば `minlength` と `maxlength` の範囲の中に収まっているか外れているか、または `required`)、 `:valid` および `:invalid` 擬似クラスを用いて強調表示することができます。例えば以下のように、中の値が有効か無効かでテキストエリアの境界を異なる表示にすることができます。

```css
textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}
```

例
-

### 基本的な例

以下の例は、行数と列数と既定の内容だけを設定した、とても単純なテキストエリアを表示します。

```html
<textarea name="textarea" rows="10" cols="50">
ここに何か書いてください</textarea
>
```

#### 結果

### "minlength" と "maxlength" を使用した例

この例は文字数の最小値と最大値を、それぞれ 10 と 20 に設定しています。見てみましょう。

```html
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
ここに何か書いてください</textarea
>
```

#### 結果

なお、`minlength` は最小値を超えて入力された文字をユーザーが削除することを阻止しませんので、入力された値により `<textarea>` が無効になることがあります。また、`minlength` の値が (例えば 3 に) 設定されていた場合であっても、`<textarea>` が空欄である場合は `required` 属性が設定されていない限り有効として扱われます。

### "placeholder" の使用

この例はプレイスホルダーを設定します。ボックスに入力を開始した時に消えることを確認して下さい。

```html
<textarea
 name="textarea"
 rows="5"
 cols="30"
 placeholder="コメントのテキスト"></textarea>
```

#### 結果

**メモ:** プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた `<label>` 要素の代わりとして使用*しない*でください。全体的な説明は、ラベルとプレイスホルダーを参照してください。

### 無効と読み取り専用

この例では 2 つの `<textarea>` を示しています。一方は `disabled` であり、もう一方は `readonly` です。両方を試してみて動作の違いを確認してください。 `disabled` の要素はどのような方法でも選択できず (値の送信もされません)、 `readonly` の要素は選択可能で内容をコピーできます (そして値は送信されます)。内容が編集できないだけです。

**メモ:** Chrome など、 Firefox 以外のブラウザーでは、 `disabled` のテキストエリアのコンテンツが選択可能でコピー可能である場合もあります

```html
<textarea name="textarea" rows="5" cols="30" disabled>
disabled のテキストエリアです。</textarea
>
<textarea name="textarea" rows="5" cols="30" readonly>
readonly のテキストエリアです。</textarea
>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ,
 対話型コンテンツ,
 リスト化,
 ラベル付け可能,
 リセット可能,
 サブミット可能,
 フォーム関連
 要素
  |
| 許可されている内容 | テキストのみ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `textbox` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTextAreaElement` |

仕様書
---

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

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

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

関連情報
----

他のフォーム関連要素:

* `<form>`
* `<button>`
* `<datalist>`
* `<legend>`
* `<label>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<input>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`


<option>: HTML 選択肢要素 - HTML: ハイパーテキストマークアップ言語

<option>: HTML 選択肢要素
====================

**`<option>`** は HTML の要素で、`<select>`、`<optgroup>`、`<datalist>` の各要素内で項目を定義するために使われます。したがって、`<option>` は HTML 文書でポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。

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

属性
--

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

`disabled`

この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザーはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先に無効状態の `<optgroup>` 要素がある場合は無効化されます。

`label`

この属性は、選択肢の意味を示すラベル文字列です。`label` 属性を定義していない場合は、要素の文字列コンテンツが要素の値になります。

`selected`

この論理属性を設定すると、その選択肢が初期状態で選択されます。この `<option>` 要素の祖先の `<select>` 要素に `multiple` が設定されていない場合、`<select>` 要素内で `selected` 属性が設定できる `<option>` 要素は 1 つだけです。

`value`

この属性の内容は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると、option 要素の中の文字列が値となります。

CSS でのスタイル設定
------------

**`<option>`** 要素のスタイル設定は非常に制限されています。選択肢は親要素で設定したフォントを継承しません。Firefox では `color` と `background-color` のみが設定可能ですが、Safari では何もプロパティを設定することはできません。スタイル設定についての詳細は、フォームへの高度なスタイル設定のガイドをご覧ください。

例
-

`<select>` 要素の例をご覧ください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | エスケープされた文字（例えば `é`）を含むテキスト |
| タグの省略 |
 開始タグは必須。直後に他の `<option>` 要素または
 `<optgroup>`
 要素がある場合、または親要素が他に内容を持たない場合は終了タグを省略可能。
  |
| 許可されている親要素 | `<select>`
 要素、`<optgroup>`
 要素、`<datalist>` 要素
  |
| 暗黙の ARIA ロール | `option` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLOptionElement` |

仕様書
---

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

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

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

関連情報
----

* 他のフォーム関連要素: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>`, `<meter>`


<dd>: 詳細説明要素 - HTML: ハイパーテキストマークアップ言語

<dd>: 詳細説明要素
============

**`<dd>`** は HTML の要素で、説明リスト要素 (`<dl>`) 内で、その前の用語 (`<dt>`) の説明、定義、値などを示します。

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

属性
--

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

`nowrap`
Non-standard

この属性の値が `yes` とされた場合、定義部分のテキストは改行されません。既定値は `no` です。

例
-

例については、`<dl>` 要素で提供されている例を参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 開始タグは必須。この要素の直後に他の `<dd>` 要素または `<dt>` 要素がある場合、もしくは親要素内で後続する内容物がない場合は、終了タグが省略可能となる。 |
| 許可されている親要素 | `<dl>` 要素または `<dl>` 要素内にある `<div>` 要素。この要素は `<dt>` または他の `<dd>` の後に使うことができます。 |
| 暗黙の ARIA ロール | `definition` (en-US) |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<dl>`
* `<dt>`


<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語

<a>: アンカー要素
===========

**`<a>`** は HTML の要素（*アンカー*要素）で、`href` 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。

`<a>` の内容は、リンク先を示すもの**であるべきです**。`href` 属性が存在する場合、`<a>` 要素にフォーカスがある状態で Enter キーを押すと起動します。

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

属性
--

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

`download`

ブラウザーがリンクされた URL をダウンロードとして扱うようにします。`filename` 値があってもなくても構いません。

* 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。
    + HTTP の `Content-Disposition` ヘッダー
    + URL のパスの最後の部分
    + メディア種別（`Content-Type` ヘッダー、 `data:` URL の先頭、 `blob:` URL の `Blob.type` から）
* 値を定義すると、ファイル名として提案します。 `/` および `\` はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。

**メモ:**

* `download` は同一オリジンの URL と、 `blob:`、 `data:` の各スキームでのみ動作します。
* ブラウザーがダウンロードをどのように扱うかは、ブラウザー、ユーザーの設定、その他の要因によって異なります。ダウンロードを開始する前にユーザーにプロンプトが表示されたり、ファイルが自動的に保存されたり、外部のアプリケーションまたはブラウザー自体で自動的に開いたりすることがあります。
* `Content-Disposition` ヘッダーが `download` とは異なる情報を持っていた場合、動作結果は様々です。
    + ヘッダーが `filename` を指定した場合、そちらが `download` 属性で指定されたファイル名より優先されます。
    + ヘッダーが `inline` の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。Firefox の（82 以前の）古い版では、ヘッダーが優先され、コンテンツがインラインで表示されます。

`href`

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

* ページの節を示すフラグメント URL
* テキストフラグメントで指定されたテキストの部分
* メディアファイルの一部を示すメディアフラグメント
* 電話番号を示す `tel:` URL
* メールアドレスを示す `mailto:` URL
* SMS テキストメッセージを示す `sms:` URL
* ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは `registerProtocolHandler()` を使用することができます。

`hreflang`

リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 `lang` グローバル属性と同じです。

`ping`

空白で区切られた URL のリストです。リンクをたどるとき、ブラウザーは `POST` リクエストを指定された URL に、 `PING` を本文として送信します。通常、トラッキングに使用されます。

`referrerpolicy`

リンクをたどるときにどれだけのリファラーを送信するかです。

* `no-referrer`: `Referer` ヘッダーは送信されません。
* `no-referrer-when-downgrade`: `Referer` ヘッダーはオリジンに TLS (HTTPS) がない場合は送信されません。
* `origin`: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキーム、ホスト名、ポート番号です。
* `origin-when-cross-origin`: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同じオリジン内での移動の場合はパスが含まれます。
* `same-origin`: リファラーは同じオリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。
* `strict-origin`: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。
* `strict-origin-when-cross-origin` (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。
* `unsafe-url`: リファラーにはオリジン*および*パスが含まれます（ただしフラグメント、パスワード、ユーザー名は含まれません）。**この値は安全ではありません**。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。

`rel`

リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。

`target`

リンク先の URL を表示する場所、*閲覧コンテキスト*（タブ、ウィンドウ、`<iframe>`）の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。

* `_self`: 現在の閲覧コンテキストです。（既定値）
* `_blank`: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
* `_parent`: 現在の親の閲覧コンテキストです。親がない場合は、 `_self` と同じ振る舞いをします。
* `_top`: 最上位の閲覧コンテキスト（現在のコンテキストの祖先である "最上位" のコンテキスト）です。親の閲覧コンテキストがない場合は、 `_self` と同じ動作をします。

**メモ:** `target="_blank"` を `<a>` 要素に設定すると、暗黙的に `rel` の動作は `rel="noopener"` が設定されたかのように動作し、 `window.opener` を設定しません。

`type`

リンク先 URL の MIME タイプの形式を表すヒントです。組み込まれている機能はありません。

### 非推奨の属性

`charset`
非推奨

リンク先 URL の文字エンコーディングのヒントでした。

**メモ:** この属性は廃止されており、**ページ作者が使用すべきではありません**。リンク先の URL で HTTP の `Content-Type` ヘッダーを使用してください。

`coords`
非推奨

`shape` 属性とともに使用されます。カンマ区切りの座標のリストです。

`name`
非推奨

ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば `id` 属性と `name` 属性を `<a>` 要素内で同時に使用できました。

**メモ:** 代わりにグローバル属性の `id` を使用してください。

`rev`
非推奨

この属性は、逆方向のリンクを指定します。 `rel` 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。

`shape`
非推奨

イメージマップ内のハイパーリンクの領域の形状です。

**メモ:** イメージマップについては `<area>` 要素を使用してください。

例
-

### 絶対 URL へのリンク

#### HTML

```html
<a href="https://www.mozilla.com">Mozilla</a>
```

#### 結果

### 相対 URL へのリンク

#### HTML

```html
<a href="//example.com">スキーム相対 URL</a>
<a href="/ja/docs/Web/HTML">オリジン相対 URL</a>
<a href="./p">ディレクトリー相対 URL</a>
```

```
a {
  display: block;
  margin-bottom: 0.5em;
}
```

#### 結果

### 同じページの要素へのリンク

```html
<!-- 以下のセクションにリンクする <a> 要素 -->
<p><a href="#Section\_further\_down">下記の見出しまでジャンプ</a></p>

<!-- リンク先の見出し -->
<h2 id="Section\_further\_down">さらに下のセクション</h2>
```

#### 結果

**メモ:** `href="#top"` または空のフラグメント (`href="#"`) を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。

### メールアドレスへのリンク

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 `mailto:` スキームを使用してください。

```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```

#### 結果

件名や本文を含めるなど、`mailto` URL スキームの詳細については、電子メールのリンクまたは RFC 6068 をご覧ください。

### 電話番号へのリンク

```html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
```

#### 結果

`tel:` リンクは端末の能力によって様々な動作をします。

* 携帯電話ではその番号に自動ダイヤルします。
* 多くのオペレーティングシステムには、Skype や FaceTime のように電話をかけるプログラムがあります。
* ウェブサイトは `registerProtocolHandler` によって `web.skype.com` などを用いて電話を掛けることができます。
* 他にも、連絡先の電話番号を保存したり、他の端末へ電話番号を送信したりする動作があります。

`tel` URL スキームについての構文、追加機能、その他の詳細について、詳しくは RFC 3966 をご覧ください。

### download 属性を使用して <canvas> を PNG として保存する

`<canvas>` 要素の内容を画像として保存するには、`href` に JavaScript で生成したキャンバスのデータが入った `data:` URL、`download` 属性にダウンロードする PNG ファイルのファイル名を指定したリンクを作成します。

#### 保存リンクのついた描画アプリ

##### HTML

```html
<p>
  マウスボタンを押しっぱなしにして動かすと描画されます。
  <a href="" download="my\_painting.png">絵をダウンロード</a>
</p>

<canvas width="300" height="300"></canvas>
```

##### CSS

```css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
```

##### JavaScript

```js
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI \* 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
```

##### 結果

セキュリティとプライバシー
-------------

`<a>` 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については `Referer` ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

`target="_blank"` を `rel="noreferrer"` や `rel="noopener"` なしで使用すると、ウェブサイトが `window.opener` API 搾取攻撃を受けやすくなりますが、新しい版のブラウザーでは `target="_blank"` を設定すると、`rel="noopener"` と同じ保護が提供されます。詳しくはブラウザーの互換性を参照してください。

アクセシビリティ
--------

### 強力なリンクテキスト

リンクの内容は、文脈から外れたとしても、**リンクの行き先を示すべきです**。

#### アクセシビリティに対応していない貧弱なリンクテキスト

よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。

```html
<p>私たちの製品については<a href="/products">こちら</a>をご覧ください。</p>
```

##### 結果

#### 強力なリンクテキスト

幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。

```html
<p><a href="/products">私たちの製品について</a>、詳しくご覧ください。</p>
```

##### 結果

支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。

### onclick イベント

よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、`href` を `#` または `javascript:void(0)` に設定してページの再読み込みを防ぎ、`click` を待ち受けするようにするというものがあります。

これらの偽の `href` 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。

代わりに `<button>` を使用してください。通常、**アンカーは適切な URL を使用して移動するためだけに使用するべきです**。

### 外部リンクおよび HTML 以外のリソースへのリンク

リンクを新しいタブやウィンドウで開くために `target="_blank"` を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。

弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。

#### 新しいタブやウィンドウを開くリンク

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia (新しいウィンドウで開きます)
</a>
```

##### 結果

#### HTML 以外のリソースへのリンク

```html
<a href="2017-annual-report.ppt">2017 年次レポート (PowerPoint)</a>
```

リンクの動作を示すためにアイコンを使用する場合は、alt テキストを確実に入れてください。

```html
<a target="\_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(新しいタブで開く)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 年次レポート
  <img alt="(PowerPoint ファイル)" src="ppt-icon.svg" />
</a>
```

##### 結果

* WebAIM: Links and Hypertext - Hypertext Links
* MDN / WCAG を理解する、ガイドライン 3.2
* G200: Opening new windows and tabs from a link only when necessary
* G201: Giving users advanced warning when opening a new window
### スキップリンク

**スキップリンク**は `<body>` コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。

```html
<body>
  <a href="#content" class="skip-link">メインコンテンツへスキップ</a>

  <header>…</header>

  <!-- スキップリンクがたどり着く位置 -->
  <main id="content"></main>
</body>
```

```css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}
```

#### 結果

スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。

スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。

* WebAIM: "Skip Navigation" Links
* How-to: Use Skip Navigation links
* MDN / WCAG を理解する ― ガイドライン 2.4 の解説
* Understanding Success Criterion 2.4.1
### 大きさと近接性

#### 大きさ

リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。少なくとも 44×44 CSS ピクセルの大きさであることが推奨されています。

散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。

* Understanding Success Criterion 2.5.5: Target Size
* Target Size and 2.5.5
* Quick test: Large touch targets

#### 近接性

リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。

間隔は `margin` などの CSS プロパティを使用して作成することができます。

* Hand tremors and the giant-button-problem
技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、
 記述コンテンツ、
 対話型コンテンツ、知覚可能コンテンツ。
  |
| 許可されている内容 | 透過的コンテンツ、ただし子孫に
 対話型コンテンツ または
 a 要素をがないもの、および
 tabindex 属性が指定された子孫がないもの。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素、ただし他の `<a>` 要素でないもの。 |
| 暗黙の ARIA ロール | `link` （`href` 属性がある場合）、
 それ以外は
 `generic` (en-US) |
| 許可されている ARIA ロール | `href` 属性がある場合* `button`
* `checkbox`
* `menuitem` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option`
* `radio`
* `switch`
* `tab`
* `treeitem` (en-US)

`href` 属性がない場合* すべて
 |
| DOM インターフェイス | `HTMLAnchorElement` |

仕様書
---

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

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

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

関連情報
----

* `<link>` は `<a>` と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。
* `:link` は CSS の擬似クラスで、 `<a>` 要素に有効な `href` 属性がついている場合に一致します。
* `:visited` は CSS の擬似クラスで、`<a>` 要素の `href` 属性が、過去にユーザーが訪問したことのある URL である場合に一致します。
* `:any-link` は CSS の擬似クラスで、`<a>` 要素に `href` 属性がある場合に一致します。
* テキストフラグメントは、URL に追加するユーザーエージェント指示で、コンテンツ作成者が ID を使用せずに、ページ上の固有のテキストにリンクすることを可能にするものです。


<time>: （日付）時刻要素 - HTML: ハイパーテキストマークアップ言語

<time>: （日付）時刻要素
================

**`<time>`** は HTML の要素で、特定の時の区間を表します。`datetime` 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

次のうちの一つを表します。

* 24 時間制の時刻
* グレゴリオ暦の正確な日付 (時刻やタイムゾーンを伴うことも可能)
* 有効な期間
試してみましょう
--------

属性
--

他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。

`datetime`

この属性は要素の日付や時刻を表し、下記に示す書式のうちの一つでなければなりません。

使用上のメモ
------

この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。

この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません（日付の計算で混乱するため）。

*datetime 値*（機械可読な日時の値）は要素の `datetime` 属性の値であり、正しい書式（下記参照）でなければなりません。要素に `datetime` 属性がない場合、**子孫要素を持ってはならず**、 *datetime 値* は要素のテキストの内容になります。

### 有効な datetime 値

有効な年の文字列

`2011`

有効な月の文字列

`2011-11`

有効な日付の文字列

`2011-11-18`

年のない有効な日付の文字列

`11-18`

有効な週の文字列

`2011-W47`

有効な時刻の文字列

`14:54`

`14:54:39`

`14:54:39.929`

有効なローカル日時の文字列

`2011-11-18T14:54:39.929`

`2011-11-18 14:54:39.929`

有効なグローバル日時の文字列

`2011-11-18T14:54:39.929Z`

`2011-11-18T14:54:39.929-0400`

`2011-11-18T14:54:39.929-04:00`

`2011-11-18 14:54:39.929Z`

`2011-11-18 14:54:39.929-0400`

`2011-11-18 14:54:39.929-04:00`

有効な期間の文字列

`PT4H18M3S`

例
-

### 単純な例

#### HTML

```html
<p>
  コンサートは <time datetime="2018-07-07T20:00:00">20:00</time> に始まります。
</p>
```

#### 結果

### `datetime` の例

#### HTML

```html
<p>
  コンサートは
  <time datetime="2001-05-15T19:00">5 月 15 日</time>に開催されます。
</p>
```

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<data>` 要素では、他の種類の値を示すことが可能です。


<colgroup>: 表の列グループ要素 - HTML: ハイパーテキストマークアップ言語

<colgroup>: 表の列グループ要素
=====================

**`<colgroup>`** は HTML の要素で、表内の列のグループを定義します。

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

属性
--

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

`span`

この属性は正の整数で、`<colgroup>` 要素がまたがる列の数を示します。存在しない場合の既定値は `1` です。

`span` 属性は、1 つ以上の `<col>` 要素が `<colgroup>` の中にある場合は許可されません。

### 非推奨の属性

以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。

`align`
非推奨

この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。

* `left` : 内容物をセルの左側に揃えます。
* `center` : 内容物をセル内で中央揃えにします。
* `right` : 内容物をセルの右側に揃えます。
* `justify`: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
* `char` : テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は `char` 属性および `charoff` 属性で定義します。

この属性が設定されていない場合は、`left` 値であるものとします。子孫の `<col>` 要素は自身の `align` 属性を使用して、この値を上書きできます。

**メモ:** `text-align` プロパティを、 `<colgroup>` 要素を与えたセレクターに設定しようとしてはいけません。 `<td>` 要素は `<colgroup>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、列ごとに 1 つずつ `td:nth-child(an+b)` CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ `text-align` プロパティが使用できます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`bgcolor`
非推奨

表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '`#`' が付いた形です。定義済みの色キーワードの一つも使用できます。

同様の効果を得るには、 CSS の `background-color` プロパティを使用してください。

`char`
非推奨

この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 `align` が `char` に設定されていない場合、この属性は無視されますが、この列グループのメンバーである `<col>` の `align` の既定値として使用されます。

`charoff`
非推奨

この属性は、`char` 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

`valign`
非推奨

この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。

* `baseline` : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の ベースライン に揃えます。文字がサイズ全体に渡る場合は、`bottom` と同じ効果になります。
* `bottom` : テキストを可能な限りセルの下端に近づけて配置します。
* `middle` : テキストをセルの中央部に置きます。
* and `top` : テキストを可能な限りセルの上端に近づけて配置します。

**メモ:** `vertical-align` プロパティを、 `<colgroup>` 要素を与えたセレクターに設定しようとしてはいけません。`<td>` 要素は `<colgroup>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、`td:nth-child(an+b)` CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ `vertical-align` プロパティを使用できます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

例
-

`<colgroup>` 要素の使用例については、`<table>` 要素のページを参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | `span` 属性が存在する場合:
 なし。この属性がない場合: 0 個以上の `<col>` 要素。
  |
| タグの省略 |
 最初の子要素が `<col>`
 要素であり、かつ終了タグを省略した `<colgroup>`
 要素が前にない場合は、開始タグを省略できます。空白またはコメントが後にない場合は、終了タグを省略できます。
  |
| 許可されている親要素 | `<table>`
 要素。`<colgroup>` は省略可能な
 `<caption>` 要素より後、かつ
 `<thead>`, `<th>`,
 `<tbody>`, `<tfoot>`,
 `<tr>` の各要素より前に置かなければなりません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableColElement` |

仕様書
---

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

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

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

関連情報
----

* `<col>` 要素のスタイル付けに特に便利な CSS プロパティおよび擬似クラス:
    + 列の幅を制御するための `width` プロパティ
    + 列内のセルの配置を設定するための `:nth-child` 擬似クラス
    + すべてのセル内コンテンツを '.' などの同一文字で揃えるための `text-align` プロパティ