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

<input type="datetime-local">
=============================

`<input>` 要素の **`datetime-local`** 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。

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

コントロールのユーザーインターフェイスは、ブラウザーが対応していない場合、このコントロールは単純な `<input type="text">` に格下げされます。

このコントロールは単純に*ローカルの日付と時刻*を表現するためのものであって、*ユーザーのローカルの日付と時刻*を示すとは限りません。言い換えれば、実装では有効な年、月、日、時、分をすべて、仮にその組み合わせがユーザーのタイムゾーンで無効であったとしても (春の夏時間への移行ギャップなど)、許可するべきです。一部のモバイルブラウザーは (特に iOS のものは) これを正しく実装していません。

`datetime-local` は限られたブラウザーしか対応しておらず、入力欄の動作が様々であるため、現在はこれを表示するためにフレームワークやライブラリーを使用するか、独自のカスタム入力欄をした方が良いかもしれません。また、 `date` と `time` の入力欄を別々に使用すると、 `datetime-local` よりも対応が広くなります。

一部のブラウザーでは、テキストのみの入力要素を表示し、結果をサーバーに送信する前に妥当な日付/時刻値であることを検証するものもありますが、予期しない動作をすることがあるので、この動作に頼るべきではありません。

値
-

入力欄に入力された日付の値を表す文字列です。この入力型で使われる日付と時刻の値の形式は、ローカル日時文字列で説明されています。

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

```html
<label for="party">パーティーを予約する日時を入力してください。</label>
<input
 id="party"
 type="datetime-local"
 name="partydate"
 value="2017-06-01T08:30" />
```

一点気を付けなければならないことは、表示される日付と時刻の書式は実際の `value` とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の `value` は常に `YYYY-MM-DDThh:mm` の書式です。例えば、上記の値をサーバーに送信すると、 `partydate=2017-06-01T08:30` のようになります。

**メモ:** このようなデータが HTTP の `GET` を通じて送信されると、コロン文字を URL 引数に含めるために、 `partydate=2017-06-01T08%3A30` のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして `encodeURI()` を参照してください。

次のように、 JavaScript で `HTMLInputElement` の `value` プロパティを使用して日付の値を取得したり設定したりすることもできます。

```js
const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";
```

JavaScript の `Date` では、数値の日付情報を適切な書式化された文字列に変換するために使用することができるメソッドがいくつか提供されています。例えば `Date.toISOString()` メソッドは UTC の日付/時刻を、そのタイムゾーンを表す接尾辞 "`Z`" とともに返します。"`Z`" を取り除くと、 `datetime-local` 入力が期待する形式の値を提供することができます。

追加の属性
-----

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

### max

受け付ける最新の日時です。要素に入力された `value` がこのタイムスタンプよりも後の場合、要素は制約検証に失敗します。 `max` 属性の値が `YYYY-MM-DDThh:mm` の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。

この値は `min` 属性で指定されたものより後か、同じ日付を指定する必要があります。

### min

受け付ける最古の日時です。これより前のタイムスタンプの場合、要素は制約検証に失敗します。 `min` 属性の値が `YYYY-MM-DDThh:mm` の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。

この値は `max` 属性で指定されたものより前か、同じ日付を指定する必要があります。

### step

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

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

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

`datetime-local` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。

*現時点で、 `datetime-local` 入力欄で `step` に `any` の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。*

datetime-local 入力の使用
--------------------

日付や時刻の入力欄は一見すると便利に見えます。簡単に日付と時刻を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 `<input type="datetime-local">` には問題があります。

`<input type="datetime-local">` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう (ブラウザーの対応の扱いを参照してください)。

### datetime-local の基本的な使用

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

```html
<form>
  <label for="party">パーティーを予約する日時を入力してください。</label>
  <input id="party" type="datetime-local" name="partydate" />
</form>
```

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

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

```html
<form>
  <label for="party">パーティーを予約する日時を入力してください。</label>
  <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30" />
</form>
```

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

* この結果は、 2017 年の 6 月の日付のみが選択できるようになります。文字列値の「日」の部分のみが編集可能となり、日付選択ウィジェットで 6 月以外にスクロールすることはできなくなります。
* どのブラウザーを使用するかによって、指定された値の範囲外の時刻が時刻選択画面で選択できなかったり (Edge など)、無効な値（検証を参照）であっても設定できたりすることがあります (Chrome など)。

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

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

`<input type="datetime-local">` は、 `size` のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 CSS を使用する必要があります。

### タイムゾーンの設定

`datetime-local` 入力型はコントロールのタイムゾーンやロケールを設定する方法がありません。これは `datetime` 入力型では利用できましたが、この入力型は廃止され、仕様書から削除されました。削除された主な理由はブラウザーの互換性がなく、ユーザーインターフェイスや使い勝手が決まっていなかったからです。単に日付と時刻を設定するコントロールを用意して、別なコントロールで地域を設定したほうが簡単です。

例えば、ユーザーがログインしている場所によって地域を設定するようなシステムを開発する場合、タイムゾーンを `hidden` 入力型で次のように提供することができます。

```html
<input type="hidden" id="timezone" name="timezone" value="-08:00" />
```

一方、ユーザーに日時入力と共にタイムゾーンを入力できるようにする必要がある場合、 `<select>` 要素などでタイムゾーンを入力する手段を提供することができます。

```html
<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>
```

どちらの場合も、日時の値とタイムゾーンの値はサーバーに別々のデータポイントとして送信されるため、サーバー側のデータベースに適切に格納する必要があります。

検証
--

既定では、 `<input type="datetime-local">` は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも入力欄を空のままにしたり、 (`text` 型にフォールバックするブラウザーにおいて) 無効な日付 (例えば 4 月 32 日など) を入力したりすることが可能です。

`min` および `max` を使用して有効な日付を制限したり (日付の最大値と最小値の設定を参照)、 `required` 属性を使用して日時の入力を必須にしたりすることができます。その結果、対応しているブラウザーでは、範囲を外れた日付や空の日付欄を送信しようとするとエラーが表示されるでしょう。

例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。

```html
<form>
  <div>
    <label for="party">
      希望するパーティーの日時を選択して下さい (必須、 6 月 1 日午前 8:30 ～ 6
      月 30 日午後 4:30)
    </label>
    <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="予約する！" />
  </div>
</form>
```

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

上記の例の CSS です。 CSS の `:valid` および `:invalid` プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の `<span>` に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

```css
div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

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

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

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

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

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

2 番目の問題はより深刻です。すでに述べたように、 `datetime-local` 入力欄では、実際の値が常に `YYYY-MM-DDThh:mm` の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは日付がどの書式で入力されるかの認識がなく、以下のように人間が日付と時刻を書く様々な方法で入力される可能性があります。

* `DDMMYYYY`
* `DD/MM/YYYY`
* `MM/DD/YYYY`
* `DD-MM-YYYY`
* `MM-DD-YYYY`
* `MM-DD-YYYY hh:mm` (12 時制)
* `MM-DD-YYYY HH:mm` (24 時制)
* など

これを回避する方法の一つは、日付入力欄に `pattern` 属性を付けることです。日付入力欄はこれを使用しないので、 `text` 入力欄にフォールバックされたときは使用します。例えば、次の例を未対応のブラウザーで見てみてください。

```html
<form>
  <div>
    <label for="party">
      希望するパーティーの日時を選択して下さい (必須、 6 月 1 日午前 8:30 ～ 6
      月 30 日午後 4:30)
    </label>
    <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30"
 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="予約する！" />
  </div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
</form>
```

`nnnn-nn-nnTnn:nn` のパターン (`n` は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。

また、日付や時刻を入力するパターンをどうやってユーザーに理解させればよいのでしょうか？

まだ問題があります。
```

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span::after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span::after {
  content: "✓";
  position: absolute;
  right: -18px;
}
```

ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、現時点では年月日を別々なコントロール (`<select>` 要素が一般的です。以下の実装を見てください) にするか、 jQuery date picker や jQuery timepicker plugin のような JavaScript ライブラリを使用することです。

2038 年問題（主にサーバー側）
-----------------

JavaScript は日付を格納するとき、すべての数値と同様に、倍精度浮動小数点を使用しますので、 JavaScript のコードは整数への変換やビット操作が行われない限り、2038 年問題に悩まされることはありません。ビット操作演算は、 32 ビットの符号付き 2 の補数で演算を行っているので影響を受ける可能性があります。

問題はサーバー側で、 2^31 - 1 よりも大きな日付値を格納する場合です。この問題を解決するには、すべての日付を符号なしの 32 ビット整数、符号付きの 64 ビット整数、または倍精度の浮動小数点のいずれかでサーバーに格納する必要があります。サーバーが PHP で書かれている場合は、PHP 8 または 7 にアップグレードし、ハードウェアを x86\_64 または IA64 にアップグレードするだけで解決できるかもしれません。他のハードウェアで行き詰っている場合は、 32 ビット仮想マシン内で 64 ビットハードウェアをエミュレートすることもできますが、ほとんどの仮想マシンはこの種の仮想化をサポートしていないため、安定性が損なわれ、性能が大きく低下する可能性があります。

10000 年問題（主にクライアント側）
--------------------

多くのサーバーでは、日付は文字列ではなく数値として格納されます。数値は固定された大きさで、（エンディアンを除けば）形式にとらわれません。10,000 年以降は、これらの数字は以前よりも少し大きくなるだけなので、多くのサーバーでは 10,000 年以降をフォームで送信しても問題が発生することはありません。

問題はクライアント側の問題です。年に 4 桁以上の数字を持つ日付の解析です。

```html
<!--midnight of January 1st, 10000: the exact time of Y10K-->
<input type="datetime-local" value="+010000-01-01T05:00" />
```

単純なことです。何桁でもいいコードを用意するだけです。 5 桁の数字だけを用意するのではありません。プログラムで値を設定するための JavaScript のコードを紹介します。

```js
function setValue(element, date) {
  const isoString = date.toISOString();
  element.value = isoString.substring(0, isoString.indexOf("T") + 6);
}
```

もしこれがあなたの死後何世紀も経ってから起こるのであれば、なぜ 10,000 年問題を心配するのかでしょうか。その通り、あなたはすでに死んでいるので、あなたのソフトウェアを使っている企業は、システムを十分に知っている他のコーダーが入ってきてそれを修正することなく、あなたのソフトウェアを使うと行き詰まってしまうからです。

例
-

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

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

```html
<form>
  <div class="nativeDateTimePicker">
    <label for="party">希望するパーティーの日時を選択して下さい。</label>
    <input type="datetime-local" id="party" name="bday" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">希望するパーティーの日時を選択して下さい。</p>
  <div class="fallbackDateTimePicker">
    <div>
      <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>
    <div>
      <span>
        <select id="hour" name="hour">
          <label for="hour">時</label>
        </select>
      </span>
      <span>
        <select id="minute" name="minute">
          <label for="minute">分</label>
        </select>
      </span>
    </div>
  </div>
