HTML DOM input オブジェクト - time

HTML DOM Input Time タイプ詳解 - ウェブページでの時間入力の設定を簡単に

本文では、HTML DOM の input type="time" オブジェクトについて詳しく解説します。属性、メソッド、使用例を含めて、ウェブページで時間入力ボックスを簡単に追加し、制御する方法を理解するのに役立ちます。

一、Input Time タイプとは？

<input type="time"> は、時間を入力するための HTML フォーム要素を定義します。ユーザーは時間選択ツールを使用するか、手動で時間を入力することができます。時間は 24 時間制 (HH:MM) で表示されます。

二、Input Time 属性

1. 共通 Input 属性:

すべての <input> タグの共通属性（例: value, readonly, disabled など）は、<input type="time"> にも適用されます。

2. 特有属性:

属性	説明
`value`	時間フィールドの値を設定または返します（形式: HH:MM）。
`min`	時間フィールドで許可される最小値を設定します。
`max`	時間フィールドで許可される最大値を設定します。
`step`	時間フィールドの合法的なステップ（秒単位）を設定します。

三、Input Time メソッド

1. 共通 Input メソッド:

すべての <input> タグの共通メソッド（例: focus(), blur() など）は、<input type="time"> にも適用されます。

四、使用例

1. 基本的な使用法:

以下は、シンプルな時間入力ボックスの例です。

<label for="time-picker">時間を選択してください:</label>
<input type="time" id="time-picker" value="12:30">

2. 最小および最大時間の設定:

<input type="time" id="meeting-time" min="09:00" max="18:00">

3. JavaScript を使用して時間値を取得および設定する:

<input type="time" id="selected-time">
<button onclick="getTime()">時間を取得</button>

<script>
function getTime() {
  var timeInput = document.getElementById("selected-time");
  alert("選択した時間は: " + timeInput.value);
}
</script>

五、ブラウザ互換性

ほとんどの主要なブラウザは <input type="time"> をサポートしています。サポートしていないブラウザの場合、この入力ボックスは通常のテキストボックスにフォールバックします。

六、まとめ

HTML DOM input type="time" オブジェクトは、ユーザーが入力した時間値を簡単に取得する方法を提供します。属性とメソッドを理解することで、機能豊富でユーザーフレンドリーな時間選択ツールを簡単に作成できます。

参考文献

HTML input 要素 - MDN Web Docs