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

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

Input Week の name プロパティとは

HTML DOM の Input Week name プロパティは、type="week" の入力要素（<input type="week">）に name 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティを使って新しい文字列を設定することも可能です。

name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から動的に参照したり変更したりできることで、柔軟なフォーム操作が実現できます。

構文

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

値を取得する場合

inputWeekObject.name

値を設定する場合

inputWeekObject.name = '文字列'

サンプルコード

それでは、Input Week の name プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>週-イベント名</legend>
<label for="WeekSelect">今日の日付 :
<input type="week" id="WeekSelect" value="2019-W52" name="Sunburn Goa">
</label>
<input type="button" onclick="getnameimum()" value="この週に開催される音楽イベントは？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function getnameimum() {
        if(inputWeek.value === '2019-W52')
            divDisplay.textContent = '音楽イベント: '+inputWeek.name;
        else
            divDisplay.textContent = '開催中の音楽イベントはありません';
    }
</script>
</body>
</html>

実行結果

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

ボタンをクリックする前

「この週に開催される音楽イベントは？」というボタンが表示された状態で、週の入力フィールドには「2019-W52」が設定されています。

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

ボタンをクリックした後

ボタンをクリックすると、入力フィールドの値が「2019-W52」と一致しているかどうかが判定され、一致していれば name 属性の値である「Sunburn Goa」が画面に表示されます。

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

まとめ

Input Week の name プロパティを使うことで、JavaScript から週入力フィールドの name 属性を簡単に取得・設定できます。フォームデータの識別や動的なフォーム制御が必要な場面で活用できる便利なプロパティなので、ぜひ覚えておきましょう。

  1. HTML DOM Input Week の value プロパティの使い方を解説

    Input Week の value プロパティとはHTML DOM の Input Week value プロパティは、<input type=week> で作成された入力フィールドの value 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、週の値を動的に変更することも可能です。value の値は「YYYY-Www」という形式（例：2021-W35）で表され、年と、その年の何週目にあたるかを組み合わせた文字列になります。構文value プロパティの基本的な構文は以下のとおりです。値を取得する（文字列を返す）inp

  2. HTML DOM Input Week の type プロパティとは？使い方を解説

    はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した