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

<table>: 表要素
============

**`<table>`** は HTML の要素で、表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ |
| 許可されている内容 | 以下の順となる。
 1. 任意の 1 個の `<caption>` 要素
2. 0 個以上の `<colgroup>` 要素
3. 任意の 1 個の `<thead>` 要素
4. 次の 2 つの選択肢から 1 つ:
    * 0 個以上の `<tbody>` 要素
    * 1 個以上の `<tr>` 要素
5. 任意の 1 個の `<tfoot>` 要素
 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | `table` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableElement` |

属性
--

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

### 非推奨の属性

`align`
非推奨

この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取ります。

* `left`: 表が文書の左端に表示される
* `center`: 表が文書の中央に表示される
* `right`: 表が文書の右端に表示される

`margin-left` および `margin-right` を設定すると、align 属性に似た効果を得ることができます。

* `left`: `margin-right: auto; margin-left: 0;`
* `center`: `margin-right: auto; margin-left: auto;`
* `right`: `margin-right: 0; margin-left: auto;`

`bgcolor`
非推奨

表の背景色です。値は 6 桁の 16 進 RGB コードで、その前に「`#`」が付きます。定義済みの色キーワードのうちの 1 つを使用することもできます。

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

`border`
非推奨

この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは `frame` 属性が void に設定されることを意味します。

同様の効果を得るには、 `border` 一括指定プロパティを使用してください。

`cellpadding`
非推奨

この属性は、セルの内容と境界線の間の空間を、表示・非表示を問わず定義します。 cellpadding の長さがピクセル数で定義されたのであれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。長さがパーセント値を用いて定義された場合は、内容は中央に配置され、垂直方向（上下）の余白の合計値がこの値で表されます。水平方向 (左右) の余白の合計も同じことが言えます。

同様の効果を得るには、 `border-collapse` プロパティを `<table>` 要素に適用し、値を collapse に設定した上で、 `padding` プロパティを `<td>` 要素に使用してください。

`cellspacing`
非推奨

この属性は、2 つのセルの間の空間の寸法を、パーセント値またはピクセル値で定義します。この属性は水平方向と垂直方向の両方に適用され、表の上端と最初の行におけるセルの間、表の左端と最初の列の間、表の右端と最後の列の間、表の下端と最後の行の間に適用されます。

同様の効果を得るには、`border-spacing` プロパティを `<table>` 要素に適用してください。`border-spacing` は、 `border-collapse` が collapse に設定されていると何の効果もありません。

`frame`
非推奨

これは列挙型の属性で、表を囲む枠線のどの方向が表示されなければならないかを定義します。

同様の効果を得るには、 `border-style` および `border-width` プロパティを使用してください。

`rules`
非推奨

これは列挙型の属性で、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。

* none は、罫線を表示しないことを示します。既定値です。
* `groups` は、 `<thead>`, `<tbody>`, `<tfoot>` の各要素によって定義される行グループと、 `<col>` や `<colgroup>` 要素によって定義される列グループの間にのみ、罫線を表示します。
* `rows` は、行の間の罫線を表示します。
* `columns` は、列の間の罫線を表示します。
* `all` は、行と列の間の罫線が表示されます。

同様の効果を得るには、`border` プロパティを `<thead>`, `<tbody>`, `<tfoot>`, `<col>`, `<colgroup>` のうち適切な要素に適用してください。

`summary`
非推奨

この属性は、表の内容の概要を示す代替テキストを定義します。代わりに `<caption>` 要素を使用してください。

`width`
非推奨

この属性は表の幅を定義します。代わりに CSS の `width` プロパティを使用してください。

例
-

### シンプルな表

```html
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
```

#### 結果

### その他のシンプルな表

```html
<p>ヘッダーのあるシンプルな表</p>
<table>
  <tr>
    <th>名</th>
    <th>姓</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>thead、tfoot、tbody のある表</p>
<table>
  <thead>
    <tr>
      <th>ヘッダー 1</th>
      <th>ヘッダー 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>本体 1</td>
      <td>本体 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター 1</td>
      <td>フッター 2</td>
    </tr>
  </tfoot>
</table>

<p>colgroup のある表</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>国</th>
    <th>首都</th>
    <th>人口</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>アメリカ合衆国</td>
    <td>ワシントン D.C.</td>
    <td>3 億 9 百万人</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>スウェーデン</td>
    <td>ストックホルム</td>
    <td>9 百万人</td>
    <td>スウェーデン語</td>
  </tr>
</table>

<p>colgroup と col のある表</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>キャプションのあるシンプルな表</p>
<table>
  <caption>
    素晴らしいキャプション
  </caption>
  <tr>
    <td>素晴らしいデータ</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}
```

#### 結果

### 表のソート

#### 表の行のソート

HTML の表の行（`<tr>` 要素）をソートするネイティブの方法はありません。しかし、`Array.prototype.slice()`, `Array.prototype.sort()`, `Node.removeChild()`, `Node.appendChild()` を使用して、独自の `sort()` 関数を実装し、`<tr>` 要素の `HTMLCollection` をソートすることができます。

次の例では、このような例を見ることができます。これを <tbody> 要素に実装し、表のセルを値の昇順にソートし、それに合わせて表示を更新します。

##### HTML

```html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
```

##### 結果

#### th 要素をクリックすることによるソート

次の例では、 `document` にあるすべての `<table>` 要素のすべての `<th>` 要素にイベントハンドラーを追加しています。 `<tbody>` のすべての行を、行に含まれる `td` セルに基づいてソートします。

**メモ:** この方法では、 `<td>` 要素が子孫要素のない生のテキストで作成されていることを想定しています。

##### HTML

```html
<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}
```

##### 結果

### 巨大な表を小さな空間に表示

ウェブ上の表でよくある問題は、コンテンツの量が多い場合、小さな画面ではネイティブにはあまりうまく動作しないこと、スクロール可能にする方法が明らかではないことです。特にマークアップが CDN からくると、ラッパーを持つように変更することができません。

この例では、小さな空間に表を表示する方法の一つを紹介しています。HTML の内容は非常に大きいので非表示にしていますが、特に目立ったものはありません。この例では CSS の方が検査に便利です。
```

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> equals:
      <th>2<sup>3</sup> equals:
      <th>3<sup>3</sup> equals:
      <th>4<sup>3</sup> equals:
      <th>5<sup>3</sup> equals:
      <th>6<sup>3</sup> equals:
      <th>7<sup>3</sup> equals:
  <tbody>
    <tr>
      <td>row 1: 1
      <td>row 1: 8
      <td>row 1: 27
      <td>row 1: 64
      <td>row 1: 125
      <td>row 1: 216
      <td>row 1: 343
    <tr>
      <td>row 2: 1
      <td>row 2: 8
      <td>row 2: 27
      <td>row 2: 64
      <td>row 2: 125
      <td>row 2: 216
      <td>row 2: 343
    <tr>
      <td>row 3: 1
      <td>row 3: 8
      <td>row 3: 27
      <td>row 3: 64
      <td>row 3: 125
      <td>row 3: 216
      <td>row 3: 343
    <tr>
      <td>row 4: 1
      <td>row 4: 8
      <td>row 4: 27
      <td>row 4: 64
      <td>row 4: 125
      <td>row 4: 216
      <td>row 4: 343
    <tr>
      <td>row 5: 1
      <td>row 5: 8
      <td>row 5: 27
      <td>row 5: 64
      <td>row 5: 125
      <td>row 5: 216
      <td>row 5: 343
    <tr>
      <td>row 6: 1
      <td>row 6: 8
      <td>row 6: 27
      <td>row 6: 64
      <td>row 6: 125
      <td>row 6: 216
      <td>row 6: 343
    <tr>
      <td>row 7: 1
      <td>row 7: 8
      <td>row 7: 27
      <td>row 7: 64
      <td>row 7: 125
      <td>row 7: 216
      <td>row 7: 343
    <tr>
      <td>row 8: 1
      <td>row 8: 8
      <td>row 8: 27
      <td>row 8: 64
      <td>row 8: 125
      <td>row 8: 216
      <td>row 8: 343
    <tr>
      <td>row 9: 1
      <td>row 9: 8
      <td>row 9: 27
      <td>row 9: 64
      <td>row 9: 125
      <td>row 9: 216
      <td>row 9: 343
    <tr>
      <td>row 10: 1
      <td>row 10: 8
      <td>row 10: 27
      <td>row 10: 64
      <td>row 10: 125
      <td>row 10: 216
      <td>row 10: 343
    <tr>
      <td>row 11: 1
      <td>row 11: 8
      <td>row 11: 27
      <td>row 11: 64
      <td>row 11: 125
      <td>row 11: 216
      <td>row 11: 343
    <tr>
      <td>row 12: 1
      <td>row 12: 8
      <td>row 12: 27
      <td>row 12: 64
      <td>row 12: 125
      <td>row 12: 216
      <td>row 12: 343
    <tr>
      <td>row 13: 1
      <td>row 13: 8
      <td>row 13: 27
      <td>row 13: 64
      <td>row 13: 125
      <td>row 13: 216
      <td>row 13: 343
    <tr>
      <td>row 14: 1
      <td>row 14: 8
      <td>row 14: 27
      <td>row 14: 64
      <td>row 14: 125
      <td>row 14: 216
      <td>row 14: 343
    <tr>
      <td>row 15: 1
      <td>row 15: 8
      <td>row 15: 27
      <td>row 15: 64
      <td>row 15: 125
      <td>row 15: 216
      <td>row 15: 343
    <tr>
      <td>row 16: 1
      <td>row 16: 8
      <td>row 16: 27
      <td>row 16: 64
      <td>row 16: 125
      <td>row 16: 216
      <td>row 16: 343
    <tr>
      <td>row 17: 1
      <td>row 17: 8
      <td>row 17: 27
      <td>row 17: 64
      <td>row 17: 125
      <td>row 17: 216
      <td>row 17: 343
    <tr>
      <td>row 18: 1
      <td>row 18: 8
      <td>row 18: 27
      <td>row 18: 64
      <td>row 18: 125
      <td>row 18: 216
      <td>row 18: 343
    <tr>
      <td>row 19: 1
      <td>row 19: 8
      <td>row 19: 27
      <td>row 19: 64
      <td>row 19: 125
      <td>row 19: 216
      <td>row 19: 343
    <tr>
      <td>row 20: 1
      <td>row 20: 8
      <td>row 20: 27
      <td>row 20: 64
      <td>row 20: 125
      <td>row 20: 216
      <td>row 20: 343
</table>
```