</form>
```

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

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

input[type="number"] {
  width: 100px;
}

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

もう一つの面白い部分は、機能の検出コードです。ブラウザーが `<input type="datetime-local">` に対応しているかどうかを検出するために、新たな `<input>` 要素を生成し、その `type` を `datetime-local` に設定してみて、すぐに type に何が設定されたかをチェックします。 `datetime-local` 型に対応していないブラウザーでは、 `datetime-local` 型が `text` 型へフォールバックされます。 `<input type="datetime-local">` に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の (`<select>`) による選択ユーザーインターフェイスを表示します。

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

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

// 最初はフォールバックを非表示にする
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// 新しい日付入力が文字列入力にフォールバックされるかどうか
const test = document.createElement("input");

try {
  test.type = "datetime-local";
} catch (e) {
  console.log(e.description);
}

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

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

function populateDays(month) {
  // 日の <select> から現在の一連の <option> 要素を削除し、
  // 挿入のための準備をする
  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);
  }
}

function populateHours() {
  // populate the hours <select> with the 24 hours of the day
  for (let i = 0; i <= 23; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes <select> with the 60 hours of each minute
  for (let i = 0; i <= 59; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    minuteSelect.appendChild(option);
  }
}

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

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

//日数を保存
let previousDay;

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

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

技術的概要
-----

|  |  |
| --- | --- |
| **値** | （ローカルタイムゾーンでの）日付と時刻を表す文字列、または空欄。 |
| **イベント** | `change` および `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `readonly`,
 `step` |
| **IDL 属性** | `list`, `value`, `valueAsNumber`. |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `stepDown()`,
 `stepUp()` |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

| Specification |
| --- |
| HTML Standard # local-date-and-time-state-(type=datetime-local) |

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

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

関連情報
----

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


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

<input type="url">
==================

`<input>` 要素の **`url`** 型は、ユーザーに URL を入力および編集させるために使用します。

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

入力値はフォームの送信前に自動的に検証され、空欄または正しい形式の URL のどちらかであることが確認されます。 CSS の `:valid` および `:invalid` 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当な URL であるかどうかを視覚的に示します。

`url` 型に対応していないブラウザーでは、 `url` 入力欄は標準の text 入力欄で代替されます。

値
-

`<input>` 要素の `value` 属性には、自動的に URL の構文として検証される文字列が入ります。より具体的に言うと、検証を通る値の書式は下記の 2 通りがあります。

1. 空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。
2. 単一の正しい形式の絶対 URL。 URL が実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 `urlscheme://restofurl` の形です。

検証の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。

追加の属性
-----

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

### list

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

### maxlength

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

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

### minlength

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

入力欄の URL の長さが 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` を使用してください。

URL 入力欄の使用
----------

URL 入力欄を `type` に適切な値 `url` を指定して作成すると、入力されたテキストが少なくとも正規の URL となり得る正しい形式であることを自動的に検証することができるようになります。これにより、ユーザーが自分のウェブサイトのアドレスを間違って入力したり、無効なアドレスを入力したりすることを避けることができます。

しかし、指定されたテキストが実際に存在する URL であるか、サイトのユーザーに対応しているか、またはその他の方法で受け入れられるかを確認するには、これだけでは不十分であることに注意することが重要です。これは、フィールドの値が URL として適切にフォーマットされていることを保証するものです。

**メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。

### 単純な URL 入力欄

現在、この要素を実装しているすべてのブラウザーは、基本的な検証機能を備えた標準的なテキスト入力フィールドとして実装しています。最も基本的な形として、 URL 入力は次のように実装することができます。

```html
<input id="myURL" name="myURL" type="url" />
```

有効と見なされるのは空欄のときと、有効な書式の URL アドレスが 1 つだけ入力されたときであり、それ以外のときは無効とみなされることに注意してください。 `required` 属性を追加すると、適切な書式の URL のみが許可されるようになり、空の場合は入力が有効であるとは見なされなくなります。

ここでは何も不思議なことは起こりません。サーバーに送信されると、上記の入力のデータは、例えば `myURL=http%3A%2F%2Fwww.example.com` のように表現されます。文字が必要に応じてエスケープされていることに注意してください。

### プレイスホルダー

入力データがどのような形式を取るべきか、文脈上のヒントを提供することが役立つ場合があります。これは、ページのデザインがそれぞれの `<input>` に説明的なラベルを提供していない場合に特に重要になることがあります。ここが**プレイスホルダー**の登場する場面です。プレイスホルダーは `value` が取るべきフォームを示す値で、有効な値の例を提示します。この値は要素の `value` が `""` の時にエディットボックス内に表示されます。ボックスにデータが入力されると、プレイスホルダーが消え、ボックスが空になると、プレイスホルダーが再び表示されます。

ここでは、 `url` 入力欄に `http://www.example.com` というプレイスホルダーが設定されています。編集フィールドの内容を操作すると、プレイスホルダーが消えたり現れたりすることに注意してください。

```html
<input
 id="myURL"
 name="myURL"
 type="url"
 placeholder="http://www.example.com" />
```

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

入力ボックスの物理的な長さだけでなく、入力テキスト自体に許される最小・最大の長さも制御することができます。

#### 物理的な入力欄の寸法

入力ボックスの物理的な大きさは、 `size` 属性で制御することが可能です。この属性により、入力ボックスが一度に表示できる文字数を指定することができます。この例では、例えば `url` のエディットボックスの幅は 30 文字です。

```html
<input id="myURL" name="myURL" type="url" size="30" />
```

#### 要素の値の長さ

`size` は、入力される URL の長さの制限とは別のものです。入力される URL の長さの最小値は `minlength` 属性で指定でき、同様に、入力される URL の長さの最大値は `maxlength` 属性で設定することができます。もし `maxlength` が `size` を超えている場合は、入力ボックスの内容が操作されたときに、現在の選択部分や挿入部分を表示するために、必要に応じてスクロールします。

以下の例では、幅 30 文字の URL 入力ボックスを生成し、入力内容が 10 文字以上 80 文字以下であることを要求しています。

```html
<input
 id="myURL"
 name="myURL"
 type="url"
 size="30"
 minlength="10"
 maxlength="80" />
```

**メモ:** 上記の属性は検証に影響します。最短長より短い値や最大長より長い値の入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。

### 既定のオプションの提供

#### value 属性を言使用した単一の既定値の提供

他と同様に、 `url` 入力欄に `value` 属性を設定することで既定値を指定することができます。

```html
<input id="myURL" name="myURL" type="url" value="http://www.example.com" />
```

#### 提案値の提供

さらに一歩進んで、既定の選択肢のリストを用意し、そこからユーザーが選択できるようにすることも可能です。これには `list` 属性を使用します。これはユーザーをこれらの選択肢に限定しませんが、よく使われる URL をより迅速に選択できるようにします。これは `autocomplete` へのヒントも提供します。 `list` 属性は `<datalist>` 要素の ID を指定し、この要素は 1 つの提案値につき 1 つの `<option>` 要素を含んでおり、それぞれの `option` の `value` は URL 入力ボックスの対応する提案値となっています。

```html
<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>
```

`<datalist>` 要素とその `<option>` が配置されると、ブラウザーは URL の候補として指定された値を提供します。これは通常、候補を含むポップアップまたはドロップダウンメニューとして表示されます。具体的な使い勝手はブラウザーによって異なるかもしれませんが、通常、編集ボックスをクリックすると、提案された URL がドロップダウンで表示されます。その後、ユーザーが文字を入力すると、リストが調整され、フィルタリングされた一致する値のみが表示されます。ユーザーが選択するか、独自の値を入力するまで、入力された文字ごとにリストが絞り込まれます。

#### 提案値のラベルの使用

`label` 属性を 1 つまたはすべての `<option>` 要素に設定することで、テキストのラベルを提供することができます。ブラウザーによっては、ラベルのみを表示するものもあれば、ラベルと URL の両方を表示するものもあります。

```html
<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>
```

検証
--

`url` 入力欄で利用できる内容の検証には 2 つのレベルがあります。まず、すべての `<input>` で提供される標準的なレベルの検証があります。これは、入力内容が有効な URL であるための要件を満たしているかどうかを自動的に確認するものです。しかし、もし特別なニーズがあるなら、それを満たすために追加のフィルタリングを追加するオプションもあります。

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

### 基本的な検証

`url` 入力型に対応しているブラウザーは、自動的に検証を行い、 URL の標準の書式に一致するテキストのみが入力ボックスに入力されることを保証します。

URL の構文はかなり入り組んでいます。 WHATWG の URL Living Standard で定義されており、私たちの記事 What is a URL? で初めての人のために説明されています。

### URL を必須にする

前述のように、フォームを送信する前に URL の入力を必須にする (フィールドを空白にできない) には、入力に `required` 属性を含めるだけでよいのです。

```html
<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>送信</button>
</form>
```

上記のフォームに値を入力せずに送信してみて、どうなるか試してみてください。

### パターンによる検証

入力された URL を、単なる「URL に見える文字列」よりも制限し、特定のパターンに適合させたい場合は、`pattern` 属性を使用してください。この属性は、入力された値が一致すべき正規表現を値として取ります。

例えば、 Myco, Inc. の従業員向けに、あるページに問題があった場合に IT 部門に問い合わせるためのサポートページを作るとします。この単純化したフォームでは、ユーザーは問題のあるページの URL と、何が問題なのかを説明するメッセージを入力する必要があります。しかし、入力された URL が Myco のドメインにある場合にのみ、 URL の検証に成功するようにしたいのです。

