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

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

はじめに

HTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。

構文

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

値を取得する場合

inputWeekObject.type

要素の type 属性の現在値が文字列として返されます。

値を設定する場合

inputWeekObject.type = stringValue

指定した文字列値で type 属性を上書きします。

設定できる文字列値

stringValue には、以下のような値を指定できます。

stringValue説明
week入力タイプが「週」であることを示します
datetime-local入力タイプが「日時（ローカルタイムゾーン）」であることを示します
checkbox入力タイプが「チェックボックス」であることを示します
text入力タイプが「テキスト」であることを示します

なお、Input Week 要素に対して他の type 値を設定すると、要素の振る舞い自体が変化する点に注意してください。通常は type を取得して検証する用途で使われます。

サンプルコード

Input Week type プロパティの動作を確認できる具体的な例を見てみましょう。ボタンをクリックすると、入力フィールドの type 値が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Week type</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>Week-type</legend>
<label for="WeekSelect">イベント日:
<input type="week" id="WeekSelect">
</label>
<input type="button" onclick="getTypeOfInput()" value="入力タイプは何？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function getTypeOfInput() {
        divDisplay.textContent = '入力タイプ: '+inputWeek.type;
    }
</script>
</body>
</html>

実行結果

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

ボタンをクリックする前

週選択用の入力フィールドと「入力タイプは何？」というボタンだけが表示されます。

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

ボタンをクリックした後

ボタンをクリックすると、入力フィールドの type プロパティの値である week が画面に出力されます。

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

まとめ

HTML DOM の Input Week type プロパティを使えば、JavaScript から週型入力フィールドの type 属性を簡単に取得・変更できます。フォームのバリデーションや動的な UI 制御において、入力要素の種類をプログラム的に判定したい場合に役立つ便利なプロパティです。

  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 指定した