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

HTML DOM の Input Time form プロパティの使い方とサンプルコード

HTML DOM の form プロパティは、input type="time"（時刻入力フィールド）を内包するフォームへの参照を返します。このプロパティを利用することで、JavaScript から特定の時刻入力フィールドがどのフォームに属しているのかを取得でき、そのフォームの id などの属性情報にもアクセスできるようになります。

構文

form プロパティの基本構文は以下のとおりです。

form オブジェクトへの参照を返す場合：

inputTimeObject.form

サンプルコード

それでは、Input Time の form プロパティを使用した具体例を見てみましょう。以下の例では、時刻入力フィールドが属するフォームの ID を取得し、試験の開始時刻とともに画面上に表示しています。

<!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">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   function getform() {
      divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

「Which Exam?」ボタンをクリックする前：

HTML DOM の Input Time form プロパティの使い方とサンプルコード

「Which Exam?」ボタンをクリックした後：

HTML DOM の Input Time form プロパティの使い方とサンプルコード

ボタンをクリックすると getform() 関数が呼び出され、inputTime.form.id によってフォームの ID（この例では「Physics」）が取得されます。その結果、div 要素には「Physics exam starts from 14:00」というテキストが表示されます。このように form プロパティを使えば、時刻入力フィールドから所属フォームを簡単に辿ることができます。

  1. HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri

  2. HTML DOM Input Timeのstepプロパティの使い方を解説

    HTML DOMのInput Time stepプロパティは、時刻入力フィールド（<input type=time>）における「秒」の有効な間隔（ステップ値）を設定・取得するためのプロパティです。このプロパティを利用することで、ユーザーが選択できる秒の値を一定の間隔に制限できます。構文stepプロパティの構文は以下のとおりです。値を取得する場合inputTimeObject.step値を設定する場合inputTimeObject.step = numberパラメータ設定できるnumber値の条件は以下のとおりです。seconds（秒）60を割り切れる数値である必要があります（例：1