HTML

This is a form field that allows users to select a year and week from a calendar.

<input type="week">

 HTMLの input要素の type="week" は、ウェブページ上でユーザーが「週」を選択できるようにするためのものです。たとえば、カレンダーから特定の年とその年の中の週を選ぶことができます。これは、予定を計画したり、特定の週に何かが起こったかを記録したりする時に非常に便利です。

 使い方はとてもシンプルです。フォームの一部としてこのタイプの input を設置すると、ユーザーは特定の週を選ぶことができるようになります。ウェブブラウザによっては、週を選択するためのカレンダーがポップアップで表示されることもあります。この機能を使うと、例えば「2024年の第10週」といった具体的な週を指定して、情報を送信したり、日程を確認したりすることができます。

 この type="week" は、日付や時間を扱う他の inputタイプ(dateや timeなど)と同じように、フォームを介して特定の情報を収集したい時に特に役立ちます。週ごとの計画や記録に関心がある場合、この機能を活用すると良いでしょう。

 つまり、type="week" は、ウェブページで特定の週を選ぶために使われるツールです。これにより、週単位でスケジュールを管理したり、イベントや活動を計画する際に役立つ情報を簡単に集めることができます。

 name属性は入力欄に名前を付ける属性ですが、form要素でデータが送信される際、name属性で指定した名前と、入力された値が一組になって送信されます。

 ユーザーは空文字を入力することができます。 入力必須にする場合には、required属性を併用してください。

type="week" の場合に指定可能な属性

autocomplete
この属性を使うと、以前に入力した値を自動で入力欄に表示できるようになる。たとえば、前に選んだ週を忘れずにすぐに選べるようにするために使うことができます。(on, off, default)(初期値は default)
autofocus
ページを開いた時に、この入力欄に自動的にカーソルを合わせてくれる。これによって、すぐに週を選び始められるから便利です。
disabled
この属性があると、入力欄を使えなくすることができる。フォームに入力させたくない時に使います。
max と min
これらを使って、選べる週の最大値や最小値を設定できる。たとえば、特定の期間内の週だけを選ばせたい時に便利です。
name
入力欄に名前をつけることができる。これは、フォームを送信した時にどの入力欄かを識別するのに使います。
readonly
ユーザーが入力フィールドの値を変更することはできなくなりますが、フォームとしてはその値を送信できます。これは、ユーザーに特定の週を見せたいが、それを変更させたくない場合に便利です。
required
この属性があると、フォームを送信する前に必ず週を選ばないといけなくなる。大切な情報を忘れずに入力させたい時に使います。
step
これは使えません。type="week"では意味をなさないから、気にしなくて大丈夫です。
value
この属性で、入力欄に最初から表示する週を設定できる。フォームを開いた時に、あらかじめ選択しておきたい週がある時に使います。

Sample

 ここでは、「学校のプロジェクト提出週の選択」を想定してみました。この場合、生徒や教員がフォームを使用して、どの週にプロジェクトを提出するかを選択できます。これにより、教員は提出予定の週を簡単に追跡し、計画を立てることができます。

プロジェクト提出週を選択してください。



HTML

<p>プロジェクト提出週を選択してください。</p>
<form>
	<label for="projectWeek">提出週:</label><br>
	<input type="week" id="projectWeek" name="projectWeek"><br>
	<input type="submit" value="送信">
</form>

CSS

form {
	padding: 0 1em 1em;
}

input[type="week"] {
	margin: 1ex auto;
}

 このコードは、ウェブページに「プロジェクト提出週を選択してください」という指示とともに、週を選択するための入力フィールドを表示します。ユーザーが週を選択し、「送信」ボタンをクリックすると、選択した週の情報がフォームとして送信されます。このシンプルなフォームは、学校のウェブサイトやプロジェクト管理システムに組み込むことで、教員と生徒の両方にとって週ごとのプロジェクト提出をスムーズに計画する手助けとなります。