これらのスタイルを見ると、表の `display` プロパティが `block` に設定されていることに気づくでしょう。これによりスクロールが可能になりますが、テーブルはその完全性の一部を失い、テーブルのセルが可能な限り小さくなろうとします。この問題を軽減するために、`<tbody>` の `white-space` を `nowrap`に設定しました。しかし、`<thead>` ではこれを行わないようにしています。これは、長いタイトルで列がデータを表示するために必要以上に広くなるのを避けるためです。

下にスクロールしている間、表のヘッダーをページ上に保持するために、 `position` を `<th>` 要素の上で粘着するように設定しました。 `border-collapse` を `collapse` に設定して **いない**ことに注意してください。

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

table {
  width: 100%;
  max-width: 400px;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}
```

#### 結果

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

### キャプション

`<caption>` 要素は明確かつ簡潔に表の目的を示すことに価値があるため、これを提供することで、表の残りの部分を読む必要があるか、飛ばすかを判断するのに役立ちます。

これはスクリーンリーダーのような支援技術を利用して操作している人、弱視の人、認知問題を抱えた人にとって役立ちます。

* MDN <caption> を用いて表にタイトルをつける
* Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials
### 行と列のスコープ付け

ヘッダー要素の `scope` 属性は、単純な内容の場合はスコープが推測できるので冗長になります。しかし、支援技術によっては正しく推測することに失敗する事があるため、ヘッダーにスコープを設定すると使い勝手が向上することがあります。複雑な表では、スコープを指定するとセルとヘッダーの関係に関する必要な情報を提供することができます。

#### 例

```html
<table>
  <caption>
    Color names and values
  </caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsl(180 90% 64% / 1)</code></td>
      <td><code>rgb(81 246 246 / 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsl(38 90% 65% / 1)</code></td>
      <td><code>rgba(246 188 87 / 1)</code></td>
    </tr>
  </tbody>
</table>
```

##### 結果

`<th>` 要素に `scope="col"` を宣言すると、セルが列の一番上にあることを記述するのに役立ちます。 `<th>` 要素に `scope="row"` を宣言すると、セルが行の最初の列であることを記述するのに役立ちます。

* MDN 視覚障碍者向けの表
* Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials
* Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials
* H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0
### 複雑な表

スクリーンリーダーのような支援技術は、ヘッダーのセルを厳密に水平または垂直方向に関連付けすることができない表を解析するのが困難な場合があります。これはつまり、 `colspan` に `rowspan` 属性がある場合のことです。

できれば、テーブルの内容を表現するための別な方法、例えばより小さい表の集合に分解するなどで、 `colspan` および `rowspan` 属性に依存する必要がないようにすることを考慮してください。これは支援技術を使用している人が表の内容を理解しやすくするのに加えて、表のレイアウトの関連を理解することが難しい認識障碍を持った人にも利益になります。

表を分割することができないのであれば、 `id` および `headers` 属性の組み合わせを用いて、表のセルとそのセルに関連したヘッダーをプログラム的に結び付けてください。

* MDN 視覚障碍者向けの表
* Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials
* H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0
仕様書
---

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

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

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

関連情報
----

* HTML データ表のチュートリアル
* `<table>` 要素をスタイルするのに特に役に立つであろう CSS の プロパティ:
    + `width`: 表の幅を定義
    + `border`, `border-style`, `border-color`, `border-width`, `border-collapse`, `border-spacing`: セルの境界線、罫線、枠線の外観を制御
    + `margin` および `padding`: 個別のセルの内容を整形
    + `text-align` および `vertical-align`: 文字列やセルの内容の配置


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

<footer>
========

**`<footer>`** は HTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著者に関する情報、関連文書へのリンク、著作権情報等を含めます。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。ただし、子孫に他の `<footer>` や
 `<header>` がないもの。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、
 `<address>`, `<header>`,
 他の `<footer>` の子孫要素として配置してはならない。
  |
| 暗黙の ARIA ロール | contentinfo、ただし article,
 aside,
 main,
 nav,
 section
 のいずれかの要素、または
 `role=article`,
 complementary, main,
 navigation,
 region
 がある要素の子である場合は対応するロールなし |
| 許可されている ARIA ロール | `group`, `presentation`,
 `none` (en-US) |
| DOM インターフェイス | `HTMLElement` |

属性
--

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

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

* セクションの著者や編集者の連絡先情報は、多くの場合 `<footer>` 要素内に `<address>` 要素として配置します。
* 区分コンテンツや区分化ルート要素の最も近い祖先が本体要素の場合、フッターはページ全体に適用されます。
* `<footer>` 要素は区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。
例
-

```html
<body>
  <h3>FIFA World Cup top goalscorers</h3>
  <ol>
    <li>Miroslav Klose, 16</li>
    <li>Ronaldo Nazário, 15</li>
    <li>Gerd Müller, 14</li>
  </ol>

  <footer>
    <small>
      Copyright © 2023 Football History Archives. All Rights Reserved.
    </small>
  </footer>
</body>
```

```css
footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}
```

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

Safari 13 のリリース以前は、 `contentinfo` のランドマークロールが VoiceOver によって適切に公開されていませんでした。古い Safari ブラウザーに対応する必要がある場合は、 `role="contentinfo"` を `footer` 要素に追加して、ランドマークが適切に表示されるようにしてください。

* 関連記事: WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't
仕様書
---

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

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

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

関連情報
----

* 他のセクション関連要素: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<section>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Contentinfo ロール


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

<data>: データ要素
=============

**`<data>`** は HTML の要素で、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、`<time>` 要素を使用する必要があります。

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

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

属性
--

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

`value`

この属性は要素の内容を機械可読な形式で指定します。

例
-

以下の例は商品名を表示しますが、それぞれの商品名に商品番号も結びつけます。

```html
<p>新製品</p>
<ul>
  <li><data value="398">ミニケチャップ</data></li>
  <li><data value="399">ジャンボケチャップ</data></li>
  <li><data value="400">メガジャンボケチャップ</data></li>
</ul>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* HTML の `<time>` 要素


<head>: 文書メタデータ（ヘッダー）要素 - HTML: ハイパーテキストマークアップ言語

<head>: 文書メタデータ（ヘッダー）要素
=======================

**`<head>`** は HTML の要素で、文書に関する機械可読な情報（メタデータ）、たとえば題名、スクリプト、スタイルシートなどを含みます。

**メモ:** `<head>` は主に人間が読むためのものではなく、機械処理のための情報を保持するためのものです。人間が読むための情報、例えば最上位の見出しや著者の掲載のためのものは、 `<header>` 要素を参照してください。

属性
--

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

`profile`
非推奨

Non-standard

1 つ以上のメタデータプロファイルの URI で、ホワイトスペース区切りです。

例
-

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document title</title>
  </head>
</html>
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 |
 文書が `<iframe>` の
 `srcdoc`
 文書である場合、または題名情報がより上位のプロトコル（HTML メールの件名の行など）で使用される場合は、0 個以上のメタデータコンテンツ。

他の場合は正確に 1 つの `<title>` 要素を含む、1 つ以上のメタデータコンテンツ。 |
| タグの省略 | この `<head>` 要素内で最初に存在するものが要素である場合、開始タグを省略可能。`<head>` 要素に続く最初のものが空白文字やコメントでない場合、終了タグが省略可能。 |
| 許可されている親要素 | `<html>` 要素の最初の子要素として配置可能。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLHeadElement` |

仕様書
---

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

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

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

関連情報
----

* `<head>` の中で使用することができる要素:
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`


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

<ruby>: ルビ注釈要素
==============

**`<ruby>`** は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。

*ルビ*という言葉は写植者が使用した長さの単位に由来しており、読みやすさ保ったままテキストを新聞用紙に印刷できる最小のサイズを表します。

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

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

属性
--

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

例
-

### 例 1: 文字ごと

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

#### 結果

### 例 2: 熟語

```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


<th>: 表見出し要素 - HTML: ハイパーテキストマークアップ言語

<th>: 表見出し要素
============

**`<th>`** は HTML の要素で、表のセルのグループ用の見出しであるセルを定義します。このグループの正確な性質は、`scope` 属性と `headers` 属性で定義します。

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

属性
--

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

`abbr`

この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。

`colspan`

この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は `1` です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。

`headers`

この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる `<th>` 要素の **id** 属性と対応します。

`rowspan`

この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。既定値は `1` です。`0` を設定した場合は、セルが属する表セクション (`<thead>`, `<tbody>`, `<tfoot>`, 暗黙的に定義されたものも含む) の終端まで拡張します。 65534 より大きな値は、 65534 に切り詰めます。

`scope`

これは列挙型の属性で、この (`<th>` で定義されている) 見出し要素が関連するセルを定義します。次の値を取ることができます。

* `row`: この見出しはその行に属するすべてのセルに関連します。
* `col`: この見出しはその列に属するすべてのセルに関連します。
* `rowgroup`: この見出しは行グループに属し、その中のすべてのセルに関連します。
* `colgroup`: この見出しは列グループに属し、その中のすべてのセルに関連します。

もし `scope` 属性が指定されていないか、その値が `row`, `col`, `rowgroup`, `colgroup` でない場合は、ブラウザーは自動的に見出しセルが適用されるセルの集合を選択します。

### 非推奨の属性

`align`
非推奨

この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。

* `left`: 中身をセルの左側に揃えます。
* `center`: 中身をセル内で中央揃えにします。
* `right`: 中身をセルの右側に揃えます。
* `justify`（テキストのみ）: セルの中で幅が全体にわたるように、中身が引き延ばされます。
* `char`（テキストのみ）: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は `char` 属性および `charoff` 属性で定義します。

この属性を設定しない場合は、値が `left` であるとみなされます。

**メモ:** この属性は最新の標準仕様で廃止されたため、使用しないでください。

* `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の `text-align` プロパティを使用してください。
* `char` の値と同様の効果を得るには、 `text-align` プロパティに `char` で使用する値と同じものを指定してください。

`axis`
非推奨

この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの `id` です。

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに `scope` 属性を使用してください。

`bgcolor`
非推奨

この属性は、列の各セルの背景色を定義します。値は sRGB で定義された 6 桁の 16 進数値のいずれかで、先頭に '#' を付加します。

`char`
非推奨

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

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で同じ効果を得るには、 `text-align` プロパティの最初の値としてその文字を設定することができます。

`charoff`
非推奨

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

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。

`height`
非推奨

この属性はセルの高さの推奨値を定義するために使用されます。

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の `height` プロパティを使用してください。

`valign`
非推奨

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

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

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

`width`
非推奨