`url` 型の入力は、標準の URL バリデーション*および*指定された `pattern` の両方に対して検証されるので、簡単に実装することができます。では、その方法を見てみましょう。
```

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

input[type="number"] {
  width: 100px;
}

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
<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input
 id="myURL"
 name="myURL"
 type="url"
 required
 pattern=".\*\.myco\..\*"
 title="The URL must be in a Myco domain" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">What is the problem?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

まず、 `required`t/input#required)t/input#required) 属性が指定されており、有効なメールアドレスの入力が必須になっています。

次に、 `url` 入力欄の `pattern` を `".*\.myco\..*"` に設定しました。このシンプルな正規表現は、文字列が任意の数の文字の後に、ドット、 "myco" 、ドット、そして任意の数の文字が続くことを要求します。ブラウザーは標準的な URL フィルター*および*指定されたテキストに対する独自のパターンの両方を実行するため、「これが有効な URL であり、かつ Myco ドメインであることを確認する」という検証を行うことになります。

これは完全ではありませんが、この単純なデモの要件では十分です。

`title` 属性を `pattern` と併用することをお勧めします。その場合、 `title` でパターンを説明する必要があります。つまり、他の情報ではなく、データがどのような形式を取るべきかを説明してください。これは、 `title` が検証エラーメッセージの一部として表示されたり、読み上げられたりする可能性があるからです。例えば、ブラウザーが「入力された値がフィールドに指定された書式と異なります。」というメッセージの後に、あなたが指定した `title` を表示するかもしれません。もし `title` が "URL" のようなものであれば、結果は「入力された値がフィールドに指定された書式と異なります。 URL」というメッセージになり、あまり良いものではなくなります。

そのため、「URL は myco ドメインのものを入力してください」という文字列を指定しています。こうすることで、エラーメッセージ全体が「入力された値がフィールドに指定された書式と異なります。URL は myco ドメインのものを入力してください。」のようになります。

**メモ:** もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。

例
-

`url` 型の入力欄について他に言うことはありません。数々の例については、パターンによる検証と URL 入力欄の使用の節で確認してください。

GitHub 上のパターン検証の例（ライブ例も参照してください）もあります。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* HTML フォームガイド
* `<input>`
* `<input type="tel">`
* `<input type="email">`
* CSS プロパティの互換性


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

<input type="file">
===================

`<input>` 要素の **`type="file"`** 型は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルはフォーム投稿を使用してサーバーにアップロードしたり、JavaScript コードとファイル API を使用して操作したりすることができます。

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

値
-

ファイル入力欄の `value` 属性には、選択されたファイルへのパスを表す文字列が入ります。ファイルが選択されていない場合は、値は空文字列 (`""`) になります。ユーザーが複数のファイルを選択すると、`value` は選択されたファイルのリストのうち最初のファイルを表します。その他のファイルは input 要素の `HTMLInputElement.files` プロパティを使って得ることができます。

**メモ:** 文字列には常に `C:\fakepath\` の接頭辞が付き、ファイルの実際のパスにはなりません。疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するためです。

追加の属性
-----

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

### accept

`accept` 属性の値は文字列で、ファイル入力欄が受け付けるファイル型を定義します。この文字列は **固有ファイル型指定子** をカンマで区切ったリストです。指定されたファイル型が複数の方法で識別されることがあるので、指定された形式のファイルが必要な場合は一連の型指定子を提供するといいでしょう。

例えば、 Microsoft Word ファイルを識別する方法がいくつもあるので、 Word ファイルを受け付けるサイトは次のように `<input>` を使用することがあります。

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

### capture

`capture` 属性は文字列で、 `accept` 属性で入力が画像または映像データであると示した場合、これらのデータを取り込むためにどのカメラを使用するかを指定します。 `user` の値では、ユーザーの方を向いているカメラやマイクを使用します。 `environment` は外側を向いたカメラやマイクを使用します。この属性がない場合、ユーザーエージェントは何をするかを自分で自由に決めます。要求された方向が有効ではない場合、ユーザーエージェントは推奨される既定のモードで代用します。

**メモ:** `capture` は以前は論理値であり、存在した場合、ファイル入力を要求する代わりに、カメラやマイクなどその端末のメディア取り込み機器を使用するように要求していました。

### multiple

`multiple` 論理属性が指定されていると、ファイル入力欄はユーザーに複数のファイルを選択することを許します。

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

上記に挙げた属性に加え、以下の標準外の属性が一部のブラウザーで利用できます。実装していないブラウザーではコードが機能する可能性が制限されるため、できれば使用することを避けてください。

### `webkitdirectory`

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

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

固有ファイル型指定子
----------

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

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

`accept` 属性は、これらの固有ファイル型指定子を 1 つ以上含む文字列を取ります。例えば、ファイル選択ダイアログが画像として表示することができるコンテンツを必要としており、標準の画像形式と PDF ファイルの両方を含める場合、このようになります。

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

ファイル入力欄の使用
----------

### 基本的な例

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">アップロードするファイルを選択してください</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

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

これは以下のような出力になります。

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

ユーザーの端末やオペレーティングシステムに関わらず、ファイル入力欄にはユーザーがファイルを選択することができるファイル選択ダイアログを開くボタンがあります。

上記のように、 `multiple` 属性を含めると、複数のファイルを一度に選択することができることを指定します。ユーザーはファイル選択ダイアログから、プラットフォームが許す方法（例えば、 `Shift` または `Control` を押しながらクリック）によって、複数のファイルを選択できます。ユーザーに `<input>` あたり 1 つのファイルを選択させたい場合は、 `multiple` 属性を省略してください。

### 選択されたファイルの情報の取得

選択されたファイルは、この要素の `HTMLInputElement.files` プロパティで返され、これは `File` オブジェクトのリストを含む `FileList` オブジェクトです。 `FileList` は配列のようにふるまうので、 `length` プロパティを使用して選択されたファイルの数を取得することができます。

それぞれの `File` オブジェクトは以下のような情報を持っています。

`name`

ファイルの名前です。

`lastModified`

ファイルが最後に変更された日時を表す数値で、 UNIX 時刻 (1970 年 1 月 1 日午前 0 時) からの経過ミリ秒数です。

`lastModifiedDate`
非推奨

ファイルが最後に変更された日時を表す `Date` オブジェクトです。*これは非推奨であり使うべきではありません。代わりに `lastModified` を使用してください。*

`size`

バイト数によるファイルサイズです。

`type`

ファイルの MIME タイプです。

`webkitRelativePath`
Non-standard

ディレクトリ選択ダイアログ (つまり、 `webkitdirectory` 属性が設定されている `file` ダイアログ) で選択されたベースディレクトリからのファイルの相対パスを表す文字列です。*これは標準外なので使用するには注意してください。*

**メモ:** 最近のブラウザーはすべて、 `HTMLInputElement.files` の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン 57 で追加されました (see Firefox バグ 1384030)。

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

ふつう、ユーザーが自由な形式のファイルを選択できるようにはしたくないでしょう。代わりに、特定の形式のファイルを選択させたいでしょう。例えば、ファイル入力欄でユーザーにプロフィールファイルをアップロードさせるのであれば、おそらく JPEG または PNG のようなウェブに互換性がある画像形式を選択させたいでしょう。

受付可能なファイル形式は `accept` 属性で、受け付けるファイルの拡張子または MIME タイプいくつか例を示します。

* `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付けます。
* `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付けます。
* `accept="image/*"` — `image/*` の MIME タイプである任意のファイルを受け付けます。 (多くのモバイル端末では、この場合にユーザーがカメラで写真を撮ることもできるようになっています。)
* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思われるファイルをすべて受け付けます。

もっと複雑な例を見てみましょう。

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile\_pic">アップロードするファイルを選択してください</label>
    <input
 type="file"
 id="profile\_pic"
 name="profile\_pic"
 accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

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

これは前回の例と似た外見の出力をします。

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

同じように見えるかもしれませんが、この入力欄でファイルを選択しようとすると、このファイル選択ダイアログでは `accept` の値で指定されたファイル形式しか選択できません。 (細かい動きはブラウザーやオペレーティングシステムによって異なります)。

`accept` 属性は選択されたファイルの形式を検証しません。単にブラウザーにユーザーが正しいファイル形式を選択するためのガイドするためのヒントを出すだけです。 (多くの場合) ユーザーがファイル選択ダイアログオプションを切り替えることで、ファイル選択ダイアログがこの設定を上書きして任意のファイルを選択することができるので、不正なファイル形式を選択する可能性があります。

このため、 `accept` 属性は適切なサーバー側の検証でバックアップする必要があることを意識しておいてください。

### 注

1. スクリプトからファイル選択ダイアログの値を設定することはできません。 — 以下のようにしても効果はありません。

```js
const input = document.querySelector("input[type=file]");
input.value = "foo";
```

2. `<input type="file">` を使用してファイルが選択された場合、セキュリティ上の理由から、元のファイルへの実際のパスが `value` 属性上では見えないようになっています。その代わりに、ファイル名の先頭に `C:\fakepath\` を追加したものが表示されます。この処置にはいくつかの経緯上の理由がありますが、すべての最新のブラウザーで対応されており、実際に仕様書で定義されています。
例
-

この例では、この例では、 `HTMLInputElement.files` プロパティで利用できるファイル情報を利用する、さらに高度なファイル選択ダイアログを示し、またいくつか巧妙なテクニックを示します。

**メモ:** この例の完全なソースコードは GitHub — file-example.html (ライブ版もあります) で見ることができます。 CSS については説明しません。 JavaScript が中心です。

最初に、 HTML を見てみましょう。

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image\_uploads"
 >アップロードする画像を選択してください (PNG, JPG)</label
 >
    <input
 type="file"
 id="image\_uploads"
 name="image\_uploads"
 accept=".jpg, .jpeg, .png"
 multiple />
  </div>
  <div class="preview">
    <p>アップロードするファイルが選択されていません</p>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

```
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
```

これは以前見たものに似ています。特筆するべきものはありません。

次に、 JavaScript を一通り見てみましょう。

スクリプトの最初の行で、フォームの入力欄自体と `.preview` クラスが設定された `<div>` 要素の参照を取得します。次に `<input>` 要素を非表示にします。 — これは、ファイル入力欄が概して醜く、スタイル付けをするのが難しく、ブラウザー間でデザインに一貫性がないからです。 `<label>` をクリックすることで `input` 要素をアクティブ化することができるので、 `input` 要素を見かけは非表示にしてラベルをボタンらしくしたほうが、ユーザーがファイルをアップロードしたいときの操作が分かります。

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

input.style.opacity = 0;
```

**メモ:** ファイル入力欄を非表示にするために `opacity` を使用し、 `visibility: hidden` や `display: none` を使用しないのは、支援技術が後二者のファイル入力欄が対話可能ではないと解釈するからです。

次に、イベントリスナーを入力欄に追加して、選択された値の変化 (この場合、ファイルが選択されたこと) を監視します。イベントリスナーは独自の `updateImageDisplay()` 関数を呼び出します。

```js
input.addEventListener("change", updateImageDisplay);
```

`updateImageDisplay()` 関数が呼び出されるたびに、以下のことを行います。

* `while` ループを使ってプレビューの `<div>` の中にある以前のコンテンツを空にします。
* 選択されたすべてのファイルの情報を持つ `FileList` オブジェクトを取り、 `curFiles` と呼ばれる変数に保存します。
* `curFiles.length` が 0 かどうかをチェックすることで、ファイルが選択されていないかを確認します。選択されていない場合は、プレビューの `<div>` に選択されているファイルがない旨のメッセージを表示します。
* ファイルが選択されて*いた*場合、ループで 1 つずつ、プレビューの `<div>` にそれについての情報を表示します。特筆するべきは次です。
* 独自の `validFileType()` 関数を使用して、ファイルが正しい形式 (つまり、 `accept` 属性で指定された画像形式) であるかどうかをチェックします。
* そうであるなら、次のことを行います。
    + ファイルの名前とファイルサイズを、前述の `<div>` (`file.name` および `file.size` で取得) 内のリストアイテムに出力します。独自の `returnFileSize()` 関数はファイルサイズを バイト/KB/MB のうち適切な形式で返します (既定でブラウザーは長さを絶対的なバイトで返します)。
    + `URL.createObjectURL(curFiles[i])` を呼び出して、画像のプレビューのサムネイルを生成します。次に、新しい `<img>` を生成し、その `src` をサムネイルに設定することで、リスト項目にも画像を挿入します。
* ファイル形式が無効である場合、リストのアイテム内にメッセージを表示して、ユーザーに別なファイル形式を選択する必要があることを伝えます。

```js
function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if (curFiles.length === 0) {
    const para = document.createElement("p");
    para.textContent = "アップロードするファイルが選択されていません";
    preview.appendChild(para);
  } else {
    const list = document.createElement("ol");
    preview.appendChild(list);

    for (const file of curFiles) {
      const listItem = document.createElement("li");
      const para = document.createElement("p");
      if (validFileType(file)) {
        para.textContent = `ファイル名: ${
 file.name
 }, ファイルサイズ: ${returnFileSize(file.size)}.`;
        const image = document.createElement("img");
        image.src = URL.createObjectURL(file);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `ファイル名: ${file.name}: ファイル形式が有効ではありません。選択しなおしてください。`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}
```

独自の `validFileType()` 関数は `File` オブジェクトを引数として取り、それから `Array.prototype.includes()` を使用して、 `fileTypes` の中の値にファイルの `type` プロパティに一致するものがあるかどうかをチェックします。一致するものが見つかった場合は、関数は `true` を返します。一致するものが見つからなければ、 `false` を返します。

```js
// https://developer.mozilla.org/ja/docs/Web/Media/Formats/Image\_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}
```

`returnFileSize()` 関数は数値（現在のファイルの `size` プロパティから取得したバイト数）を取り、バイト/KB/MB のうち適切な形式で返します。

```js
function returnFileSize(number) {
  if (number < 1024) {
    return `${number} バイト`;
  } else if (number >= 1024 && number < 1048576) {
    return `${(number / 1024).toFixed(1)} KB`;
  } else if (number >= 1048576) {
    return `${(number / 1048576).toFixed(1)} MB`;
  }
}
```

この例は次のようにできます。使ってみましょう。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 選択されたファイルのパスを表す文字列です。 |
| **イベント** | `change` および
 `input` |
| **対応する共通属性** | `required` |
| **追加の属性** | `accept`,
 `capture`,
 `multiple` |
| **IDL 属性** | `files` および `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()` |
| **暗黙の ARIA ロール** | `no corresponding role` |

仕様書
---

| Specification |
| --- |
| HTML Standard # file-upload-state-(type=file) |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの利用 — `<input type="file">` およびファイル API に関するたくさんの有用な例も含まれています。
* CSS プロパティの互換性


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

<input type="number">
=====================

`<input>` 要素の **`number`** 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。

ブラウザーによっては、マウスや指先のタップを使用して、値をユーザーが値を増減させるための矢印を提供していることもあります。

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

`number` 型に対応していないブラウザーでは、 `number` 入力欄は `text` 入力欄で代替されます。

値
-

入力欄に入力された数字の値を表す数値です。 `value` 属性に数値を設定することで、次のように入力欄の既定値を設定することができます。

```html
<input id="number" type="number" value="42" />
```

追加の属性
-----

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

### `list`

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

### `max`

この入力欄が受け付ける最大値です。要素に入力された `value` がこれを超えた場合、要素は制約検証に失敗します。 `max` 属性の値が数値でない場合、要素は最大値を持ちません。

この値は `min` 属性の値より大きいか、等しくしなければなりません。

### `min`

この入力欄が受け付ける最小値です。要素の `value` がこれより小さい場合、要素は制約検証に失敗します。 `min` 属性の値が数値でない場合、要素は最小値を持ちません。

この値は `max` 属性の値より小さいか、等しくしなければなりません。

### `placeholder`

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

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

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

### `readonly`

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

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

### `step`

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

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

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

`number` 入力欄の既定の刻み値は `1` であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。

number 入力欄の使用
-------------

`number` 入力型は、増減する数値にのみ、特にスピンボタンによる増減が使い勝手として有益な場合に使用すべきです。 `number` 入力型は、多くの国の郵便番号やクレジットカード番号のような、数字だけで構成されているが、厳密には数値ではない値には適していません。数値以外の入力には、 `<input type="tel">` や他の `<input>` 型で `inputmode` 属性をつけるなど、別の入力型を使うことを検討してみてください。

```html
<input type="text" inputmode="numeric" pattern="\d\*" />
```

`<input type="number">` 要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 `type` の値に正しく `number` を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を 1 つずつ上下するための上下ボタンの組み合わせが表示されます。

**警告:** 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。ブラウザーによって、無効な文字を許可するものとしないものがあります。 Firefox バグ 1398528 を参照してください。

**メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。

モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。

### 単純な数値入力

最も基本的なフォームでは、次のように数値入力を実装することができます。

```html
<label for="ticketNum">購入したいチケット数を入力してください。</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />
```

数値入力は空の場合と単一の数値が入力された場合に妥当とみなされますが、それ以下は無効とみなされます。 `required` 属性が使用された場合は、入力欄が空の場合に妥当とみなされなくなります。

**メモ:** 有効な浮動小数点数を受け入れることができます（つまり、 NaN でも Infinity でもないもの）。

### プレイスホルダー

フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの `<input>` に説明のラベルを付けることができない場合に特に重要になります。ここで**プレイスホルダー**が登場します。プレイスホルダーはほとんどの場合、入力される `value` が取るべき値の形式のヒントを説明するために使用される値です。これは `value` が `""` の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。

ここで、 `number` 入力欄に "`10 の倍数`" というプレイスホルダーを設定します。なお、プレイスホルダーが非表示になったり再表示されたりするのは、入力欄の中身を変更したときです。

```html
<input type="number" placeholder="10 の倍数" />
```

### 刻み幅の制御

既定で、数値を増減させるための増減ボタンは、 1 刻みで値を増減させます。 `step` 属性を設定することで、刻みの量を指定する数値の値を変更できます。上記の例は10の倍数を指定すると言っていますので、 `step` の値を `10` にすることが妥当でしょう。

```html
<input type="number" placeholder="10 の倍数" step="10" />
```

この例で、増減ボタンが値を 1 ずつではなく 10 ずつ増減させることが分かるでしょう。手動で 10 の倍数ではない数値を入力することができますが、無効な値とみなされるでしょう。

### 最小値と最大値の指定

`min` および `max` 属性を使用して、入力欄が保持できる最小値と最大値を指定することができます。例えば、最小値を `0` に、最大値を `100` に設定する例をご紹介しましょう。

```html
<input type="number" placeholder="10 の倍数" step="10" min="0" max="100" />
```

更新したこの版では、増減ボタンで 0 未満や 100 より大きい数値を設定することができないことにお気づきでしょう。手動でこの範囲の外の値を入力することもできますが、無効な値とみなされるでしょう。

### 小数が使用できるようにする

数値入力の問題の一つが、既定で刻みが 1 になっていることです。小数を含む数値（たとえば "1.0"）を入力しようとすると、無効な値とみなされるでしょう。小数が必要な値を入力させたい場合は、これを `step` の値に反映させる必要があります（例えば `step="0.01"` で小数第 2 位まで許可します）。単純な例を示します。

```html
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
```

この例では `0.0` から `10.0` までで、小数第 2 位までの値が許容されます。この例では "9.52" は妥当になりますが、 "9.521" は妥当ではありません。

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

`<input>` 要素で type が `number` の場合、 `size` のような寸法を決める属性には対応していません。入力欄の寸法を変更するには CSS に頼る必要があります。

例えば、入力欄の幅を数字 3 桁の入力に必要なだけの幅に調整するには、 HTML に `id` を設定し、これから入力欄を短くしたときに文字列が表示できなくならないように、プレイスホルダーを短縮します。

```html
<input
 type="number"
 placeholder="x10"
 step="10"
 min="0"
 max="100"
 id="number" />
```

それから、要素の `id` が `#number` である要素の幅を短くします。

```css
#number {
  width: 3em;
}
```

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

### サジェスト値の提供

`list` 属性に、サジェスト値あたり一つの `<option>` 要素を含んだ `<datalist>` の `id` を値として入れることにより、ユーザーの選択することができる既定の選択肢のリストを提供することができます。それぞれの `option` の `value` は、数値入力ボックスのサジェスト値に関係します。

```html
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>
```

検証
--

すでに `number` 入力欄における幾つかの検証機能については言及しましたが、ここで確認してみましょう。

* `<input type="number">` 要素は、数値（または `required` が指定されていない場合は空欄）ではない入力を自動的に違反とします。
* `required` 属性を使用すると、空欄の入力を違反とします。 (つまり、入力欄は埋める*必要があります*。)
* `step` 属性を使用すると、妥当な値を特定の刻みの値 (例えば、10の倍数) に制約することができます。
* `min` および `max` 属性を使用すると、妥当な値の下限と上限を設けることができます。

次の例は上記の機能のすべてを例示しており、また幾らか CSS を用いて、 `input` の値によって、妥当または違反のアイコンを表示するようにします。

```html
<form>
  <div>
    <label for="balloons">風船の注文数 (10の倍数):</label>
    <input
 id="balloons"
 type="number"
 name="balloons"
 step="10"
 min="0"
 max="100"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

様々な違反する値を入力して、フォームを送信しようとしてみてください。例えば、値なし、 0 未満または 100 を超えた値、 10 の倍数ではない値、数値でない値などです。そして、それぞれにおいてブラウザーがどのようなエラーメッセージを表示するかを確認してください。

この例で適用される CSS は以下の通りです。

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

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

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

ここで、 `:invalid` および `:valid` 擬似クラスを用いて、隣の `<span>` 要素の生成コンテンツとして無効または妥当の適切なアイコンを表示し、妥当性の視覚的なインジケーターにすることができます。

別な `<span>` 要素に入れたのは自由度を高めるためです。ブラウザーによっては一部の種類のフォーム入力欄において、あまり効果的に生成コンテンツを表示できないことがあります（`<input type="date">` の検証の節の例を読んでください）。

**警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。

誰かが HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。

サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。

### パターンによる値検証

`<input type="number">` 要素は `pattern` 属性を使用して、入力された値が特定の正規表現パタ ー ンを満たすようにすることに対応していません。

これは、 number 入力欄は数値以外の何が入力されても妥当にはならないからであり、上記で説明したとおり、 `min` および `max` 属性を用いて妥当な数値の最大値および最小値を制約することができます。

例
-

すでに既定では増分が `1` であるという事実を扱いましたので、 `step` 属性を使用して実数を入力できるようにすることができます。もう少し詳しく見てみましょう。

以下の例は、ユーザーの身長を入力するフォームです。既定では慎重をメートル単位で受け付けますが、関連するボタンをクリックすることでフォームがフィートとインチを受け付けるように変更することができます。メートル単位の身長の入力欄は小数第2位まで受け付けます。

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

```html
<form>
  <div class="metersInputGroup">
    <label for="meters">あなたの身長を入力してください (メートル):</label>
    <input
 id="meters"
 type="number"
 name="meters"
 step="0.01"
 min="0"
 placeholder="e.g. 1.78"
 required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup" style="display: none;">
    <span>あなたの身長を入力してください — </span>
    <label for="feet">フィート:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">インチ:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="button" class="meters" value="身長をフィートとインチで入力" />
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 `step` の値を `0.01` に設定して、 *1.78* のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。

最初はフィートとインチの入力欄を `style="display: none;"` を使用して非表示にしているため、既定はメートルでの入力です。

次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。

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

input[type="number"] {
  width: 100px;
}

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

そして最後に、 JavaScript です。

```js
const metersInputGroup = document.querySelector(".metersInputGroup");
const feetInputGroup = document.querySelector(".feetInputGroup");
const metersInput = document.querySelector("#meters");
const feetInput = document.querySelector("#feet");
const inchesInput = document.querySelector("#inches");
const switchBtn = document.querySelector('input[type="button"]');

switchBtn.addEventListener("click", () => {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "身長をメートルで入力";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "身長をフィートとインチで入力";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});
```

いくつかの変数を宣言した後、イベントリスナーを `button` に追加し、切り替えの仕組みを制御しています。これはとても単純で、ほとんどがボタンの `class` と `<label>` を変更するためのものであり、そしてボタンが押されたときに2組の入力の display 値を更新しています。

（なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。）

**メモ:** ユーザーがボタンをクリックしたとき、 `required` 属性を非表示にする入力欄から削除し、 `value` 属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。

これを行わないと、フィート/インチ**と**メートルの両方を入力してフォームを送信することができてしまいます。

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

`<input type="number">` 要素の暗黙のロールは `spinbutton` (en-US) です。もしスピンボタンがフォームコントロールにとって重要な機能でないなら、 `type="number"` を使用しないよう検討してください。代わりに `inputmode="numeric"` を使用し、 `pattern` 属性で文字列を数字とそれに付随する文字に限定してください。 `<input type="number">` では、ユーザーが何か他のことをしようとしているときに、誤って数値を増加してしまう危険性があります。さらに、ユーザーが数字でないものを入力しようとした場合、何が間違っているのか明示的なフィードバックがありません。

また、 `autocomplete` 属性を使用して、ユーザーがよりすばやく、エラーの可能性を低くしてフォームを記入できるようにすることも検討してください。例えば、郵便番号のフィールドで自動補完を有効にするには、 `autocomplete="postal-code"` と設定してください。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 数字を表す `Number`、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `placeholder`,
 `readonly` |
| **IDL 属性** | `list`, `value`, `valueAsNumber` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `stepUp()`,
 `stepDown()` |
| **暗黙の ARIA ロール** | `spinbutton (en-US)` |

仕様書
---

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

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

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

関連情報
----

* HTML フォームガイド
* `<input>`
* `<input type="tel">`
* CSS プロパティの互換性
* Article: Why Gov.UK changed the input type for numbers


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

<input type="checkbox">
=======================

`<input>` 要素の **`checkbox`** 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して（または選択せずに）送信することができます。

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

**メモ:** ラジオボタンはチェックボックスと似ていますが、重要な違いがあります。同じ名前のラジオボタンはグループ化されており、同時に 1 つしか選択できないのに対し、チェックボックスは単一の値をオンにしたりオフにしたり切り替えることができます。複数のコントロールがある場所では、ラジオボタンはその中で一つしか選択できませんが、チェックボックスは複数の値が選択できます。

値
-

チェックボックスの値を表す文字列です。これはクライアント側には表示されませんが、サーバー上ではチェックボックスの `name` と共に送信されるデータに与えられる `value` になります。次の例を見てください。

```html
<form>
  <div>
    <input
 type="checkbox"
 id="subscribeNews"
 name="subscribe"
 value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>
```

この例では、 `name` を `subscribe` に、 `value` を `newsletter` に設定しました。フォームが送信されると、データの名前と値の組み合わせは `subscribe=newsletter` となります。

`value` 属性が省略された場合は、チェックボックスの既定値は `on` ですので、その場合の送信されるデータは `subscribe=on` となります。

**メモ:** フォームが送信されたとき、チェックボックスがチェックされていない場合、名前も値もサーバーに送信されません。HTML のみでチェックボックスがチェックされていない状態を表す方法（`value=unchecked` のように）はありません。チェックボックスがチェックされていないときの既定値を送信したい場合は、JavaScript を記述して、フォーム内にチェックされていない状態を示す値を持つ <input type="hidden"> を作成することで実現できます。

追加の属性
-----

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

`checked`

論理属性で、チェックボックスが既定で（ページが読み込まれたときに）チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものでは*ありません*。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。（`HTMLInputElement` の `checked` IDL 属性のみが更新されます。）

**メモ:** 他の入力コントロールとは異なり、チェックボックスの値は現在 `checked` の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの `value` 属性の値、または `value` が設定されていない場合は `on` が入力欄の値として報告されます。
 他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して `<input>` のチェック状態を維持します。この機能を制御するには `autocomplete` 属性を使用してください。

`value`

`value` 属性はすべての `<input>` 要素で共通のものです。しかし、 `checkbox` 型の入力欄では特殊な用途を提供します。フォームが送信されると、現在チェックされているチェックボックスのみがサーバーに送信され、報告される値が `value` 属性の値になります。 `value` が指定されていない場合は、既定で `on` の文字列になります。これは前述の値の節で紹介されています。

チェックボックスの使用
-----------

上記で最も基本的なチェックボックスの使用を見てきました。他に必要になりそうなチェックボックスに関するよく使われる機能や技術を見てみましょう。

### 複数チェックボックスの扱い

上記の例では、チェックボックスが 1 つしか含まれていませんでした。実際の状況では、複数のチェックボックスが発生する可能性があります。それらが互いに完全に無関係であれば、上記のようにすべて別々に処理できます。しかし、もしそれらがすべて関連していれば、事はそう単純ではありません。

例えば、次のデモにはユーザーが関心のあることを選択できるように、複数のチェックボックスが含まれています（完全な版は例の節で確認してください）。

```html
<fieldset>
  <legend>関心があるものを選んでください</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">コーディング</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">音楽</label>
  </div>
</fieldset>
```

この例では、両方のチェックボックスに同じ `name` を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は `interest=coding&interest=music` のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 `interest` の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 Python を使用したやり方としては、例えば、単一のサーバー側の変数で複数のチェックボックスを扱うを参照してください。

### 既定のチェックボックス

チェックボックスを既定でチェック状態にするには、 `checked` 属性を設定するだけです。次の例を見てください。

```html
<fieldset>
  <legend>関心があるものを選んでください</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">コーディング</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">音楽</label>
  </div>
</fieldset>
```

### チェックボックスの当たり判定領域を広げる

上記の例では、チェックボックス自身と同様に、関連する `<label>` 要素をクリックするとチェックボックスを切り替えられることに気づいたかもしれません。これは HTML フォームのラベルの本当に便利な機能で、特にスマートフォンのような画面の小さい端末でオプションをクリックしやすくなります。

これがフォームに `<label>` 要素を適切に設定する、アクセシビリティ以外のもう一つの理由です。

### 未決定状態のチェックボックス

チェックボックスにはチェックと未チェックの状態に加え、第三の状態である**未決定** (indeterminate) を持つことができます。この状態は項目がオンともオフとも言えない状態です。これは JavaScript から `HTMLInputElement` オブジェクトの `indeterminate` プロパティを使用して設定されます (HTML の属性を使用して設定することはできません)。

```js
inputInstance.indeterminate = true;
```

多くのブラウザーでは、未決定の状態のチェックボックスにはボックス内にチェックの代わりに水平線（ハイフンやマイナス記号のように見えるもの）が引かれます。

このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション（チェックボックス）を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1 つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。

これは以下の例に見られます（この発想は CSS Tricks のおかげです）。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。

* チェックがない場合、製作手順名のチェックボックスは未チェックになります。
* 1 つまたは 2 つがチェックされた場合、製作手順名のチェックボックスは `indeterminate` に設定されます。
* 3 つともチェックされた場合は、製作手順名のチェックボックスが `checked` に設定されます。

ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に `indeterminate` が使われます。

```js
const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}
```

**メモ:** 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。

検証
--

チェックボックスは検証（すべての `<input>` に対して行われる）に対応しています。しかし、多くの場合 `ValidityState` は常に `false` になります。チェックボックスに `required` 属性がある場合で、チェックされていない場合、 `ValidityState.valueMissing` が `true` になります。

例
-

次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。これは JavaScript の単純なブロックで実現します。この例では、`<input>` が直接 `<label>` の中にあり、暗黙のラベルを含んでいます。目に見えるラベルのないテキスト入力は、`aria-label` (en-US) を指定すると、指定されたアクセス可能な名前を提供することができます。この例では、スタイル設定を改善するためにいくつかの CSS も記載しています。

### HTML

```html
<form>
  <fieldset>
    <legend>興味のあるものを選択してください</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        コーディング
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        音楽
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        美術
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        スポーツ
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        料理
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        その他
      </label>
      <input
 type="text"
 id="otherValue"
 name="other"
 aria-label="Other interest" />
    </div>
    <div>
      <button type="submit">フォームを送信</button>
    </div>
  </fieldset>
</form>
```

### CSS

```css
html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}
```

### JavaScript

```js
const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| **値** | チェックボックスの値を表す文字列。 |
| **イベント** | `change` および `input` |
| **対応している共通属性** | `checked` |
| **IDL 属性** | `checked`、`indeterminate`、`value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()` |
| **暗黙の ARIA ロール** | `checkbox` |

仕様書
---

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

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

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

関連情報
----

* `:checked`, `:indeterminate`: CSS のセレクターで、現在の状態に基づいてチェックボックスを整形できます
* `HTMLInputElement`: HTML DOM API において `<input>` 要素が実装しているもの
* フォームコントロールの CSS プロパティの互換性


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

<input type="hidden">
=====================

`<input>` 要素の **`hidden`** 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。例えば、現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。

**メモ:** `input` および `change` の各イベントは、この入力型には適用されません。隠し入力欄は JavaScript (`hiddenInput.focus()` など) を使用してもフォーカスを与えることはできません。

値
-

`<input>` 要素の `value` 属性は、フォームをサーバーに送信する時に含めたい隠しデータを含みます。これは特に、ユーザーインターフェイスを通じで編集したり確認したりすることはできませんが、ブラウザーの開発者ツールから値を編集することはできます。

**警告:** ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 `hidden` の入力欄をセキュリティの形として当てにしないでください。

追加の属性
-----

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

### name

これは実際には共通の属性の一つですが、隠し入力欄では特別な用途を持っています。通常、 `name` 属性は隠し属性でも他の入力欄と同様に機能します。しかし、フォームが送信された時、 `name` が `_charset_` に設定された隠し入力欄は、自動的にフォームを送信するのに使用される文字エンコーディングの値として報告されます。

隠し入力欄の利用
--------

前述の通り、隠し入力欄はフォームに、一緒にサーバーに送信される、ユーザーが表示または編集できないデータを含めたい場合はどこでも使用できます。使い方を示すいくつかの例をご覧ください。

### 編集された内容の追跡

隠し入力欄のもっとも一般的な用途は、編集フォームを送信したときに、データベースのどのレコードを更新する必要があるかを追跡することです。一般的なワークフローは次のようなものです。

1. ユーザーはブログの記事や製品の項目など、管理権を持っているコンテンツの編集することにします。編集ボタンを押して始めます。
2. 編集するコンテンツがデータベースから取得され、 HTML フォーム内に読み込まれてユーザーが編集できるようになります。
3. 編集後、ユーザーはフォームを送信し、更新されたデータがサーバーに送り返されてデータベースを更新します。

この考え方はステップ 2 で、更新するレコードの ID を隠し入力欄で保持しておきます。ステップ 3 でフォームが送信されたとき、 ID は自動的にレコードの中身と共にサーバーに送り返されます。サイトのサーバー側コンポーネントは、 ID によって送信されたデータでどのレコードを更新する必要があるかを正しく特定することができます。

以下の例の節で、これがどのように見えるかを示す例全体を見ることができます。

### ウェブサイトのセキュリティの改善

隠し入力欄は、ウェブサイトのセキュリティを高めるためにセキュリティトークンや秘密を格納しておくことができます。基本的な考え方としては、例えばオンラインバンキングで他の口座に送金するためのフォームなど、機密を要するフォームにユーザーが記入するときに、秘密を提供することで自分が誰であるか、正しいフォームを利用して送金リクエストを行っているかを証明することができます。

これで悪意のあるユーザーが偽のフォームを作成して、銀行に成りすまし、騙されやすいユーザーを騙して別なところに送金させるようなことを防ぐことができます。この種の攻撃はクロスサイトリクエストフォージェリ (CSRF) と呼ばれており、非常に多くの信頼されているサーバー側フレームワークがこのような攻撃を防ぐために隠した秘密を使用しています。

**メモ:** 前述のように、隠し入力欄に秘密を配置することは、本質的に安全ではありません。鍵の組み合わせやエンコーディングによって実現すべきものです。隠し入力欄の値は秘密とデータを関連付け、フォームがサーバーに送信されるときに自動的に含められます。本当にウェブサイトを安全にするには、よく設計された秘密を使用する必要があります。

検証
--

隠し入力欄は制約検証には関係しません。制約される実際の値を持たないからです。

例
-

以前に作成した編集フォーム（編集された内容の追跡を参照）に、隠し入力欄を使用して編集するレコードの ID を記憶する簡単なバージョンを実装する方法を見てみましょう。

編集フォームの HTML はこのようになっているかもしれません。

```html
<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>
```

簡単な CSS も追加しましょう。

```css
html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}
```

サーバーはフォームをユーザーのブラウザーに送信する前に、 ID が "`postID`" である隠し入力欄の値にデータベース内の投稿の ID を設定し、フォームが戻されたときにこの情報を、変更された情報を更新するデータベースのレコードを知るために使用します。コンテンツの中でこれを扱うためにスクリプトは必要はありません。

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

**メモ:** この例は GitHub にもあります (ソースコードおよびライブでの動作の確認も参照してください)。

送信されるとき、サーバーへ送信されるフォームデータは以下のようになります。

`title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657`

隠し入力欄は全く表示されなくても、データは送信されています。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | サーバーに送り返したい隠しデータの値を表す文字列です。 |
| **イベント** | なし。 |
| **対応する共通属性** | `autocomplete` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし。 |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

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

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

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

関連情報
----

* HTML フォームガイド
* `<input>` および `HTMLInputElement` インターフェイス


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

<input type="range">
====================

`<input>` 要素の **`range`** 型は、指定された値より小さくなく、別に指定された値より大きくない値をユーザーに指定させるために使用します。しかし、厳密な値は重要とはされません。これは通常、 number 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。

この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。

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

ユーザーのブラウザーが `range` 型に対応していない場合は、 `text` 入力で代替されて扱われます。

### 検証

利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。

* `value` が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。
* 値は `min` より小さくはなりません。この既定値は 0 です。
* 値は `max` より大きくはなりません。この既定値は 100 です。
* 値は `step` の倍数になります。この既定値は 1 です。
### 値

`value` 属性は、選択された数値を文字列で格納します。値は空文字列 (`""`) になることはありません。既定値は指定した最小値と最大値の中間の値です。ただし、最大値が最小値より小さい場合は、`min` 属性の値が既定値に設定されます。既定値を決定するアルゴリズムは次の通りです。

```js
defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;
```

最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。

追加の属性
-----

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

### list

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

対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の目盛りの追加を参照してください。

### max

この入力欄が受け付ける最大値です。要素に入力された `value` がこれを超えた場合、要素は制約検証に失敗します。 `max` 属性の値が数値でない場合、要素は最大値を持ちません。

この値は `min` 属性の値より大きいか、等しくしなければなりません。HTML の `max` 属性を参照してください。

### min

許可されている値の範囲の最小値です。要素の `value` がこれより小さい場合、要素は制約検証に失敗します。 `min` 属性の値が数値でない場合、要素は最小値を持ちません。

この値は `max` 属性の値以下でなければなりません。 HTML の `min` 属性を参照してください。

**メモ:** もし `min` と `max` の値が等しかったり、`max` の値が `min` の値より低かったりすると、ユーザーはその範囲を操作することができなくなります。

### step

`step` 属性は値が吸着する粒度を指定する数値です。指定した刻み間隔（`min` を指定した場合は `value`、それ以外の場合は適切な既定値）に一致する値のみが有効となります。

`step` 属性には文字列値 `any` を設定することもできます。この `step` 値は、刻み間隔を意味せず、指定した範囲内で任意の値が許されることを意味します（他にも `min` や `max` のような制約がある場合は除きます）。対応しているブラウザーでこのように動作するのかについては、step を `any` に設定の例を参照してください。

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

`range` 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を*除いて*、整数の入力のみを許可します。例えば、 `min` に -10 を、 `value` に 1.5 を設定した場合、 `step` が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。 HTML の `step` 属性を参照してください。

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

### orient

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

**メモ:** input 型の属性のうち、 `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src` は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。

例
-

`number` 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 `range` 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。

range 入力欄がよく使用される場合の例をいくつか示します。

* ボリュームやバランス、フィルター制御のようなオーディオの制御。
* カラーチャネル、透過度、明るさなどの色の構成の制御。
* 難易度、視点距離、ワールドサイズなどのゲームの構成の制御。
* パスワードマネージャーが生成するパスワードの長さ。

原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を 0.5 に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。

### 最小値と最大値の指定

既定では、最小値は 0 で最大値は 100 です。これが望むものでないのであれば、 `min` や `max` 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。

例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。

```html
<input type="range" min="-10" max="10" />
```

### 値の粒度の設定

既定では、粒度は 1 であり、値は常に整数であることを意味します。粒度は、`step` 属性を変更することで制御することができます。例えば、 5 から 10 の中間値が必要であれば、`step` の値を 0.5 に設定してください。

#### step 属性の設定

```html
<input type="range" min="5" max="10" step="0.5" />
```

#### step を "any" に設定

小数点以下が何桁になろうと、どんな値でも受け入れたい場合は、 `step` 属性に `any` という値を指定することができます。

##### HTML

```html
<input id="pi\_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>
```

##### JavaScript

```js
const value = document.querySelector("#value");
const input = document.querySelector("#pi\_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});
```

##### 結果

この例では、 0 から π までの任意の値を選択することができ、選択された値の小数部は制限されません。JavaScript は、ユーザーが範囲と対話することによって値がどのように変化するかを示すために使用されます。

### 目盛の追加

範囲コントロールに目盛を追加するには、`list` 属性を記載して、それにコントロール上の一連の目盛を定義する `<datalist>` 要素の `id` を指定します。各点は `<option>` 要素を使用して表現され、その `value` には、マークを描画すべき範囲の値が設定されます。

#### HTML

```html
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>
```

#### 結果

### 同じデータリストを複数の範囲コントロールで使用

コードの重複を防ぐために、同じ `<datalist>` を複数の `<input type="range">` 要素や他の `<input>` 型に再利用することができます。

**メモ:** 下記の例のようにラベルを表示することもしたい場合は、それぞれの範囲の入力に対して `datalist` が必要です。

#### HTML

```html
<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>
```

#### 結果

### ラベルの追加

目盛には `<option>` 要素に `label` 属性を与えることで、ラベル付けをすることができます。ただし、既定では、ラベルのコンテンツは表示されません。このラベルを表示したり、ラベルを正しい位置に配置するためには CSS を使用してください。以下はその方法の一つです。

#### HTML

```html
<label for="temp">快適な温度を選択してください。</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="とても冷たい"></option>
  <option value="25" label="冷たい"></option>
  <option value="50" label="ふつう"></option>
  <option value="75" label="やや温かい"></option>
  <option value="100" label="熱い"></option>
</datalist>
```

#### CSS

```css
datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}
```

#### 結果

### 垂直の範囲コントロール

既定では、ブラウザーは範囲入力を、つまみが左右にスライドするスライダーとして描画します。

つまみが上下にスライドする垂直方向の範囲を作成するには、CSS の `appearance` プロパティを `slider-vertical` に設定し、Firefox の標準外の `orient` 属性を記載してください。

#### 水平の範囲コントロール

この範囲コントロールを考えてみてください。

```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```

このコントロールは水平です（少なくとも主要なブラウザーではそうですが、他のブラウザーでは異なるかもしれません）。

#### appearance プロパティの使用

`appearance` プロパティには `slider-vertical` という標準外の値があり、スライダーを縦にします。

これまでの例と同じ HTML を使用します。

```html
<input type="range" min="0" max="11" value="7" step="1" />
```

`range` 型の入力だけを対象にします。

```css
input[type="range"] {
  appearance: slider-vertical;
}
```

#### orient 属性の使用

Firefox だけですが、標準外の `orient` プロパティがあります。

前述の例と同様の HTML を使用しますが、この属性に `vertical` の値を設定します。

```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```

#### writing-mode: bt-lr

`writing-mode` プロパティは、一般に国際化やローカライズのためにテキスト方向を変更するために使用するべきではありませんが、特殊効果のために使うことができます。

前述の例と同様の HTML を使用します。

```html
<input type="range" min="0" max="11" value="7" step="1" />
```

入力型が range のものだけを対象に、書字方向を `bt-lr`、すなわち下から上へ、右から左へ設定します。

```css
input[type="range"] {
  writing-mode: bt-lr;
}
```

#### すべて一緒に設定

上記の例は動作するブラウザーが異なるため、単一の例が複数のブラウザーで動作するように一緒に指定することができます。

`orient` 属性に `vertical` の値を設定することで Firefox に対応します。

```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```

`input` の `type` が `range` で `orient` が `vertical` のものだけを対象とし、`writing-mode` を既定値から `bt-lr` （下から上、左から右）に変更し、Blink と Webkit のブラウザーに対応している `appearance: slider-vertical` を追加します。

```css
input[type="range"][orient="vertical"] {
  writing-mode: bt-lr;
  appearance: slider-vertical;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 選択された数値の文字列表現を示す文字列。数値として値を取得するには `valueAsNumber` を使用してください。 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `max`,
 `min`, and
 `step` |
| **IDL 属性** | `list`, `value`, `valueAsNumber` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `stepDown()`
 および `stepUp()` |
| **暗黙の ARIA ロール** | `slider` |

仕様書
---

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

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

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

関連情報
----

* HTML フォーム
* `<input>` およびそれに基づく `HTMLInputElement` インターフェイス
* `<input type="number">`
* `validityState.rangeOverflow` および `validityState.rangeUnderflow`
* ConstantSourceNode による複数の引数の制御 (en-US)
* Styling the range element
* CSS プロパティの互換性


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

<input type="time">
===================

`<input>` 要素の **`time`** 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。

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

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

外観
--

### Chrome と Opera

Chrome/Opera では、 `time` コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って 12 時制または 24 時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。

![Chrome の 12 時制の time input](/ja/docs/Web/HTML/Element/input/time/chrome_time.png) 12 時制

![Chrome の 24 時制の time input](/ja/docs/Web/HTML/Element/input/time/chrome-time.png) 24 時制

### Firefox

Firefox の `time` コントロールは Chrome のものとよく似ていますが、上下の矢印がありません。これも時刻の入力には、システムのロケールに従って 12 時制または 24 時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。

![Firefox の 12 時制の time input](/ja/docs/Web/HTML/Element/input/time/firefox-time.png) 12 時制

![Firefox の 24 時制の time input](/ja/docs/Web/HTML/Element/input/time/firefox-time-24.png) 24 時制

### Edge

Edge の `time` コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。

![Edge の 12 時制の time input](/ja/docs/Web/HTML/Element/input/time/edge_time.png) 12 時制

![Edge の 24 時制の time input](/ja/docs/Web/HTML/Element/input/time/edge-time.png) 24 時制

値
-

入力欄に入力された時刻を表す文字列です。

### value 属性の設定

`<input>` 要素が作成されたときに、次のように `value` 属性に時刻を指定することで、既定値を設定することができます。

```html
<label for="appt-time">予約時刻を選んでください。</label>
<input id="appt-time" type="time" name="appt-time" value="13:30" />
```

### JavaScript を使用した値の設定

次のように、 `HTMLInputElement` の `value` プロパティを使って JavaScript の日時の値を取得したり設定したりすることができます。

```js
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";
```

### 時刻値の書式

`time` 入力欄の `value` は、常に先頭にゼロを含む 24 時制で `hh:mm` の書式であり、ユーザーのロケール（またはユーザーエージェント）に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合（step 属性の使用を参照）は、書式は常に `hh:mm:ss` です。この入力型で使用される時刻の値の形式について詳しくは、時刻文字列をご覧ください。

この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。

最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 `<p>` 要素と、 `time` 入力欄の値を表示する `<span>` があります。

```html
<form>
  <label for="startTime">開始時刻: </label>
  <input type="time" id="startTime" />
  <p>
    <code>time</code> 入力欄の値:
    <code> "<span id="value">n/a</span>"</code>
  </p>
</form>
```

JavaScript コードは、 time 入力欄に `input` イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 `<span>` 要素の中身が input 要素の新しい値で置き換えられます。

```js
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");

startTime.addEventListener(
  "input",
  () => {
    valueSpan.innerText = startTime.value;
  },
  false,
);
```

`time` 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に `name=hh%3Amm` の形式か、秒が含まれる場合は `name=hh%3Amm%3ass` の形式になります（step 属性の利用を参照してください）。

追加の属性
-----

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

**メモ:** 多くのデータ型とは異なり、時刻値は**周期的範囲**を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 `min` を `14:00` に、 `max` を `2:00` に設定すると、許可される時間の値は午後 2 時から始まり、深夜を経て次の日の午前 2 時で終わります。詳しくは、この記事の最小値と最大値が真夜中をまたぐようにするの節をご覧ください。

### list

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

### max

文字列で、受け付ける最も遅い時刻を示し、前述の同じ時刻値の書式で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。

### min

文字列で、受け付ける最も速い時刻を示し、前述の時刻値の書式で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。

### readonly

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

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

### step

`step` 属性は、値が遵守しなければならない粒度を指定する数値、または下記で記述する特別な値 `any` です。ステップの基準となる値（`min` を指定した場合は `value`、それ以外の場合は適切な既定値）と同じ値のみが有効となります。

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

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

`time` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、 60 秒 (1 分、60,000 ミリ秒) を表します。

*現時点で、 `time` 入力欄で `step` に `any` の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。*

time 入力欄の利用
-----------

### 時刻入力欄の基本的な使用

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

```html
<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time" />
</form>
```

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

`<input type="time">` は、 `size` のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 CSS を使用する必要があります。

### step 属性の使用

`step` 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます（例えば、小さな矢印ウィジェットをクリックしたときに 10 分単位で時刻が動くように）。

**メモ:** このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。

これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は 60 秒、または 1 分です。 60 秒 (1 分) よりも小さな値を指定した場合は、 `time` 入力欄は時と分の隣に秒の入力領域を表示します。

```html
<form>
  <label for="appt-time">予約時刻を選んでください: </label>
  <input id="appt-time" type="time" name="appt-time" step="2" />
</form>
```

上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が 2 秒単位で変わりますが、時と分には影響しません。分（または時）の刻みは、分（または時）の数を秒数で指定した場合のみ使用されます（120 で 2 分刻み、 7200 で 2 時間刻みなど）。

Firefox では矢印はなく、 `step` の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分の隣に追加されます。

step の値は Edge には効果がないようです。

**メモ:** `step` を使用しても、検証は正しく動作しないようです（次の節にある通り）。

検証
--

既定では、 `<input type="time">` は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、時刻でないものを入力させないからです。 (`time` 入力欄にユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 (`""`) にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば `25:05` を入力したりすることが可能です。

### 時刻の最大値と最小値の設定

`min` および `max` 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を `12:00` に、時刻の最大値を `18:00` に設定しています。

```html
<form>
  <label for="appt-time">
    予約時刻を選んでください (営業時間 12:00～18:00):
  </label>
  <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
  <span class="validity"></span>
</form>
```

上記の例の CSS です。 CSS の `:valid` および `:invalid` プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の `<span>` に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

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

input[type="number"] {
  width: 100px;
}

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

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

* 12:00 から 18:00 までの時刻だけが有効として表示されます。この範囲を外れた時刻は無効として表示されます。
* 使用しているブラウザーによっては、指定された範囲を外れた時刻が選択できることが分かります (Edge など)。

#### 最小値と最大値が真夜中をまたぐようにする

`min` 属性に `max` 属性よりも大きな値を設定することで、有効な時間帯が真夜中をまたぐようにするために、有効な時間帯を真夜中で折り返させることができます。この機能は他の入力型では対応していません。この機能は仕様書内に存在するものの、まだ全体では対応されていません。 Chrome ベースのブラウザーでは 82 版から対応しており、 Firefox は 76 版から対応しています。 Safari は 14.1 版の時点でまだ対応していません。そうなることを見越して、準備しておきましょう。

```js
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";

if (input.validity.valid && input.type === "time") {
  // <input type=time> が範囲の折り返しに対応している
} else {
  // <input type=time> が範囲の折り返しに対応していない
}
```

### 時刻を必須にする

加えて、 `required` 属性を使用して、時刻の入力を必須にすることができます。結果として、対応するブラウザーでは設定範囲外または空欄の time 入力欄を送信しようとすると、エラーを表示します。

例を見てみましょう。時刻の最小値と最大値を設定し、かつ入力欄を必須に設定しています。

```html
<form>
  <div>
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
 id="appt-time"
 type="time"
 name="appt-time"
 min="12:00"
 max="18:00"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

フォームに不完全な時刻 (または設定された範囲外の時刻) を設定して送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。

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

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

前述の通り、 Safari やその他の少数派のブラウザーは、まだ time 入力欄にネイティブに対応していません。一般に、それ以外では、よく対応されています。 — 特にモバイルプラットフォームでは、時刻の値を指定するのにとても良いユーザーインターフェイスを持つ傾向があります。例えば、 Android 版 Chrome の `time` ピッカーは次のようになっています。

![ヘッダーに 10:21 と表示されているモーダルダイアログを示すスマートフォンの画面。 10 は完全に不透明である。 21 は半透明。メイン領域には、 1 〜 12 の数字がリング状に、 13 〜 24 の数字が内側のリングに配置された円がある。 10 は青い円で強調されている。下部のボタンは、設定、キャンセル、削除である。](/ja/docs/Web/HTML/Element/input/time/chrome-android-time.png)

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

2 番目の問題はより深刻です。すでに述べたように、 `time` 入力欄では、実際の値が常に `hh:mm` または `hh:mm:ss` の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは時刻がどの書式で入力されるかの認識がなく、以下のように人間が時刻を書く様々な方法で入力される可能性があります。

* `3.00 pm`
* `3:00pm`
* `15:00`
* `午後 3 時`
* etc.

これを回避する方法の一つとして、 `time` 入力欄に `pattern` 属性を付けるという方法があります。 `time` 入力欄はこれを使用しないので、 `text` 入力欄にフォールバックされたときに使用されます。例えば、次の例を未対応のブラウザーで見てみてください。

```html
<form>
  <div>
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
 id="appt-time"
 type="time"
 name="appt-time"
 min="12:00"
 max="18:00"
 required
 pattern="[0-9]{2}:[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

`nn:nn` のパターン（`n` は数字の 0 から 9）に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される（そして入力欄が無効として強調表示される）のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。

それから、ユーザーからはどの様な時刻の書式が期待されているかが正確にわからないという問題があります。
```

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

input[type="number"] {
  width: 100px;
}

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

ブラウザーに依存しない方法によってフォームで時刻を扱う最善の方法は、現時点では、時と分（および必要であれば秒) を別々なコントロール (`<select>` 要素が一般的です。以下の実装を見てください）にするか、 jQuery timepicker plugin のような JavaScript ライブラリを使用することです。

例
-

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

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

```html
<form>
  <div class="nativeTimePicker">
    <label for="appt-time">
      予約時刻を選んでください (営業時間 12:00～18:00):
    </label>
    <input
 id="appt-time"
 type="time"
 name="appt-time"
 min="12:00"
 max="18:00"
 required />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">予約時刻を選んでください (営業時間 12:00～18:00):</p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <select id="hour" name="hour">
          <label for="hour">時</label>
        </select>
      </span>
      <span>
        <select id="minute" name="minute">
          <label for="minute">分</label>
        </select>
      </span>
    </div>
  </div>
</form>
```

`<select>` 要素に入れる時と分の値は、動的に生成されます。
```

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

input[type="number"] {
  width: 100px;
}

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

もう一つの面白い部分は、機能の検出コードです。ブラウザーが `<input type="time">` に対応しているかどうかを検出するために、新たな `<input>` 要素を生成し、その `type` を `time` に設定してみて、すぐにどの type に設定されたかをチェックします。対応していないブラウザーでは、 `time` 型が `text` 型で代替されるからです。 `<input type="time">` に対応していない場合は、ネイティブの時刻入力欄を非表示にして代替用の (`<select>`) による選択ユーザーインターフェイスを表示します。

```js
// 変数の宣言
const nativePicker = document.querySelector(".nativeTimePicker");
const fallbackPicker = document.querySelector(".fallbackTimePicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const hourSelect = document.querySelector("#hour");
const minuteSelect = document.querySelector("#minute");

// 最初はフォールバックを非表示にする
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// 新しい日付入力が文字列入力にフォールバックされるかどうか
const test = document.createElement("input");

try {
  test.type = "time";
} catch (e) {
  console.log(e.description);
}

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

  // 時と分を動的に生成する
  populateHours();
  populateMinutes();
}

function populateHours() {
  // 時刻の <select> に営業時間の 6 時間分を生成する
  for (let i = 12; i <= 18; i++) {
    const option = document.createElement("option");
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // 分の <select> に 1 時間内の 60 分を生成する
  for (let i = 0; i <= 59; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    minuteSelect.appendChild(option);
  }
}

// 時が 18 になったら、分を 00 に設定する
// — 18:00 以降を選択できなくする
function setMinutesToZero() {
  if (hourSelect.value === "18") {
    minuteSelect.value = "00";
  }
}

hourSelect.onchange = setMinutesToZero;
minuteSelect.onchange = setMinutesToZero;
```

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

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


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

<input type="radio">
====================

`<input>` 要素の **`radio`** 型は、一般に**ラジオグループ**、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶされたりや強調表示されたりします。

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

ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。

![古い時代のラジオボタンの外観を示します。](/ja/docs/Web/HTML/Element/input/radio/old-radio.jpg)

**メモ:** チェックボックスはラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。

値
-

`value` 属性はラジオボタンの値を持つ文字列です。値はユーザーエージェントがユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。

### ラジオグループの定義

ラジオグループは、グループ内のそれぞれのラジオボタンに同じ `name` を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。

ページ内には、固有の `name` を持っている限り、好きなだけの数のラジオグループを作成することができます。

例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3 つのラジオボタンを作成し、それぞれの `name` プロパティに `contact` を設定しますが、1 つは `value` を `email` に、1 つは value を `phone` に、1 つは value を `mail` に設定します。ユーザーは `value` または `name` を見ることはありません（表示させるコードを追加しない限り）。

最終的な HTML はこのようになります。

```html
<form>
  <fieldset>
    <legend>希望する連絡方法を選択してください。</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">メール</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">電話</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">郵便</label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </fieldset>
</form>
```

ここでは三つのラジオボタンがあり、それぞれの `name` が `contact` に設定されており、それぞれのラジオボタンを個別に識別するための固有の `value` を持っています。それぞれは固有の `id` も持っており、 `<label>` 要素の `for` 属性でラジオボタンにラベルを結びつけるために使われます。

この例をこちらで試すことができます。

### ラジオグループのデータ表現

ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータには `contact=value` の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータには `contact=phone` という行が含まれます。

HTML で `value` 属性を省略すると、送信されたフォームデータのそのグループには `on` の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが `contact=on` となるため有益ではありません。ですから、 `value` 属性を設定することを忘れないようにしてください。

**メモ:** フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。

実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを `checked` 状態を設定しておくことには意味があります。下記の既定のラジオボタンの選択を参照してください。

例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するための `<pre>` を追加します。

```html
<form>
  <fieldset>
    <legend>希望する連絡方法を選択してください。</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">メール</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">電話</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">郵便</label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>
```

それから、いくらかの JavaScript を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する `submit` イベントのイベントリスナーを設定します。

```js
const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener(
  "submit",
  (event) => {
    const data = new FormData(form);
    let output = "";
    for (const entry of data) {
      output = `${output}${entry[0]}=${entry[1]}\r`;
    }
    log.innerText = output;
    event.preventDefault();
  },
  false,
);
```

この例を試してみて、 `contact` グループに二つ以上の結果が出ないことを確認してください。

追加の属性
-----

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

* `checked`
    + : 論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。
     Firefox は他のブラウザーとは異なり、既定でページ読み込みをまたがって `<input>` のチェック状態を維持します。この機能を制御するには `autocomplete` 属性を使用してください。
* `value`

`value` はすべての `<input>` で共通のものの一つです。しかし、`radio` 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は `value` 属性の値になります。 `value` が指定されていない場合は、既定で `on` という文字列になります。これは以前に値の節で説明した通りです。

`required`

`required` 属性は、ほとんどの `<input>` に共通する属性です。同じ名前のラジオボタンのグループのいずれかに `required` 属性がある場合、そのグループのラジオボタンのいずれかをチェックする必要がありますが、その属性が適用されているラジオボタンをチェックする必要があるわけではありません。

ラジオボタンの使用
---------

上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。

### 既定のラジオボタンの選択

ラジオボタンを既定で選択状態にするには、単に `checked` 属性を加えるだけです。前回の例を更新するとこのようになります。

```html
<form>
  <fieldset>
    <legend>希望する連絡方法を選択してください。</legend>
    <div>
      <input
 type="radio"
 id="contactChoice1"
 name="contact"
 value="email"
 checked />
      <label for="contactChoice1">メール</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">電話</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">郵便</label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </fieldset>
</form>
```

この場合、最初のラジオボタンは既定で選択されるようになります。

**メモ:** 複数のラジオボタンに `checked` 属性を指定した場合、後から指定したものが先に指定したものを上書きします。つまり、最後に `checked` されたラジオボタンが選択されることになります。これは、一度に選択できるラジオボタンはグループ内の 1 つだけであり、ユーザーエージェントは新しいラジオボタンがチェックされるたびに、他のラジオボタンの選択を自動的に解除するからです。

### ラジオボタンのヒット領域を大きくする

上記の例では、ラジオボタンそのものだけでなく、関連する `<label>` 要素をクリックすることで、ラジオボタンを選択できることにお気づきでしょうか。これは HTML フォームのラベルの実に便利な機能で、特にスマートフォンのような画面の小さな機器では、ユーザーが望む選択肢をクリックしやすくなります。

アクセシビリティを越えて、このこともフォームに `<label>` 要素を適切に設定する良い理由です。

検証
--

ラジオボタンは制約の検証に参加しません。制約されるべき実際の値を持ちません。

ラジオボタンの整形
---------

以下の例は、この記事を通して見てきた例を少し徹底させたもので、スタイルを追加し、特殊な要素を使用することでより良い意味づけを確立しています。 HTML はこのようになっています。

```html
<form>
  <fieldset>
    <legend>希望する連絡方法を選択してください。</legend>
    <div>
      <input
 type="radio"
 id="contactChoice1"
 name="contact"
 value="email"
 checked />
      <label for="contactChoice1">メール</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">電話</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">郵便</label>
    </div>
    <div>
      <button type="submit">送信</button>
    </div>
  </fieldset>
</form>
```

この例では、 CSS が絡んでいるのが少し特徴的です。

```css
html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}
```

ここで最も注目すべきは、`appearance` プロパティ（一部のブラウザーで対応しているために必要な接頭辞付き）を使用している点です。既定で、ラジオボタン（とチェックボックス）は、それらのコントロールのためのオペレーティングシステムのネイティブスタイルでスタイル設定されています。 `appearance: none` を指定することで、ネイティブのスタイル設定を完全に削除し、自分自身でスタイルを作成することができます。ここでは、 `border` と `border-radius` と `transition` を使用して、ラジオ選択のアニメーションがあるように作成しています。また、 `:checked` 擬似クラスが、選択時のラジオボタンの外観のスタイルを指定するために使用されていることに注目してください。

**メモ:** もし `appearance` プロパティを使用したい場合は、とても慎重にテストする必要があります。このプロパティはほとんどの現代のブラウザーで対応していますが、その実装は大きく異なっています。古いブラウザーでは、キーワード `none` でさえ異なる形で同じ効果を持たず、まったく対応していないブラウザーもあります。最新のブラウザーでは、そのような違いは小さくなっています。

ラジオボタンをクリックすると、 2 つのボタンの状態が変わるときに、きれいで滑らかなフェードアウト/イン効果があることに注意してください。さらに、凡例と送信ボタンのスタイルと色は、強いコントラストを保有するようにカスタマイズされています。これは、実際のウェブアプリケーションで使用したい外観ではないかもしれませんが、その可能性を示していることは間違いありません。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | ラジオボタンの値を表す文字列です。 |
| **イベント** | `change` および `input` |
| **対応している共通属性** | `checked`, `value`,
 `required` |
| **IDL 属性** | `checked` および `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()` |
| **暗黙の ARIA ロール** | `radio` |

仕様書
---

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

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

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

関連情報
----

* `<input>` およびそれが実装している `HTMLInputElement` インターフェイス
* `RadioNodeList`: ラジオボタンのリストを表現するインターフェイス
* CSS プロパティの互換性