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

HTML DOM 入力日時（datetime-local）のnameプロパティとは？使い方を解説

nameプロパティの概要

HTML DOM の Input DatetimeLocal の name プロパティは、<input type="datetime-local"> 要素の name 属性の値を文字列として返します。さらに、このプロパティに対して新しい文字列を代入することで、name 属性の値を動的に変更することも可能です。

name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から参照・操作できることで、動的なフォーム処理に役立ちます。

構文

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

値を取得する場合

inputDatetimeLocalObject.name

name 属性に新しい文字列を設定する場合

inputDatetimeLocalObject.name = '文字列'

サンプルコード

それでは、Input DatetimeLocal の name プロパティを使った具体的な例を見てみましょう。以下の例では、ボタンをクリックすると datetime-local 入力フィールドの name 属性の値を取得して表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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>Datetime-Local-name</legend>
<label for="datetimeLocalSelect">Today :
<input type="datetime-local" id="datetimeLocalSelect" value="2019-05-23T12:45" name="Rupenzel">
</label>
<input type="button" onclick="getnameimum()" value="Who's DOB is this? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function getnameimum() {
        if(inputDatetimeLocal.value === '2019-05-23T12:45')
            divDisplay.textContent = 'Above DOB is of '+inputDatetimeLocal.name;
        else
            divDisplay.textContent = 'Above DOB is of no one!';
    }
</script>
</body>
</html>

このコードでは、「Who's DOB is this?」ボタンをクリックすると getnameimum() 関数が呼び出され、入力フィールドの値が指定の日時と一致するかどうかを判定します。一致する場合は inputDatetimeLocal.name によって name 属性の値（この例では「Rupenzel」）を取得し、画面に表示します。

実行結果

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

ボタンをクリックする前

日時入力フィールドに「2019-05-23T12:45」が設定された状態で表示されます。

HTML DOM 入力日時（datetime-local）のnameプロパティとは？使い方を解説

ボタンをクリックした後

条件が一致しているため、「Above DOB is of Rupenzel」というテキストが表示され、name 属性の値が正しく取得できたことが確認できます。

HTML DOM 入力日時（datetime-local）のnameプロパティとは？使い方を解説

まとめ

Input DatetimeLocal の name プロパティを使えば、JavaScript から datetime-local 型の入力フィールドの name 属性を簡単に読み書きできます。フォームの動的な制御やカスタムバリデーションなど、実践的な Web 開発の場面でぜひ活用してみてください。

  1. HTML DOM Input Week の name プロパティの使い方と取得・設定方法

    Input Week の name プロパティとはHTML DOM の Input Week name プロパティは、type=week の入力要素（<input type=week>）に name 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティを使って新しい文字列を設定することも可能です。name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から動的に参照したり変更したりできることで、柔軟なフォーム操作が実現できます。構文name プロパティの基本的な構文は以下の通りです。値を取得する場合input

  2. HTML DOM パスワード入力フィールドのnameプロパティとは？使い方を徹底解説

    HTML DOM の Input Password name プロパティは、パスワード入力フィールド（<input type=password>）の name 属性を設定または取得するために使用されるプロパティです。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。また、JavaScript 側でも name 属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。構文（Syntax）name プロパティの基本的な構文は以下のとおりです。name プロパティを設定する場合passwordObject.nam