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

HTML DOM Input Week オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

HTML DOM の Input Week オブジェクトは、HTML の <input type="week"> 要素（週を選択する入力フィールド）を JavaScript から操作するためのオブジェクトです。この記事では、Input Week オブジェクトの基本的な構文、主な属性、利用できるメソッド、そして実際のコード例までわかりやすく解説します。

構文（Syntax）

JavaScript で type 属性が week の入力要素を作成するには、以下のように記述します。

var weekObject = document.createElement("INPUT");
weekObject.type = "week";

まず document.createElement() で input 要素を生成し、その後 type プロパティに「week」を設定することで、週選択用の入力フィールドとして動作します。

Input Week オブジェクトの主な属性

weekObject で利用できる代表的な属性は以下のとおりです。

属性説明
autocomplete週フィールドの autocomplete 属性の値を定義します（自動補完の有効/無効）。
autofocusページ読み込み時に、その週フィールドへ自動的にフォーカスを当てるかどうかを設定します。
defaultValue週フィールドのデフォルト値を取得または設定します。
disabled週フィールドが無効化（disabled）されているかどうかを取得または設定します。
formその週フィールドを含んでいる form 要素への参照を返します。
max週フィールドの max 属性（選択可能な最大の週）の値を取得または設定します。
min週フィールドの min 属性（選択可能な最小の週）の値を取得または設定します。
name週フィールドの name 属性の値を定義します。
readOnly週フィールドが読み取り専用かどうかを設定します。
requiredフォーム送信時に、その週フィールドの入力が必須かどうかを定義します。
step週フィールドの step 属性（移動幅となる週数）の値を定義します。
typeフォーム要素の種類（この場合は「week」）を返します。
value週フィールドの value 属性の値を定義します。形式は「YYYY-Www」（例：2019-W36）です。

Input Week オブジェクトのメソッド

また、以下のメソッドも利用できます。

メソッド詳細
stepDown(n)週フィールドの値を n 週間だけ減らします。
stepUp(n)週フィールドの値を n 週間だけ増やします。

サンプルコード：form プロパティの使用例

ここでは、Input Week の form プロパティを使った例を見てみましょう。ボタンをクリックすると、週フィールドが属しているフォームの ID を表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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="Mid-Term">
<fieldset>
<legend>Week-form</legend>
<label for="WeekSelect">試験週:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="この週の試験は何？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function showExamination() {
        divDisplay.textContent = 'Examinations: '+inputWeek.form.id;
    }
</script>
</body>
</html>

実行結果

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

ボタンをクリックする前

HTML DOM Input Week オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

「2019-W36」という初期値が設定された週選択フィールドと、「この週の試験は何？」というボタンが表示されます。

ボタンをクリックした後

HTML DOM Input Week オブジェクトの使い方を徹底解説！属性・メソッド・サンプルコード付き

ボタンをクリックすると、inputWeek.form.id によって週フィールドが所属するフォームの ID「Mid-Term」が画面に表示されます。このように form プロパティを使うことで、入力要素から親フォームの情報に簡単にアクセスできます。

まとめ

HTML DOM の Input Week オブジェクトを使うと、週選択フィールドの値の取得・設定はもちろん、min/max による範囲指定や stepUp/stepDown による週単位の増減など、柔軟な操作が可能になります。フォームバリデーションやカレンダー系 UI の実装にぜひ活用してみてください。

  1. HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

    HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意

  2. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input