この属性は、セルの推奨する幅を定義します。 `cellspacing` および `cellpadding` プロパティで追加のスペースを追加し、また `<col>` の幅も影響を与えます。通常、列の幅が特定のセルを正常に表示できないほど狭く、またそのようなセルが存在する場合は、表示する際に幅を広げるでしょう。

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の `width` プロパティを使用してください。

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし。 |
| 許可されている内容 | フローコンテンツ、ただしヘッダー、フッター、区分コンテンツ、見出しコンテンツを除く。 |
| タグの省略 | 開始タグは必須です。直後に `<th>` 要素または `<td>` 要素がある場合、または親要素内で以降のデータがない場合は終了タグを省略可能。 |
| 許可されている親要素 | `<tr>` 要素 |
| 暗黙の ARIA ロール | `columnheader` (en-US) または `rowheader` (en-US) |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableCellElement` |

仕様書
---

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

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

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

関連情報
----

* 他の表関連 HTML 要素: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>`, `<tfoot>`, `<thead>`, `<tr>`


<b>: 注目付け要素 - HTML: ハイパーテキストマークアップ言語

<b>: 注目付け要素
===========

**`<b>`** は HTML の要素で、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 `<b>` を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の `font-weight` プロパティを使用し、特別な重要性を持つテキストを示すには `<strong>` 要素を使用してください。

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

属性
--

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

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

* `<b>` は要約に現れるキーワード、レビュー文内での製品名、または、その他の表記上太字で記述される通例のある箇所（但し、特別な重要性を持たない部分）に使用してください。
* `<b>` 要素を `<strong>`, `<em>`, `<mark>` 要素と混同しないでください。 `<strong>` は特定の*重要性*を持った文字列を表し、 `<em>` はテキストを軽く強調し、 `<mark>` は特定の*関連性*を持った文字列を表します。`<b>` はそのような特別な意味を持ちません。他の要素が持つ意味合いに合わないときのみ使用してください。
* 同様に、`<b>` 要素でタイトルや見出しをマークしないでください。この用途では h1 から h6 タグを使用てください。さらに、スタイルシートでこれらの要素の既定のスタイルを変更できるので、これらの要素は太字で表示される*とは限りません*。
* 必要に応じて追加的な意味情報を伝える目的で `<b>` 要素に `class` 属性を使用することはよい使用法です（例えば、段落の最初の文に `<b class="lead">` を設定するなど）。これによって、 `<b>` の様々な使用法が管理しやすくなり、スタイル上の変更が必要になった時、 HTML における使用方法を変更する必要がなくなります。
* 歴史的に `<b>` 要素は太字の文字列を作るためのものでしたが、 HTML4 でスタイル情報が非推奨になったので `<b>` 要素の意味が変更されました。
* `<b>` 要素の使用に意味上の目的がない場合は、文字列を太字にするために代わりに CSS の `font-weight` プロパティの値を `"bold"` に設定してください。
例
-

```html
<p>
  This article describes several <b class="keywords">text-level</b> elements. It
  explains their usage in an <b class="keywords">HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b>element, likely in bold.</b>
```

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* その他のテキストレベル意味付け要素: `<a>`, `<em>`, `<strong>`, `<small>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<i>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`
* Using <b> and <i> elements (W3C)


<input type="search"> - HTML: ハイパーテキストマークアップ言語

<input type="search">
=====================

`<input>` 要素の **`search`** 型は、ユーザーが検索クエリを入力するために設計されたテキスト入力欄です。 `text` 入力欄と機能的には同じですが、ユーザーエージェントは別なスタイルを適用するかもしれません。

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

値
-

`value` 属性は、テキスト入力欄に入力された現在のテキストの値が入っている文字列です。 JavaScript では `HTMLInputElement.value` プロパティを使ってこれを受け取ることができます。

```js
searchTerms = mySearch.value;
```

入力欄に検証の制約がない場合（詳しくは検証を参照)、値は任意の文字列又は空文字列 (`""`) になることがあります。

追加の属性
-----

型に関係なくすべての `<input>` 要素を操作する属性に加え、`search` 型の入力欄は次の属性にも対応しています。

### list

list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち `type` と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

### maxlength

ユーザーが検索フィールドに入力することができる（UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、検索フィールドには最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。

フィールドに入力されたテキストの長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は制約検証に失敗します。

### minlength

ユーザーが検索フィールドに入力することができる（UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、検索フィールドには最小文字数が設定されません。

入力欄のテキスト値の長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その検索フィールドは制約検証に失敗します。

### pattern

`pattern` 属性は、指定する場合は正規表現であり、入力欄の `value` が制約検証に合格するためにはこれと一致しなければなりません。これは `RegExp` 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

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

**メモ:** `title` 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

詳細や例についてはパターンの指定を参照してください。

### placeholder

`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは*できません*。

コントロールの内容がある書字方向（LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

**メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、`<input>` のラベルを参照してください。

### readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement` の `value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### size

`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の `font` 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `maxlength` 属性を使用してください。

### spellcheck

`spellcheck` はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは `spellcheck` 属性の `<input>` 要素の使用に関して特に考えます。 `spellcheck` で利用できる値は次の通りです。

`false`

この要素でスペルチェックを無効にします。

`true`

この要素でスペルチェックを有効にします。

""（空文字列) または値なし

スペルチェックについて、要素の既定の動作に従います。これは親の `spellcheck` 設定や、その他の要因に基づくことがあります。

入力欄では、 readonly 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。

`spellcheck` を読み取ることで返される値は、ユーザーエージェントの設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。

標準外の属性
------

以下の標準外の属性が検索入力フィールドで利用できます。一般的な規則として、できれば使用することを避けてください。

### autocorrect

Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

`on`

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

`off`

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

### incremental

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

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

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

### mozactionhint

Mozilla 拡張で、ユーザーがフィールドを編集中に `Enter` キーや `Return` キーを押した場合に行われるアクションの種類のヒントを提供します。

この属性は非推奨です。代わりにグローバル属性 `enterkeyhint` を使用してください。

### results

`results` 属性は、 Safari のみが対応していますが、数値で `<input>` 要素が本来持っている過去の検索クエリのドロップダウンメニューに表示される項目の最大数を上書きします。

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

検索入力欄の使用
--------

`search` 型の `<input>` 要素は、 `text` 型ととても似ていますが、検索語を扱うことに特化している点が異なります。どちらも基本的には同じ動作をしますが、ユーザーエージェントによっては既定で異なるスタイルを選択するかもしれません（そしてもちろん、サイトは独自のスタイルを適用することができます）。

### 基本的な例

```html
<form>
  <div>
    <input type="search" id="mySearch" name="q" />
    <button>検索</button>
  </div>
</form>
```

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

`q` は検索入力に与えられる最も一般的な `name` ですが、そうする必要があるわけではありません。送信すると、サーバーに送信されるデータの名前と値の組は `q=searchterm` となります。

入力欄に `name` を設定することを忘れないでください。そうしないと送信されません。

### search 型と text 型の違い

主な違いはブラウザーによる扱い方です。特筆するべき最初のことは、ブラウザーによっては×印を表示して、クリックすると簡単に検索語を削除できることです。次のスクリーンショットは Chrome のものです。

![フォーカスリング付きの検索入力で、テキストは 'cats'。入力欄の右横に × のアイコンが並んでいます。](/ja/docs/Web/HTML/Element/input/search/chrome-cross-icon.png)

加えて、最近のブラウザーは以前ドメイン内で入力された検索語を自動的に格納し、そのドメインの検索入力欄で従属的な検索が行われたときに、自動補完オプションに上がってくるようにする傾向があります。これは同じ又は似た検索を繰り返して行う傾向があるユーザーにとって便利です。次のスクリーンショットは Firefox のものです。

![エラー状態で、フォーカスリングが赤くなっている入力。ユーザーは文字 'h' を入力した。入力ボックスの直下に、 hello と hermansje という 2 つの選択肢を持つポップアップ選択リストが表示されている。](/ja/docs/Web/HTML/Element/input/search/firefox-auto-complete.png)この点について、検索フォームに適用することができる有用なテクニックを見てみましょう。

### プレイスホルダーの設定

`placeholder` 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。

```html
<form>
  <div>
    <input type="search" id="mySearch" name="q" placeholder="サイトを検索..." />
    <button>検索</button>
  </div>
</form>
```

プレイスホルダーの表示方法を以下で確認できます。

### 検索フォームのラベルとアクセシビリティ

検索フォームの一つの問題はアクセシビリティです。一般的なデザインの慣例では、検索フィールドにハラベルがなく（虫眼鏡のアイコンや同類のものはあります）、よく見えるユーザーには、その配置から検索フォームの目的が明確に分かります（この例ではよくあるパターンを示しています)。

しかし、これは、検索入力が何であるかを言葉で示していないため、スクリーンリーダーの利用者に混乱を引き起こす可能性があります。 ビジュアルデザインに影響を与えないでこれを解決する方法として、 WAI-ARIA の機能を使用することができます。

* `<form>` フォームの `role` 属性の値が `search` であると、スクリーンリーダーがフォームが検索フォームであることをアナウンスします。
* これで十分ではない場合、 `<input>` 自身の `aria-label` (en-US) 属性を使用することができます。これはスクリーンリーダーによって読み上げられ説明的なテキストラベルです。これは非視覚的な `<label>` と同等のものです。

例を見てみましょう。

```html
<form role="search">
  <div>
    <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="サイトを検索..."
 aria-label="Search through site content" />
    <button>検索</button>
  </div>
</form>
```

プレイスホルダーがどう表示されるかを以下で確認できます。

前回の例から見かけ上の違いはありませんが、スクリーンリーダーのユーザーは追加情報を得る方法があります。

**メモ:** このようなアクセシビリティ機能の詳細ついては、 Signposts/Landmarks をご覧ください。

### 物理的な入力要素の寸法

入力ボックスの物理的な寸法は、 `size` 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。

```html
<form>
  <div>
    <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="サイトを検索..."
 size="30" />
    <button>検索</button>
  </div>
</form>
```

結果はこの広い入力ボックスになります。

検証
--

`search` 型の `<input>` 要素は、通常の `text` 入力欄と同じ検証機能が利用できます。一般に検索ボックスに検証機能を使うことはあまりないでしょう。多くの場合、ユーザーは何でも入力できますが、既存の形式のデータに対して検索を行う場合など、考慮するべきケースも多少あります。

**メモ:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

### スタイルにおけるメモ

ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 `:valid` および `:invalid` です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ（X) マークを表示します。

```css
input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}
```

このテクニックにはフォーム要素の後に配置される `<span>` 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。

### 入力を必須にする

入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 `required` 属性を使うことができます。

```html
<form>
  <div>
    <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="サイトを検索..."
 required />
    <button>検索</button>
    <span class="validity"></span>
  </div>
</form>
```

```
input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}
```

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

加えて、何も検索語を入力せずに送信しようとすると、ブラウザーがメッセージを表示します。以下のものは Firefox の例です。

![このフィールドは入力必須です。と言うメッセージが添付されたフォームフィールド](/ja/docs/Web/HTML/Element/input/search/firefox-required-message.png)

