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

HTML DOM Input Timeのnameプロパティとは？取得・設定方法を実例で解説

HTML DOM の Input Time name プロパティは、<input type="time"> 要素の name 属性の値を文字列として返すプロパティです。値の取得だけでなく、新しい文字列を代入することで name 属性を動的に変更することも可能です。

構文

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

値を取得する場合

inputTimeObject.name

値を設定する場合

inputTimeObject.name = '文字列'

使用例

ここでは、Input Time の name プロパティを使った具体的なサンプルコードを紹介します。ボタンのクリックによって name 属性の値を参照したり、書き換えたりする動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Input Time name</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-name</legend>
<label for="TimeSelect">Appointment at Stephan:</label>
<input type="time" name="Stephan" id="TimeSelect" value="18:00">

<input type="button" onclick="changeMeeting()" value="Confirm">
<input type="button" onclick="changeName()" value="Book at Dorcel's">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var labelDisplay = document.getElementsByTagName("label")[0];
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    function changeMeeting() {
        if(inputTime.name === 'Stephan')
                divDisplay.textContent = 'Stephan Hospital is closed today';
        else
            divDisplay.textContent = 'Appointment at Dorcel Hospital fixed at: '+inputTime.value;
    }
    function changeName(){
        inputTime.name = 'Dorcel';
        labelDisplay.textContent = 'Appointment at '+inputTime.name+': ';
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような動作になります。

「Confirm」ボタンをクリックした場合

name 属性が初期値の「Stephan」のままなので、「Stephan Hospital is closed today」というメッセージが表示されます。

HTML DOM Input Timeのnameプロパティとは？取得・設定方法を実例で解説

「Book at Dorcel's」ボタンをクリックした場合

changeName() 関数により name 属性が「Dorcel」に書き換えられ、ラベルの表示も「Appointment at Dorcel:」に更新されます。

HTML DOM Input Timeのnameプロパティとは？取得・設定方法を実例で解説

name 属性変更後に「Confirm」ボタンをクリックした場合

name 属性が「Dorcel」に変わっているため、if 文の条件分岐が変化し、「Appointment at Dorcel Hospital fixed at:」に入力された時刻が表示されます。

HTML DOM Input Timeのnameプロパティとは？取得・設定方法を実例で解説

まとめ

Input Time の name プロパティを使うことで、JavaScript から時刻入力フィールドの name 属性を読み取ったり、動的に変更したりできます。フォーム送信時のデータ識別や条件分岐処理など、インタラクティブな Web アプリケーション開発において役立つ機能です。

  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