HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説
HTML DOM の Input Time type プロパティは、<input type="time"> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。
構文
type プロパティの基本的な構文は以下の通りです。
type の値を取得する場合
inputTimeObject.type
type に値を設定する場合
inputTimeObject.type = stringValue
指定できる文字列値（stringValue）
stringValue には、以下のような値を指定できます。
| stringValue | 説明 |
|---|---|
| time | 入力タイプが「時刻」であることを示します。 |
| datetime-local | 入力タイプが「日付と時刻（ローカルタイムゾーン）」であることを示します。 |
| checkbox | 入力タイプが「チェックボックス」であることを示します。 |
| text | 入力タイプが「テキスト」であることを示します。 |
サンプルコード
それでは、Input Time type プロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Time type</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>
<fieldset>
<legend>Time-type</legend>
<label for="TimeSelect"></label>
<input type="time" id="TimeSelect">
<input type="button" onclick="getTypeOfInput()" value="What input is expected?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var labelDisplay = document.querySelector("label");
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function getTypeOfInput() {
labelDisplay.textContent = 'Time: ';
divDisplay.textContent = 'Input of type time (hh:mm:ss.ms) is expected';
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
「What input is expected?」ボタンをクリックする前：
「What input is expected?」ボタンをクリックした後：
-
HTML DOM Input Time の value プロパティとは？取得・設定方法を解説
HTML DOM の Input Time の value プロパティは、<input type=time> 要素の value 属性に設定されている値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、時刻の値を後から設定（変更）することも可能です。なお、value プロパティで扱われる時刻は「HH:MM」（24時間表記）形式の文字列である点に注意してください。構文value プロパティの基本構文は以下のとおりです。値を取得する場合inputTimeObject.value値を設定する場合inputTimeObject.value = 文字列サンプルコー
-
HTML DOM Input Timeのstepプロパティの使い方を解説
HTML DOMのInput Time stepプロパティは、時刻入力フィールド（<input type=time>）における「秒」の有効な間隔（ステップ値）を設定・取得するためのプロパティです。このプロパティを利用することで、ユーザーが選択できる秒の値を一定の間隔に制限できます。構文stepプロパティの構文は以下のとおりです。値を取得する場合inputTimeObject.step値を設定する場合inputTimeObject.step = numberパラメータ設定できるnumber値の条件は以下のとおりです。seconds（秒）60を割り切れる数値である必要があります（例：1