入力欄の中に無効な異なるデータ型を持つフォームを送信しようとすれば、下記の例のように、異なるメッセージが表示されるでしょう。

### 入力値の長さ

`minlength` 属性を使用して入力された値の最小の長さ（文字数) を指定することができます。同様に、 `maxlength` を使用して入力された値の最大長を文字数で設定します。

以下の例では、入力値が4～8文字の長さであることが求められます。

```html
<form>
  <div>
    <label for="mySearch">ユーザーを検索</label>
    <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="ユーザー ID は 4～8 文字です"
 required
 size="30"
 minlength="4"
 maxlength="8" />
    <button>検索</button>
    <span class="validity"></span>
  </div>
</form>
```

```
input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}
```

This renders like so:

4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます（ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。

### パターンの指定

`pattern` 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます（入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください）。

例を見てみましょう。製品 ID の検索フォームを提供し、 ID はすべてが2文字の英字に続いて4桁の番号です。以下の例でそれに対応します。

```html
<form>
  <div>
    <label for="mySearch">製品 ID で検索:</label>
    <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="2 文字に続いて 4 桁の数字"
 required
 size="30"
 pattern="[A-z]{2}[0-9]{4}" />
    <button>検索</button>
    <span class="validity"></span>
  </div>
</form>
```

```
input {
  margin-right: 10px;
}

input:invalid ~ span::after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span::after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}
```

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

例
-

website-aria-roles の例ので使用した検索フォーム（ライブで見る）が良い例です。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 検索フィールドに入っている値を表す文字列。 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `required`,
 `size` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `setRangeText()`,
 `setSelectionRange()` |
| **暗黙の ARIA ロール** | `list` 属性がない場合: `searchbox (en-US)` | `list` 属性がある場合: `combobox (en-US)` |

仕様書
---

| Specification |
| --- |
| HTML Standard # text-(type=text)-state-and-search-state-(type=search) |

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

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

関連情報
----

* HTML Forms
* `<input>` および `HTMLInputElement` インターフェイスに基づいています。
* `<input type="text">`
* CSS プロパティの互換性


<input type="color"> - HTML: ハイパーテキストマークアップ言語

<input type="color">
====================

`<input>` 要素の **`color`** は視覚的なインターフェイス、もしくは `#rrggbb` の 16 進数表記でテキストを入力することでユーザーが色を指定することができます。

CSS の色表現には他にも色名、関数表記、アルファ値つきの 16 進表記などがありますが、ここでは単純な (アルファ値のない) もののみが利用できます。

この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。— 単純なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。

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

値
-

`<input>` 要素で型が `color` のものの `value` は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。

**メモ:** 有効な、不透明な *16 進表現*の RGB カラーではない値を設定した場合は、結果的に `#000000` に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。`#009900aa` のような 9 文字の 16 進表記で色を設定すると、結果的に `#000000` に設定されます。

カラー入力欄の使用
---------

type が `color` の入力欄は、対応する属性の数が限られているので単純です。

### 既定の色の設定

上記の例で既定値を設定するように変更すると、カラーピッカーがあらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。

```html
<input type="color" value="#ff0000" />
```

色を指定しない場合は、既定で黒を表す `#000000` になります。値は 7 文字の 16 進表記、つまり "#" の文字に続いて赤、緑、青を示す各 2 桁が並び、`#rrggbb` のようになります。他の形式の色を使う場合は (CSS の色名や、`rgb()` または `rgba()` のような CSS 色関数など)、`value` に設定する前に 16 進表記に変換する必要があります。

### 色の変更の追跡

ほかの `<input>` 型と同様に、`input` および `change` イベントで色の変化を検出することができます。`input` は `<input>` 要素で色が変更されるたびに実行されます。`change` イベントはユーザーがカラーピッカーを閉じたときに実行されます。どちらの場合も、新しい値は `value` で調べることができます。

次の例は、色の変更をずっと監視します。

```js
colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}
```

### 値の選択

ブラウザーがカラーピッカーインターフェースに対応していない場合、カラー入力の実装はテキストボックスとなり、値が正しい形式であることを確認するために、自動的に中身を検証することになります。この場合、`select()`メソッドを使用して、現在編集フィールドに使用されているテキストを選択することができます。

ブラウザーがカラーピッカーなどを提供している場合、`select()` は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。

```js
colorPicker.select();
```

検証
--

ユーザーエージェント が値を正しい形式である 7 桁の小文字の 16 進記法に変換できない場合、値は無効であると見なされます。このときは `:invalid` 疑似クラスが要素に適用されます。

例
-

`change` および `input` イベントを追跡して、新しい色を取得し、その度に文書の `<p>` 要素に適用する例をもう少し作成してみましょう。

### HTML

HTMLはかなり単純です。数段落の説明的な素材と、 ID が `color-picker` で `color` 型の `<input>` があり、これを使用して段落のテキストの色を変更することになります。

```html
<p><code><input type="color"></code> コントロールを使用する例です。</p>

<label for="color-picker">色:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  カラーピッカーを動かしたときに段落の色が変わるのを見てください。カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして変化します（<code
 >input</code
 >
  イベントを使用します）。カラー ピッカーを閉じると、<code>change</code>
  イベントが実行され、全ての段落が選択された色に変化することが分かります。
</p>
```

### JavaScript

まずはいくつかの設定を行います。いくつかの変数を作成し、変数の値をページが最初に読み込まれたとき設定する色にし、ページが完全に読み込まれた時に一度スタートアップ作業を実行させるために `load` ハンドラーを設定します。

```js
let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);
```

#### 初期化

ページが読み込まれると、`load` イベントのハンドラーである `startup()` が呼び出されます。

```js
function startup() {
  colorPicker = document.querySelector("#color-picker");
  colorPicker.value = defaultColor;
  colorPicker.addEventListener("input", updateFirst, false);
  colorPicker.addEventListener("change", updateAll, false);
  colorPicker.select();
}
```

これは color の `<input>` 要素の参照を取得して `colorPicker` という変数に格納し、色入力欄の値を `defaultColor` を設定します。次に、`input` イベントに `updateFirst()` 関数を、`change` イベントに `updateAll()` 関数を指定します。これらについては後述します。

最後に `select()` を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。

#### 色の変更に応答させる

色の変更に反応する 2 つの関数を与えています。`updateFirst()` 関数は `input` イベントによって呼び出され、文書の最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。 `input` イベントは値を調整する（例えば明るさを増加させるなど）たびに実行されるため、カラーピッカーが使用される毎に繰り返して実行されます。

```js
function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}
```

カラーピッカーが閉じられると、（ユーザーがカラーピッカーを再び開かない限り）値が再び変化することはないことを示す `change` イベントが要素に送られます。そのイベントを `updateAll()` 関数で処理し、 `Event.target.value` を使用して最終的に選択された色を取得します。

```js
function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}
```

これは、すべての `<p>` ブロックの色を設定して、その `color` 属性が color 入力（ `event.target` を使用して参照される）の現在の値と一致するようにするものである。

### 結果

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

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 小文字の 16 進数で `<color>` を定義する 7 文字の文字列 |
| **イベント** | `change` および
 `input` |
| **対応する共通属性** | `autocomplete` および
 `list` |
| **IDL 属性** | `list` および `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()` |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

| Specification |
| --- |
| HTML Standard # color-state-(type=color) |

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

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

関連情報
----

* CSS プロパティの互換性


<input type="button"> - HTML: ハイパーテキストマークアップ言語

<input type="button">
=====================

`<input>` 要素の **`button`** 型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは `click` イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。

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

**メモ:** `<input>` 要素の `button` 型は完全に妥当な HTML ですが、より新しい `<button>` 要素が、ボタンの作成にはより好まれるようになりました。 `<button>` のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。

値
-

### value ありのボタン

`<input type="button">` 要素の `value` 属性には、ボタンのラベルとして使われる文字列を設定します。

```html
<input type="button" value="クリックしてね" />
```

### value なしのボタン

`value` を指定しなかった場合は、無印のボタンになります。

```html
<input type="button" />
```

ボタンの使用
------

`<input type="button">` 要素には既定の動作がありません（親戚である `<input type="submit">` や `<input type="reset">` は、それぞれフォームの送信とリセットに使用されます）。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。

### 単純なボタン

単純なボタンに `click` イベントハンドラーを設定し、マシンを起動させましょう（つまり、ボタンの `value` と続く段落の文字列コンテンツを切り替えます）。

```html
<form>
  <input type="button" value="マシンを起動" />
</form>
<p>マシンが停止しています。</p>
```

```js
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "マシンを起動") {
    button.value = "マシンを停止";
    paragraph.textContent = "マシンが起動しています！";
  } else {
    button.value = "マシンを起動";
    paragraph.textContent = "マシンが停止しています。";
  }
}
```

このスクリプトは DOM で `<input>` を表す `HTMLInputElement` オブジェクトの参照を受け取り、この参照を変数 `button` に保存します。`addEventListener()` は、ボタンに `click` イベントが発生したときに実行される関数を設定します。

### ボタンへのショートカットキーの追加

ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの `<input>` でも同じですが、 `accesskey` グローバル属性を使用します。

この例では、 `s` がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、 `s` と特定の修飾キーの組み合わせが必要です。その一覧については accesskey を参照してください)。

```html
<form>
  <input type="button" value="マシンを起動" accesskey="s" />
</form>
<p>マシンが停止しています。</p>
```

```
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "マシンを起動") {
    button.value = "マシンを停止";
    paragraph.textContent = "マシンが起動しています！";
  } else {
    button.value = "マシンを起動";
    paragraph.textContent = "マシンが停止しています。";
  }
}
```

**メモ:** 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。

### ボタンの無効化と有効化

ボタンを無効にするには、次のように `disabled` グローバル属性を指定するだけです。

```html
<input type="button" value="Disable me" disabled />
```

#### disabled 属性の設定

実行時に `disabled` に `true` または `false` を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと `button.disabled = true` を使用して無効化されます。それから `setTimeout()` 関数を使用して、2 秒後にボタンの状態を有効の状態にリセットしています。

```html
<input type="button" value="Enabled" />
```

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

button.addEventListener("click", disableButton);

function disableButton() {
  button.disabled = true;
  button.value = "Disabled";
  setTimeout(() => {
    button.disabled = false;
    button.value = "Enabled";
  }, 2000);
}
```

#### disabled 状態の継承

`disabled` 属性が指定されなかった場合、ボタンは `disabled` の状態を親要素から継承します。これによって、複数の要素を `<fieldset>` 要素のようなコンテナーの中に入れ、コンテナーに `disabled` を設定することで、一括で有効化したり無効化したりすることができます。

以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときに `disabled` 属性が `<fieldset>` に設定され、2 秒経過するまで 3 つのボタンがすべて無効になります。

```html
<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
</fieldset>
```

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

button.addEventListener("click", disableButton);

function disableButton() {
  fieldset.disabled = true;
  setTimeout(() => {
    fieldset.disabled = false;
  }, 2000);
}
```

