HTML DOM Input Time の max プロパティの使い方を解説
概要
HTML DOM の Input Time max プロパティは、<input type="time"> 要素の max 属性の値を取得（return）および設定（set）するためのプロパティです。max 属性を指定することで、ユーザーが入力できる時刻の上限を定義でき、フォームのバリデーション（入力チェック）に活用できます。
構文
max プロパティの基本構文は以下のとおりです。
値を取得する場合
inputTimeObject.max
値を設定する場合
inputTimeObject.max = hh:mm:ss.ms
文字列値の形式
「hh:mm:ss.ms」は以下の各要素で構成されます。
| 値 | 説明 |
|---|---|
| hh | 時間を表します（例：18） |
| mm | 分を表します（例：59） |
| ss | 秒を表します（例：00） |
| ms | ミリ秒を表します（例：700） |
使用例
以下は、Input Time max プロパティを使用した具体的なサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>Input Time max</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-max</legend>
<label for="TimeSelect">Time Elapsed:
<input type="time" id="TimeSelect" value="00:00:00" max="03:00:00">
</label>
<input type="button" onclick="getElapsedTime()" value="Confirm">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
divDisplay.textContent = 'Max Time: '+inputTime.max;
function getElapsedTime() {
if(inputTime.value <= inputTime.max)
divDisplay.textContent = 'You took '+inputTime.value+' out of available '+inputTime.max;
else
divDisplay.textContent = 'You cannot exceed max time: '+inputTime.max;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Confirm」ボタンをクリックする前：
上限を超える無効な時刻を入力して「Confirm」ボタンをクリックした後：
有効な時刻を入力して「Confirm」ボタンをクリックした後：
このように、max プロパティを使えば、JavaScript 側から時刻入力フィールドの上限値を動的に参照したり変更したりすることが可能になります。フォームで時刻の範囲制限を行いたい場合に非常に便利な機能です。
-
HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説
HTML DOM の Input Range max プロパティは、レンジスライダー（type=range の入力コントロール）における max 属性の値を設定または取得するために使用されます。max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。構文max プロパティに値を設定する場合rangeObject.max = numberここで number は、スライダーコントロールの最大値を表します。max プロパティの値を取得する場合var value = rangeObject
-
HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime