<label for="appointment">ミーティングの時間を選択してください:</label><input  type="time"   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   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" />  <p>    <code>time</code> 入力欄の値:    <code>"<span>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 type="time" name="appointment-time" /></form>

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

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

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

<form>  <label for="appointment-time">    予約時刻を選んでください (営業時間 12:00～18:00):  </label>  <input       type="time"    name="appointment-time"    min="12:00"    max="18:00"    required />  <span></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日⁩ byMDN contributors.