**メモ:** Firefox は他のブラウザーとは異なり、既定でページの読み込み中に `<button>` に動的に無効にされた状態を維持します。この機能を制御するには `autocomplete` 属性を使用してください。

検証
--

ボタンに対して制約検証は行われません。制約すべき値はありません。

例
-

以下の例では、 `<canvas>` 要素といくらかの単純な CSS と JavaScript を使用して作成した、とても簡単なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の 2 つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。

```html
<div class="toolbar">
  <input type="color" aria-label="select pen color" />
  <input
 type="range"
 min="2"
 max="50"
 value="30"
 aria-label="select pen size" /><span class="output">30</span>
  <input type="button" value="Clear canvas" />
</div>

<canvas class="myCanvas">
  <p>Add suitable fallback here.</p>
</canvas>
```

```
body {
  background: #ccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #ccc;
  width: 150px;
  height: 75px;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}
```

```js
const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight - 85);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, width, height);

const colorPicker = document.querySelector('input[type="color"]');
const sizePicker = document.querySelector('input[type="range"]');
const output = document.querySelector(".output");
const clearBtn = document.querySelector('input[type="button"]');

// 角度をラジアンに変換する
function degToRad(degrees) {
  return (degrees \* Math.PI) / 180;
}

// 選択した大きさの値を反映

sizePicker.oninput = () => {
  output.textContent = sizePicker.value;
};

// マウスポインターと、ボタンが押されているかどうかを格納
let curX;
let curY;
let pressed = false;

// マウスポインターの座標を更新
document.onmousemove = (e) => {
  curX = e.pageX;
  curY = e.pageY;
};

canvas.onmousedown = () => {
  pressed = true;
};

canvas.onmouseup = () => {
  pressed = false;
};

clearBtn.onclick = () => {
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, width, height);
};

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();
```

技術的概要
-----

|  |  |
| --- | --- |
| **値** | ボタンのラベルとして使われる文字列 |
| **イベント** | `click` |
| **対応している共通属性** | `type` および
 `value` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし |
| **暗黙の ARIA ロール** | `button` |

仕様書
---

| Specification |
| --- |
| HTML Standard # button-state-(type=button) |

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

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

関連情報
----

* `<input>` およびそれに実装されている `HTMLInputElement` インターフェイス。
* より新しい `<button>` 要素。
* CSS プロパティの互換性


<input type="password"> - HTML: ハイパーテキストマークアップ言語

<input type="password">
=======================

`<input>` 要素の **`password`** 型は、パスワードを安全に入力する方法を提供します。
 この要素はプレーンテキストの 1 行編集コントロールとして表示され、そのテキストは読み取られることがないように、1 つ 1 つの文字がアスタリスク ("\*") やドット ("•") のような記号に置き換えられ、隠されます。
 この文字はユーザーエージェントやオペレーティングシステムによって変わります。

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

 入力時の正確な動作は、ブラウザーによって異なる場合があります。
 ブラウザーによっては、入力された文字を一瞬だけ表示して見えなくするものや、ユーザーがプレーンテキストの表示のオン・オフを切り替えられるものがあります。
 どちらの手法も、ユーザーが意図したとおりのパスワードが入力されたかどうかを調べるのに役立ちますが、モバイル端末では特に難しい場合があります。

**メモ:** パスワードのような機密情報が含まれているフォーム（ログインフォームなど）は、 HTTPS で送信するべきです。
 多くのブラウザーで、安全ではないログインフォームに対して警告を行う仕組みが実装されています。詳細は安全でないパスワードを参照してください。

値
-

`value` 属性は、パスワードを入力するために使われているテキスト編集コントロールの、現在の内容である文字列を格納します。ユーザーが何も入力していない場合、この値は空文字列 (`""`) です。`required` プロパティが指定されている場合、パスワード編集ボックスが妥当となるためには、空文字列以外の値を含まなければなりません。

`pattern` 属性が指定されている場合、`password` コントロールの内容は、その値が検証に合格した場合のみ、妥当とみなされます。詳細は検証を参照してください。

**メモ:** 改行文字の LF (U+000A) と CR (U+000D) は `password` の値には許容されません。パスワードコントロールに値がセットされるとき、LF および CR は値から取り除かれます。

追加の属性
-----

型に関係なくすべての `<input>` 要素を操作する属性に加え、 `password` 型の入力欄は次の属性にも対応しています。

### maxlength

ユーザーがパスワード入力欄に入力することができる（UTF-16 コード単位での）最大文字数です。 0 以上の整数値である必要があります。`maxlength` が指定されていないか、無効な値が指定されていると、パスワード入力欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。

フィールドに入力されたテキストの長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は制約検証に失敗します。

### minlength

ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、`maxlength` で指定された値以下である必要があります。`minlength` が指定されていないか、無効な値が指定されていると、パスワード入力欄には最小文字数が設定されません。

入力欄のテキストの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その入力欄は制約検証に失敗します。

### pattern

`pattern` 属性は、指定する場合は正規表現であり、入力欄の `value` が制約検証に合格するためにはこれと一致しなければなりません。これは `RegExp` 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

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

**メモ:** `title` 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

パスワードの入力には、 pattern を使用することを強くお勧めします。これは、さまざまな文字クラスを使用した有効なパスワードが、ユーザーによって選択され使用されることを保証するためです。パターンでは、大文字と小文字を区別するルールや、数字や記号の使用を義務付けることができます。詳細と例については検証の節を参照してください。

### placeholder

`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは*できません*。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

**メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、`<input>` のラベルを参照してください。

### readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement.value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### size

`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の `font` 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `maxlength` 属性を使用してください。

パスワード入力欄の使用
-----------

パスワード入力ボックスは通常、他のテキスト入力ボックスのように動作します。主な違いは、ユーザーの近くにいる人がパスワードを読み取ることを防ぐために、その内容を隠すことです。

### シンプルなパスワード入力欄

以下は最も基本的なパスワード入力欄で、`<label>` 要素を使ったラベルとともに設置されています。

```html
<label for="userPassword">パスワード: </label>
<input id="userPassword" type="password" />
```

### オートコンプリートの許可

パスワードを自動的に入力するため、ユーザーのパスワードマネージャを許可するには、`autocomplete` 属性を指定します。パスワードの場合、通常は次のいずれかの値をとります。

`on`

ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可します。これは、`current-password` あるいは`new-password` を使用するほど有益ではありません。

`off`

ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可しません。いくつかのソフトウェアはこの値を無視しますが、それは通常、ユーザーの安全なパスワードの実践を維持する能力を、阻害するものであることに注意してください。

`current-password`

ブラウザー、あるいはパスワードマネージャがサイトのための現在のパスワードを入力することを許可します。この値はブラウザー、あるいはパスワードマネージャに、そのサイトの既知のパスワードを自動的に入力させ、新しいパスワードを提案するものではないもので、`"on"` よりも多くの情報を提供します。

`new-password`

ブラウザー、あるいはパスワードマネージャが、そのサイトの新しいパスワードを自動的に入力することを許可します。これは「パスワードの変更」や「新規ユーザー」フォームの、ユーザーに新しいパスワードを求める入力欄で使われます。新しいパスワードは、パスワードマネージャによって、複数の方法で生成される場合があります。単に新しく提示されるパスワードで埋めるかもしれませんし、あるいは新しいパスワードを生成するインターフェイスを、ユーザーに見せるかもしれません。

```html
<label for="userPassword">パスワード:</label>
<input id="userPassword" type="password" autocomplete="current-password" />
```

### パスワードを必須にする

ユーザーのブラウザーに対して、フォームの送信前に、パスワード欄に有効な値が入力されている必要があることを伝えるためには、 `required` 論理属性を指定してください。

```html
<label for="userPassword">パスワード: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />
```

### 入力モードを指定する

推奨する、または必須となるパスワードの構文ルールが、標準キーボードよりも、代替となるテキスト入力インターフェースから恩恵を受ける場合、特定のものを要求するために `inputmode` 属性を使用することができます。この最も明快な用途は、 PIN のようにパスワードが数字で構成されていることを必要とする場合です。例えば、仮想キーボードを持つモバイル端末では、パスワードの入力をより簡単にするため、フルキーボードの代わりに、数字のキーパッドレイアウトに切り替えることを選択するかもしれません。 PIN が１回限りの使用であれば、 `autocomplete` 属性を `off` または `one-time-code` のどちらかに設定してサジェストが保存されないようにしてください。

```html
<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />
```

### 長さの要件を設定する

普通、`minlength` 属性や `maxlength` 属性を使って、許容する最小の長さと最大の長さをパスワードに適用することができます。この例では、直前の例を拡張して、ユーザーの PIN が 4 〜 8文字でなければならないことを指定しています。`size` 属性は、パスワード入力コントロールが 8 文字分の幅であることを保証するために使用されています。

```html
<label for="pin">PIN:</label>
<input
 id="pin"
 type="password"
 inputmode="numeric"
 minlength="4"
 maxlength="8"
 size="8" />
```

### テキストを選択する

他のテキスト入力コントロールのように、 `select()` メソッドを使って、パスワード欄のすべてのテキストを選択することができます。

#### HTML

```html
<label for="userPassword">パスワード: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>
```

#### JavaScript

```js
document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
};
```

#### 結果

また、`selectionStart` や `selectionEnd` を使って、コントロールの文字がどの範囲で選択されているかを取得または設定することができ、`selectionDirection` を使って、どの方向に選択が発生したのか（あるいはどの方向に広がるのか。プラットフォームに依存します。詳細は各ドキュメントを参照してください）を知ることができます。ただし、テキストは隠されているため、有用性はやや制限されます。

検証
--

もしアプリケーションが文字セットの制限を有している場合、あるいは入力されたパスワードの実際の内容について、他の何らかの要件がある場合には、`pattern` 属性を使って、パスワードがそれらの要件に合致しているか自動的に確認するための正規表現を設定することができます。

この例では、4 〜 8 文字の 16 進数の数字のみが妥当です。

```html
<label for="hexId">Hex ID: </label>
<input
 id="hexId"
 type="password"
 pattern="[0-9a-fA-F]{4,8}"
 title="4-8 桁の 16 進数で ID を入力してください"
 autocomplete="new-password" />
```

例
-

### 社会保障番号の要求

この例では、有効なアメリカ合衆国の社会保障番号の形式に合致する入力のみが受け付けられます。これらの数字はアメリカ合衆国において、税や個人の識別を目的として使われており、その形式は "123-45-6789" です。各種、それぞれのグループ内でどのような値が許可されているかについてのルールも存在しています。

