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

HTMLの週入力タイプ（type="week"）の使い方をわかりやすく解説

HTMLでは、<input type="week"> を使用することで、週入力タイプ（ウィーク入力フィールド）を実装できます。この入力タイプを使うと、ユーザーが「年」と「週」を選択できるようになります。

週入力フィールドにフォーカスして入力を行うと、日付選択用のポップアップ（ピッカー）が表示され、そこから週と年を簡単に選択できます。

ブラウザ対応状況に注意

注意： 週入力タイプ（type="week"）は、Firefox や Internet Explorer ではサポートされていません。動作が確認されているのは Google Chrome などの一部のブラウザです。実装の際は、対象ブラウザでの動作を必ず確認しましょう。

HTMLの週入力タイプ（type= week ）の使い方をわかりやすく解説

以下のサンプルコードを実行すると、HTMLで週入力タイプを使用する方法を実際に確認できます。選択した週と年がフォームの値として送信されます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input week</title>
   </head>

   <body>
      <form action = "" method = "get">
         詳細情報：<br><br>
         学生名<br><input type = "name" name = "sname"><br>
         研修週<br><input type = "week" name = "week"><br>
         <input type = "submit" value = "送信">
      </form>
   </body>
   
</html>

このコードでは、フォーム内に学生名の入力フィールドと、週を選択するための type="week" フィールドを配置しています。送信ボタンを押すと、選択された週の情報が「2024-W15」のような形式（年と週番号の組み合わせ）で送信されます。研修スケジュールの管理や予約システムなど、週単位で日付を扱いたい場面で便利な入力タイプです。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

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

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