<input type="time"> 時刻の入力欄を作成する

HTMLの<input type="time">は、時刻の入力欄（フィールド）を作成するために使います。

<input type="time" name="example">

このページの目次

• ブラウザの表示イメージ
  • 未対応ブラウザの場合
• input type="time"の使い方
  • 基本
  • 入力欄の値はどんな形式？
  • value属性で初期値を指定する
  • minとmaxで選択可能な時刻の範囲を決める
  • requiredで入力必須にする
  • 日付も選べるようにするならtype="date"を使う

ブラウザの表示イメージ

<input type="time">は対応しているブラウザであれば、時刻入力用のUI（ユーザーインターフェース）になります。このUIはブラウザによって少しずつ異なります。

👆 パソコン版のChromeやFirefoxの場合、キーボード入力に加えて、矢印や「↑」「↓」キーなどで数値を操作できるフィールドになります。

👆iOSの場合には、スワイプで時刻を選べるピッカーが表示されます。

このようにブラウザによって見た目が異なることに注意しましょう。

未対応ブラウザの場合

<input type="time">に未対応のブラウザだと、ただの文字列の入力欄（<input type="text">と同じ）になります。

input type="time"の使い方

基本

<form>
  <label for="scheduled-time">予定時刻を入力</label>
  <input type="time" name="scheduled_time" id="scheduled-time">
  <button type="submit">送信</button>
</form>

👆フィールドの名前はname属性で指定します。この場合name="scheduled_time"なので、フォーム送信時にはscheduled_time=フィールドの値という形でサーバーに送られます。

<label for="◯◯">と<input id="◯◯">を合わせることで、ラベル（<label>）の文字列をクリックしたときにもフィールドにカーソルが当たるようになります。

このあたりの基本的な使い方は他の<input>と同じです。

関連するページを読む

<input type="text">の使い方 - HTML

入力欄の値はどんな形式？

<input type="time">フィールドに入力された値はhh:mmという形式の文字列になっています。例えば「午前5時32分」なら05:32という値になります。

value属性で初期値を指定する

<input type="time" value="05:32">

👆時刻フィールドにあらかじめ初期値（デフォルト値）を入力しておきたいときは、value="hh:mm"の形式で指定します。

minとmaxで選択可能な時刻の範囲を決める

min属性とmax属性を使うと、選択できる時刻の範囲（◯時〜◯時まで）を指定できます。

<input type="time" min="09:00" max="17:00">

👆min="09:00"は「9:00から」、max="17:00"は「17:00まで」という意味になります。つまり「9:00〜17:00」の中から選んでもらうことになります。

requiredで入力必須にする

<form>
  <input type="time" name="example" required>
  <button type="submit">送信</button>
</form>

👆フィールドを必須入力にしたい場合は、required属性を指定しましょう。このようにrequiredとだけ書けばOKです。

その他の種類の<input>の使い方はこちらのページをご覧ください。

関連するページを読む

inputタグ・コンプリートガイド - HTML