#### HTML

```html
<label for="ssn">SSN:</label>
<input
 type="password"
 id="ssn"
 inputmode="numeric"
 minlength="9"
 maxlength="12"
 pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
 required
 autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>
```

ここでは `pattern` を使って、入力される値を、正当な社会保障番号を示す文字列に制限しています。明らかに、この正規表現は、妥当な SSN であることを保証していません（社会保障局のデータベースにアクセスしているわけではないので）が、その番号が SSN になり得るものであることは保証しています。一般に、値が妥当になり得ないことを避けています。加えて、3 つの数字のグループがスペース、ダッシュ ("-") で区切る、あるいは区切らないことを許容しています。

`inputmode` が `numeric` にセットされ、より入力しやすくするために、仮想キーボードを持つ端末が数字キーパッドレイアウトに切り替えることを支援しています。`minlength` と `maxlength` がそれぞれ 9 と 12 にセットされ、値が 9 〜 12 文字 (前者はグループ間の区切り文字無し、後者は有り) であることを要件としています。 `required` 属性は、このコントロールが値を持っていなければならないことを示すために使われています。最後に、 `autocomplete` が `"off"` にセットされており、これはまったくパスワードではないので、パスワードマネージャーが値をセットしようとすることを回避しています。

#### JavaScript

これは実にシンプルなコードで、入力された SSN を見られるように、画面に表示するためのものです。これは明らかに、パスワード欄の目的を損ねるものですが、`pattern` を試すには役立ちます。

```js
const ssn = document.getElementById("ssn");
const current = document.getElementById("current");

ssn.oninput = (event) => {
  current.textContent = ssn.value;
};
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| **値** | パスワードを表す文字列、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `inputmode`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `required`,
 `size` |
| **IDL 属性** | `selectionStart`, `selectionEnd`,
 `selectionDirection`, `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `setRangeText()`,
 `setSelectionRange()` |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

| Specification |
| --- |
| HTML Standard # password-state-(type=password) |

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

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

関連情報
----

* CSS プロパティの互換性


<input type="image"> - HTML: ハイパーテキストマークアップ言語

<input type="image">
====================

`<input>` 要素の **`image`** 型は、テキストではなく画像の形をとる送信ボタン、すなわちテキストではなく画像の形をとる送信ボタンを作成するために使用されます。

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

値
-

`<input type="image">` 要素は `value` 属性を受け付けません。表示する画像へのパスを `src` 属性で指定します。

追加の属性
-----

すべての `<input>` 型で共通する属性に加え、 `image` 型の入力欄は次の属性にも対応しています。

### alt

`alt` 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します（エラーの場合、ユーザーエージェントが画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など）。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。

例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 `alt` 属性も `今すぐログイン` のように設定してください。

**メモ:** `alt` 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。

`<input type="image">` 要素の `alt` 属性は、機能的には `<img>` 要素における `alt` 属性と同様に動作します。

### formaction

文字列で、データの送信先の URL を示します。これはこの `<input>` が属する `<form>` 要素の `action` 属性より優先します。

この属性は `<input type="submit">` および `<button>` 要素でも使用できます。

### formenctype

文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は 3 つです。

`application/x-www-form-urlencoded`

これは既定値で、フォームのデータを `encodeURI()` などのアルゴリズムを使って URL エンコーディングした後で送信します。

`multipart/form-data`

データを管理するために `FormData` API を使用し、複数のファイルをサーバーに送信することができます。フォームに `<input>` 要素の `type` が `file` のもの (`<input type="file">`) が含まれている場合は、このエンコーディング型を*使わなければなりません*。

`text/plain`

プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。

`formenctype` 属性が指定された場合、所属するフォームの `action` 属性を上書きします。

この属性は `<input type="submit">` および `<button>` 要素でも使用できます。

### formmethod

文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの `method` を上書きします。許されている値は次の通りです。

`get`

URL は `formaction` または `action` 属性で与えられた URL で始まり、クエスチョンマーク ("?") 文字を付加し、次に `formenctype` またはフォームの `enctype` 属性の記述に従ってコード化したフォームデータを付加して作成されます。この URL は、 HTTP の `get` リクエストでサーバーに送信されます。この方法は、ASCII 文字のみを含み、副作用のない単純なフォームに対してよく機能します。これは既定値です。

`post`

フォームのデータは `formaction` または `action` 属性で指定された URL に HTTP の `post` リクエストで送信される本文に含まれます。このメソッドは、複雑なデータやファイルの添付に対応しています。

`dialog`

このメソッドは、ボタンが入力に関連するダイアログを閉じ、フォームデータを全く送信しないことを示すために使用される。

この属性は `<input type="submit">` および `<button>` 要素でも使用できます。

### formnovalidate

論理属性で、これがある場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、その要素の所有するフォームの `novalidate` 属性の値より優先されます。

この属性は `<input type="submit">` および `<button>` 要素でも使用できます。

### formtarget

文字列で、フォームを送信した後に受け取ったレスポンスを表示する場所を示す、名前またはキーワードを指定します。この文字列は、**閲覧コンテキスト**（つまり、タブ、ウィンドウ、または `<iframe>`）の名前である必要があります。ここで指定された値は、この入力を所有する `<form>` の `target` 属性で指定されたターゲットよりも優先されます。

タブ、ウィンドウ、インライン枠などの実際の名前のほかに、いくつかの特別なキーワードを使用することができます。

`_self`

レスポンスを、フォームを含むものと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換えられます。これは、何も指定されていない場合に使用される既定値です。

`_blank`

レスポンスを新しい、名前のない閲覧コンテキストに読み込みます。これは通常、現在の文書と同じウィンドウの新しいタブですが、ユーザーエージェントの設定によって異なる場合があります。

`_parent`

現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、 `_self` と同じ動作をします。

`_top`

これは現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは `_self` と同じように動作します。

この属性は `<input type="submit">` および `<button>` 要素でも使用できます。

### height

`src` 属性で指定された画像を描画する高さを CSS ピクセルで指定した数値です。

### src

文字列で、グラフィカルな送信ボタンを表現するために表示する画像ファイルの URL を指定します。ユーザーが画像と対話するとき、その入力は他のボタン入力と同様に処理されます。

### width

画像を描画する幅を CSS ピクセルで表した数値です。

廃止された属性
-------

以下の属性は、 HTML 4 で `image` 入力用に定義されたものですが、すべてのブラウザーで実装されていたわけではなく、その後、非推奨となりました。

### usemap

`usemap` が指定された場合、画像と共に使用するイメージマップを定義します。イメージマップ要素 `<map>` の名前でなければなりません。この使い方は時代遅れです。イメージマップを使いたい場合は、 `<img>` 要素を使うように切り替えてください。

image 入力の使用
-----------

`<input type="image">` 要素は置換要素（CSS レイヤーによって内容が生成されたり、直接管理されたりしない要素）で、大部分は通常の `<img>` 要素と同じ動きをしますが、送信ボタンの機能を持っています。

### 基本的な input 入力の機能

必要な機能をすべて含んだ基本的な例を見てみましょう（これらは `<img>` 要素とまったく同じように動作します）。

```html
<input
 id="image"
 type="image"
 width="100"
 height="30"
 alt="Login"
 src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />
```

* `src` 属性は、ボタンに表示したい画像のパスを指定するために使用されます。
* `alt` 属性は画像の alt テキストを提供し、スクリーンリーダーの利用者がボタンが何に使われるかをより良く理解することができるようにします。また、何らかの理由で画像を表示できない場合にも表示されます（例えば、パスのスペルが間違っている場合など）。可能であれば、標準的な送信ボタンを使用する場合に使用するラベルと一致するテキストを使用してください。
* `width` および `height` 属性は、画像を表示する幅と高さをピクセル単位で指定するために使用されます。ボタンは画像と同じ大きさです。ボタンのヒット領域を画像より大きくしたい場合は、 CSS を使う必要があります（例： `padding`）。また、片方の寸法だけを指定した場合、もう片方は自動的に調整され、画像は元のアスペクト比を維持します。
### 既定のフォームの動作の上書き

`<input type="image">` 要素は — 通常の送信ボタンと同様に — 既定のフォームの動作を上書きするいくつかの属性を受け付けます。

`formaction`

input 要素から送信された情報を処理するプログラムの URI。要素のフォームオーナーの `action` 属性を上書きします。

`formenctype`

サーバーにフォームを送信する際に使用するコンテンツの種類を指定します。指定可能な値は以下のとおりです。

* `application/x-www-form-urlencoded`: 属性が指定されていない場合の既定値。
* `text/plain`.

この属性が指定された場合、要素のフォームオーナーの `enctype` 属性を上書きします。

`formmethod`

ブラウザーがフォームを送信するために使用する HTTP メソッドを指定します。指定可能な値は以下のとおりです。

* `post`: フォームのデータは、フォームの本文に含まれ、サーバーに送信されます。
* `get`: フォームからのデータは、 '?' を区切り文字として **`form`** 属性の URI に追加され、結果の URI がサーバーに送信されます。このメソッドは、フォームに副作用がなく、 ASCII 文字のみを含む場合に使用してください。

指定された場合、この属性は要素のフォームオーナーの `method` 属性を上書きします。

`formnovalidate`

論理属性で、フォーム送信時に検証を行わないことを指定します。この属性が指定された場合、要素のフォームオーナーの `novalidate` 属性を上書きします。

`formtarget`

フォームを送信した後に受信したレスポンスを表示する場所を示す名前またはキーワードです。これは、閲覧コンテキスト（例えば、タブ、ウィンドウ、インライン枠）の名前、またはキーワードです。この属性が指定された場合、要素のフォームオーナーの `target` 属性を上書きします。次のキーワードは特別な意味を持ちます。

* \_`self`: 現在のコンテキストと同じ閲覧コンテキストにレスポンスを読み込みます。この属性が指定されていない場合は、この値が既定値となります。
* `_blank`: 新しい無名の閲覧コンテキストにレスポンスを読み込みます。
* `_parent`: 現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親が存在しない場合、このオプションは `_self` と同じように動作します。
* `_top`: 最上位の閲覧コンテキスト（つまり、現在の閲覧コンテキストの祖先のうち、親を持たない閲覧コンテキスト）にレスポンスを読み込みます。親がいない場合、このオプションは `_self` と同じ振る舞いをします。

### 点の x および y のデータの使用

`<input type="image">` で作成したボタンを使ってフォームを送信すると、ブラウザーが自動的に `x` と `y` という 2 つの追加データをサーバーに送信します。 X Y 座標の例で、その様子を見ることができます。

