HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Time オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

HTML DOM の Input Time オブジェクトは、HTML の <input type="time"> 要素を JavaScript から操作するためのインターフェースです。時刻入力フィールドの値の取得や設定、表示制御などがプログラムから行えます。

構文（Syntax）

Input Time オブジェクトを作成する基本的な構文は以下の通りです。

type="time" の <input> 要素を作成する

var timeObject = document.createElement("input");
timeObject.type = "time";

このように document.createElement() で input 要素を生成し、type プロパティに「time」を指定することで、時刻入力フィールドとして動作させることができます。

主な属性一覧

Input Time オブジェクトで利用できる主な属性は以下の通りです。

属性説明
autocomplete時刻フィールドの autocomplete（自動補完）属性の値を定義します。
autofocusページ読み込み時に、その時刻フィールドへ自動的にフォーカスを当てるかどうかを設定します。
defaultValue時刻フィールドのデフォルト値を設定または取得します。
disabled時刻フィールドが無効化されているかどうかを設定または取得します。
formその時刻フィールドを含むフォームへの参照を返します。
max時刻フィールドに入力できる最大時刻（max 属性）を取得または設定します。
min時刻フィールドに入力できる最小時刻（min 属性）を取得または設定します。
name時刻フィールドの name 属性の値を定義します。
readOnly時刻フィールドが読み取り専用かどうかを設定します。
requiredフォーム送信時に、その時刻フィールドの入力が必須かどうかを設定します。
step時刻フィールドの step 属性（増減の間隔）の値を定義します。
type時刻フィールドのフォーム要素の種類（type）を返します。
value時刻フィールドの value 属性（現在の値）を定義します。

利用可能なメソッド

Input Time オブジェクトには、以下の2つの便利なメソッドが用意されています。

メソッド詳細
stepDown()時刻フィールドの値を、指定した分数だけ減らします。
stepUp()時刻フィールドの値を、指定した分数だけ増やします。

サンプルコード：form プロパティの使用例

ここでは、Input Time オブジェクトの form プロパティを使った具体例を見てみましょう。以下のコードでは、時刻入力フィールドがどのフォームに属しているかを取得し、画面に表示しています。

<!DOCTYPE html>
<html>
<head>
<title>Input Time form</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">試験開始時刻 :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="どの試験？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    function getform() {
        divDisplay.textContent = inputTime.form.id+' の試験は '+inputTime.value+' 開始です';
    }
</script>
</body>
</html>

コードのポイント

  • <input type="time"> に初期値「14:00」を設定し、disabled 属性で編集不可にしています。
  • ボタンをクリックすると getform() 関数が実行されます。
  • inputTime.form.id によって、時刻フィールドが属するフォームの ID（ここでは「Physics」）を取得できます。
  • 結果として、「Physics の試験は 14:00 開始です」というテキストが div 要素内に表示されます。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「どの試験？」ボタンをクリックする前：

HTML DOM Input Time オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

「どの試験？」ボタンをクリックした後：

HTML DOM Input Time オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

まとめ

HTML DOM の Input Time オブジェクトを使えば、時刻入力フィールドの値の取得・設定だけでなく、min / max / step による入力範囲の制御や、stepUp() / stepDown() による値の増減なども簡単に実装できます。フォームと連動した動的な UI を作成する際にぜひ活用してみてください。

  1. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input

  2. HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

    HTML DOM Timeオブジェクトとは？HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。<time>要素を作成するJavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドにTIMEを指定します。var timeObject = docume