<input type="time">

<label for="appointment">ミーティングの時間を選択してください:</label>
<input
 type="time"
 id="appointment"
 name="appointment"
 min="09:00"
 max="18:00"
 required />
<small>オフィスアワーは午前9時から午後6時までです</small>

label {
 display: block;
 font:
 1rem "Fira Sans",
 sans-serif;
}
input,
label {
 margin: 0.4rem 0;
}

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

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

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

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

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

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

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

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

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

<form>
 <label for="appointment-time">
 予約時刻を選んでください (営業時間 12:00〜18:00):
 </label>
 <input
 id="appointment-time"
 type="time"
 name="appointment-time"
 min="12:00"
 max="18:00" />
 <span class="validity"></span>
</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;
}

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> が範囲の折り返しに対応していない
}

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

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

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

input[type="time"] {
 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;
}

Help improve MDN

This page was last modified on ⁨2025年7月10日⁩ by MDN contributors.