画像をクリックしてフォームを送信すると、 `?x=52&y=55` のようなデータが引数として URL に付加されるのがわかります。画像入力に `name` 属性がある場合、指定した名前はすべての属性の先頭に付くことに注意してください。したがって、`name` が `position` である場合、返される座標は URL で `?position.x=52&position.y=55` という書式となります。もちろん、これは他のすべての属性にも当てはまります。

これらは、マウスでクリックしてフォームを送信した画像の X と Y の座標で、 (0,0) が画像の左上となり、画像のクリック以外で送信が発生した場合の既定値もこれになります。これらは、画像の中でクリックされた位置が重要である場合、例えば、地図がクリックされると、クリックされた座標がサーバーに送信されるような場合に利用することができます。サーバー側のコードは、クリックされた場所を特定し、その近くの場所についての情報を返します。

上記の例では、サーバー側のコードで、送信された座標からどの色がクリックされたかを調べ、人々が投票した好きな色の集計を行うことができます。

### 画像の位置と拡大縮小アルゴリズムの調整

`object-position` プロパティを使用すると、 `<input>` 要素の枠内での画像の位置を調整することができ、 `object-fit` プロパティは枠内に収める画像の大きさを調整する方法を制御することができます。これにより、 `width` と `height` 属性を用いて画像の枠を指定し、レイアウト内に空間を確保した上で、その空間内のどこに画像を配置し、その空間に合わせて画像を縮小する方法（または縮小するかどうか）を調整することができます。

例
-

### ログインフォーム

次の例は、前と同じボタンを、典型的なログインフォームのコンテキストに含めて表示したものです。

#### HTML

```html
<form>
  <p>アカウントにログインしてください</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
 id="image"
 type="image"
 src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
 alt="Login"
 width="100" />
  </div>
</form>
```

#### CSS

次に、基本的な要素をよりきれいに配置するための簡単な CSS です。

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

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}
```

### 画像の位置と大きさの調整

この例では、前の例を応用して画像のための空間を確保し、 `object-fit` と `object-position` で実際の画像の大きさと位置を調整しています。

#### 例

#### HTML

```html
<form>
  <p>アカウントにログインしてください</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
 id="image"
 type="image"
 src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
 alt="Login"
 width="200"
 height="100" />
  </div>
</form>
```

#### CSS

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

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #ddd;
}
```

ここでは、 `object-position` は画像を要素の右上隅に描画するように設定され、 `object-fit` は `contain` に設定されています。これは、画像の縦横比を変えずに要素のボックス内に収まる最大の大きさで描画することを意味しています。画像で覆われていない領域では、要素の灰色の背景がまだ見えていることに注意してください。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | なし — `value` 属性は指定しないでください。 |
| **イベント** | なし |
| **対応している共通属性** | `alt`,
 `src`,
 `width`,
 `height`,
 `formaction`,
 `formenctype`,
 `formmethod`,
 `formnovalidate`,
 `formtarget` |
| **IDL 属性** | なし |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし |
| **暗黙の ARIA ロール** | `button` |

仕様書
---

| Specification |
| --- |
| HTML Standard # image-button-state-(type=image) |

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

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

関連情報
----

* `<input>` および実装している `HTMLInputElement` インターフェイス
* HTML の `<img>` 要素
* `<input>` 要素の枠内における画像の位置と大きさの指定: `object-position` および `object-fit`
* CSS プロパティの互換性


<input type="date"> - HTML: ハイパーテキストマークアップ言語

<input type="date">
===================

`<input>` 要素の **`type="date"`** は、ユーザーに日付を入力させる入力欄を、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで生成します。

結果の値には年、月、日が含まれますが、時刻は含まれません。 time および datetime-local 入力型は時刻や日付と時刻の入力に対応しています。

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

入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細はブラウザーの互換性を参照してください。対応していないブラウザーでは、このコントロールは単純な `<input type="text">` に格下げされます。

値
-

入力欄に入力された日付を表す文字列です。日付は日付文字列形式に従って書式化されます。

次のように、日付の入力欄の既定値を `value` 属性に設定することができます。

```html
<input type="date" value="2017-06-01" />
```

**メモ:** 表示される日付の書式は実際の `value` とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される `value` は常に `yyyy-mm-dd` の書式です。

JavaScript での日付値を取得したり設定したりするには、次のように `HTMLInputElement` の `value` および `valueAsNumber` プロパティで行うことができます。

```js
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // "2017-06-01" と表示
console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイムスタンプを表示
```

このコードは `<input>` 要素のうち `type` が `date` である最初のものを探し、値を `2017-06-01` （2017 年 6 月 1 日）に設定します。それからその値を文字列と数字の書式で読み直しています。

追加の属性
-----

すべての `<input>` 要素に共通する属性は `date` 入力型にも適用されますが、その表示に影響を与えないかもしれません。例えば、 `size` や `placeholder` は動作しないかもしれません。 `date` 入力には以下の追加属性があります。

### max

受け付ける最も遅い日付です。要素に入力された `value` がこれ以降になった場合、要素は制約検証に失敗します。 `max` 属性の値が `yyyy-mm-dd` の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。

`max` と `min` の両方の属性を設定する場合、この値は `min` 属性にあるもの**より遅いか、同じ**日付文字列でなければなりません。

### min

受け付ける最も早い日付です。要素に入力された `value` がこれ以前になった場合、要素は制約検証に失敗します。 `min` 属性の値が `yyyy-mm-dd` の書式のありうる日付でない場合、要素は最小の日付値を持ちません。

`max` と `min` の両方の属性を設定する場合、この値は `max` 属性で指定されたもの**より早いか、同じ**日付である必要があります。

### step

`step` 属性は値を吸着する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値（指定されていれば `min`、そうでなければ `value`、どちらも提供されていなければ適切な既定値）に等しい値のみが妥当となります。

文字列値の `any` は刻みがなく、どの値でも許可されることを意味します（`min` や `max` など、他の制約には制限されます）。

**メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。

`date` 入力欄では、 `step` の値は日単位で指定します。また、 86,400,000 に `step` を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。 `step` の既定値は `1` であり、 1 日を表します。

**メモ:** `any` を `step` 属性の値として指定すると、 `1` を `date` 入力欄に設定したのと同じ効果になります。

date 入力欄の使用
-----------

日付入力は日付を選ぶための簡単なインターフェイスを提供し、ユーザーのロケールに関係なくサーバーに送信されるデータ形式を正規化します。

この節では、`<input type="date">` の基本的な使用方法から、より複雑な使用方法まで見ていきます。

日付入力の基本的な使用
-----------

もっとも単純な `<input type="date">` の使用方法は、次のように基本的な `<input>` と `<label>` 要素の組み合わせです。

```html
<form action="https://example.com">
  <label>
    誕生日を入力してください。
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
```

この HTML は入力された日付を `bday` キーに入れて `https://example.com` に送ります。 — 結果の URL は `https://example.com/?bday=1955-06-08` のようになります。

### 日付の最大値と最小値の設定

`min` および `max` 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を `2017-04-01` に、日付の最大値を `2017-04-30` に設定しています。

```html
<form>
  <label
 >希望するパーティーの日を選んでください。
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
```

この結果は、 2017 年の 4 月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで 4 月以外にスクロールすることができなくなります。

**メモ:** `step` 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。

### 入力欄の寸法の制御

`<input type="date">` は `size` のような寸法に関する属性には対応していません。寸法を変更するには CSS を推奨します。

検証
--

既定で、 `<input type="date">` は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 `text` 型に代替されるするブラウザーにおいて、無効な日付を入力したりすることが可能です（例えば 4 月 32 日など）。

`min` および `max` を使用して有効な日付を制限すると（日付の最大値と最小値の設定を参照）、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。

`required` 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。

日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。

```html
<form>
  <label>
    推奨したいパーティーの日を選択してください (必須、4月1日～20日):
    <input
 type="date"
 name="party"
 min="2017-04-01"
 max="2017-04-20"
 required />
    <span class="validity"></span>
  </label>

  <p>
    <button>送信</button>
  </p>
</form>
```

不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。

上記の例で使用されている CSS です。 `:valid` および `:invalid` 擬似要素を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の `<span>` に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

```css
label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

**警告:** クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。

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

この入力型に対応していないブラウザーでは、テキスト入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性（表示されるコントロールが異なること）とデータの扱い方の両方で問題を生みます。

2 番目の問題はより深刻です。 date 入力型に対応していると、値が `yyyy-mm-dd` の書式で正規化されます。しかし、テキスト入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。

* `ddmmyyyy`
* `dd/mm/yyyy`
* `mm/dd/yyyy`
* `dd-mm-yyyy`
* `mm-dd-yyyy`
* `Month dd, yyyy`

これを回避する方法の一つは、日付入力欄に `pattern` 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力に代替されたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。

```html
<form>
  <label
 >誕生日を入力してください。
    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
  <p>
    <button>送信</button>
  </p>
</form>
```

送信ボタンを押すと、入力が `####-##-##` のパターン (`#` は数字の 0 から 9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。
```

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 jQuery date picker のような JavaScript ライブラリーを使用することです。

例
-

この例では、日付を選択するユーザーインターフェイスの要素を 2 組作成します。ネイティブの `<input type="date">` による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、 3 つの `<select>` 要素です。

### 結果

### HTML

HTML は次のようになります。

```html
<form>
  <div class="nativeDatePicker">
    <label for="bday">誕生日を入力してください。</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">誕生日を入力してください。</p>
  <div class="fallbackDatePicker">
    <span>
      <select id="year" name="year"></select>
      <label for="year">年</label>
    </span>
    <span>
      <select id="month" name="month">
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
      </select>
      <label for="month">月</label>
    </span>
    <span>
      <select id="day" name="day"></select>
      <label for="day">日</label>
    </span>
  </div>
</form>
```

月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます（どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください）。
```

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

### JavaScript

もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが `<input type="date">` に対応しているかどうかを検出するためのものです。

新たな `<input>` 要素を生成し、その `type` を `date` に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 `text` が返されます。これは、 `date` 型が `text` 型へ代替されるためです。 `<input type="date">` に対応していない場合は、ネイティブの日付選択を非表示にして、代替の (`<select>`) 表示します。

```js
// 変数を定義
const nativePicker = document.querySelector(".nativeDatePicker");
const fallbackPicker = document.querySelector(".fallbackDatePicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const monthSelect = document.querySelector("#month");
const daySelect = document.querySelector("#day");

// 最初は代替を隠す
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// 新しい日付入力が文字列入力に代替されるかどうか
const test = document.createElement("input");

try {
  test.type = "date";
} catch (e) {
  console.log(e.message);
}

// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する
if (test.type === "text") {
  // ネイティブの日付選択を隠して代替版を表示
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // 年と日を動的に生成する
  // （月は常に同じなのでハードコーディング）
  populateDays(monthSelect.value);
  populateYears();
}

function populateDays(month) {
  // delete the current set of <option> elements out of the
  // day <select>, ready for the next set to be injected
  while (daySelect.firstChild) {
    daySelect.removeChild(daySelect.firstChild);
  }

  // 挿入する日数を保持する変数を作成
  let dayNum;

  // 31 日か 30 日か？
  if (["1", "3", "5", "7", "8", "10", "12"].includes(month)) {
    dayNum = 31;
  } else if (["4", "6", "9", "11"].includes(month)) {
    dayNum = 30;
  } else {
    // 2 月の場合は、閏年かどうかを計算する
    const year = yearSelect.value;
    const isLeap = new Date(year, 1, 29).getMonth() === 1;
    dayNum = isLeap ? 29 : 28;
  }

  // <select> に正しい数の新しい <option> 要素を挿入
  for (let i = 1; i <= dayNum; i++) {
    const option = document.createElement("option");
    option.textContent = i;
    daySelect.appendChild(option);
  }

  // 前回の日が既に設定されていたら、 daySelect の値を
  // 日に設定し、年を変えたときに1に戻ることを
  // 避ける
  if (previousDay) {
    daySelect.value = previousDay;

    // 前回設定されていた日が大きい数字、例えば31であり、
    // その後で日数が少ない月 (例えば2月) を選択した場合、
    // このコードで空欄の日選択を表示するのではなく、
    // 利用可能な最大の日を選択するように保証する
    if (daySelect.value === "") {
      daySelect.value = previousDay - 1;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 2;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 3;
    }
  }
}

function populateYears() {
  // 今年を数値として取得
  const date = new Date();
  const year = date.getFullYear();

  // 今年から 100 年前までの年が <select> で選択できるようにする
  for (let i = 0; i <= 100; i++) {
    const option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

// 年や月の <select> 値が変更されたら、 populateDays() を
// 再実行して日数を調整する
yearSelect.onchange = () => {
  populateDays(monthSelect.value);
};

monthSelect.onchange = () => {
  populateDays(monthSelect.value);
};

// 日の選択を保存
let previousDay;

// 以前どの日が設定されていたかを保存する
// 使い方は populateDays() を参照
daySelect.onchange = () => {
  previousDay = daySelect.value;
};
```

**メモ:** 53 週ある年もあることを忘れないでください（年あたりの週数を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 文字列で、 YYYY-MM-DD 形式の日付、または空欄を表します |
| **イベント** | `change` および `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `readonly`,
 `step` |
| **IDL 属性** | `list`, `value`, `valueAsDate`,
 `valueAsNumber` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `stepDown()`,
 `stepUp()` |
| **暗黙の ARIA ロール** | `no corresponding role` |

仕様書
---

| Specification |
| --- |
| HTML Standard # date-state-(type=date) |

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

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

関連情報
----

* 全般的な `<input>` およびその操作に使用する`HTMLInputElement` インターフェイス
* 日付と時刻の選択のチュートリアル
* HTML で使われる日付や時刻の形式
* CSS プロパティの互換性


<input type="text"> - HTML: ハイパーテキストマークアップ言語

<input type="text">
===================

`<input>` 要素の **`text`** 型は、基本的な単一行のテキスト入力欄を生成します。

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

値
-

`value` 属性は、テキスト入力欄に入力された現在のテキストの値が入っている文字列です。 JavaScript では `HTMLInputElement` の `value` プロパティを使ってこれを受け取ることができます。

```js
let theText = myTextInput.value;
```

入力欄に検証の制約がない場合（詳しくは検証を参照）、値は空文字列 ("") にすることができます。

追加の属性
-----

型に関係なくすべての `<input>` 要素を操作する属性に加え、 `text` 型の入力欄は次の属性にも対応しています。

### `list`

list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち `type` と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

### `maxlength`

ユーザーが `text` 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、 `text` 入力欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。

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

### `minlength`

ユーザーが `text` 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、 `text` 入力欄には最小文字数が設定されません。

入力欄のテキスト値の長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

### `pattern`

`pattern` 属性は、指定する場合は正規表現であり、入力欄の `value` が制約検証に合格するためにはこれと一致しなければなりません。これは `RegExp` 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

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

**メモ:** `title` 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

詳細や例についてはパターンの指定を参照してください。

### `placeholder`

`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは*できません*。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

**メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、`<input>` のアクセシビリティの考慮を参照してください。

### `readonly`

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement` の `value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### `size`

`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の `font` 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `maxlength` 属性を使用してください。

### `spellcheck`

`spellcheck` はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは `spellcheck` 属性の `<input>` 要素の使用に関して特に考えます。 `spellcheck` で利用できる値は次の通りです。

`false`

この要素でスペルチェックを無効にします。

`true`

この要素でスペルチェックを有効にします。

`""` (空文字列) または値なし

スペルチェックについて、要素の既定の動作に従います。これは親の `spellcheck` 設定や、その他の要因に基づくことがあります。

入力欄では、 readonly 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。

`spellcheck` を読み取ることで返される値は、ユーザーエージェントの設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。

標準外の属性
------

ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。

### `autocorrect`

Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

`on`

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

`off`

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

### `mozactionhint`

Mozilla 拡張で、ユーザーがフィールドを編集中に `Enter` キーや `Return` キーを押した場合に行われるアクションの種類のヒントを提供します。

この属性は非推奨です。代わりにグローバル属性 `enterkeyhint` を使用してください。

テキスト入力欄の使用
----------

`text` 型の `<input>` 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、日付、 URL、メールアドレス、検索語など、もっと良い選択肢が利用できるもの) に使用します。

### 基本的な例

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

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

送信されると、サーバーに送信される名前と値の組のデータは `name=Chris` になります（送信前に入力値として "Chris" が入力された場合）。 `name` 属性を `<input>` 要素に付け忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。

### プレイスホルダーの設定

`placeholder` 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input type="text" id="uname" name="name" placeholder="小文字で一語で" />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

プレイスホルダーがどう表示されるかを以下で確認できます。

プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると（または、 `value` 属性に設定することで、プログラム的に値を設定する場合も）自動的に消滅します。

### 物理的な入力要素の寸法

入力ボックスの物理的な寸法は、 `size` 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input
 type="text"
 id="uname"
 name="name"
 placeholder="小文字で一語で"
 size="30" />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

検証
--

`text` 型の `<input>` 要素には、適用される自動的な検証はありませんが（基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです）、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。

**メモ:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。

### スタイル付けのメモ

ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 `:valid` および `:invalid` です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

このテクニックにはフォーム要素の後に配置される `<span>` 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。

### 入力を必須にする

入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 `required` 属性を使うことができます。

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

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

検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。

### 入力値の長さ

`minlength` 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 `maxlength` を使用して入力された値の最大長を文字数で設定します。

以下の例では、入力値が4～8文字の長さであることが求められます。

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input
 type="text"
 id="uname"
 name="name"
 required
 size="10"
 placeholder="ユーザー名"
 minlength="4"
 maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

以下のように表示されます。

4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます（ブラウザーによって異なります）。 8 文字を超えて入力しようとしても、ブラウザーが許しません。

**メモ:** `minlength` を指定して `required` を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。

### パターンの指定

`pattern` 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます（入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください）。

以下の例では、 4～8 文字の値で、英小文字のみが含まれているという要件の制約を与えます。

```html
<form>
  <div>
    <label for="uname">ユーザー名を選んでください: </label>
    <input
 type="text"
 id="uname"
 name="name"
 required
 size="45"
 pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>ユーザー名は小文字で 4～8 文字でなければなりません。</p>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

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

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

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

例
-

最初の HTML フォームおよび HTML フォームの構成方法の記事の文脈で、良いテキスト入力欄の例を見ることができます。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | テキスト入力欄に含まれるテキストを表す文字列。 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `required`,
 `size` |
| **IDL 属性** | `list`, `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `setRangeText()`,
 `setSelectionRange()` |
| **暗黙の ARIA ロール** | `list` 属性がない場合:
 `textbox` | `list` 属性がある場合: `combobox (en-US)` |

仕様書
---

| Specification |
| --- |
| HTML Standard # text-(type=text)-state-and-search-state-(type=search) |

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

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

関連情報
----

* HTML フォーム
* `<input>` およびそれに基づく `HTMLInputElement` インターフェイス
* `<input type="search">`
* `<textarea>`: 複数行のテキスト入力欄
* CSS プロパティの互換性


<input type="reset"> - HTML: ハイパーテキストマークアップ言語

<input type="reset">
====================

`<input>` 要素の **`reset`** 型はボタンとして表示され、既定の `click` イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。

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

**メモ:** 通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（送信ボタンをクリックしようとしているときにクリックしてしまうことが多いです）。

値
-

`<input type="reset">` 要素の `value` 属性は、ボタンのラベルとして表示される文字列を示します。 `reset` などのボタンは他の値を持ちません。

### value 属性の設定

```html
<input type="reset" value="フォームをリセット" />
```

`value` を指定しなかった場合は、既定のラベルが付いたボタンが表示されます（通常は「リセット」ですが、ユーザーエージェントによって異なります）。

```html
<input type="reset" />
```

リセットボタンの使用
----------

`<input type="reset">` ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 `<input type="button">` またはよりよい `<button>` 要素を使用してください。

### 単純なリセットボタン

単純なリセットボタンを作成するところから始めましょう。

```html
<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" />
  </div>
</form>
```

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

テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。

### リセットのショートカットキーの追加

リセットボタンにショートカットキーを追加するには — あらゆる `<input>` で通用する方法としてと — グローバル属性の `accesskey` を使用します。

この例では、 `r` がアクセスキーとして指定されます (`r` はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります `accesskey` に有益なリストがあります)。

```html
<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" accesskey="r" />
  </div>
</form>
```

上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど）。ボタンにツールチップを追加する（`title` 属性を使う）ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。

### リセットボタンの無効化と有効化

リセットボタンを無効化するには、以下のようにグローバル属性の `disabled` を指定するだけです。

```html
<input type="reset" value="Disabled" disabled />
```

実行時に `disabled` を `true` または `false` に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは `btn.disabled = true` や `btn.disabled = false` のようになります。

**メモ:** ボタンの有効化や無効化についてのより詳しい情報は、 `<input type="button">` のページを参照してください。

検証
--

ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。

例
-

上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | ボタンのラベルとして使用する文字列 |
| **イベント** | `click` |
| **対応している共通属性** | `type` および
 `value` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし |
| **暗黙の ARIA ロール** | `button` |

仕様書
---

| Specification |
| --- |
| HTML Standard # reset-button-state-(type=reset) |

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

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

関連情報
----

* `<input>` およびそれが実装している `HTMLInputElement` インターフェイス
* フォームとボタン
* HTML フォーム
* `<button>` 要素
* CSS プロパティの互換性