備忘録的プログラミングリファレンス

<input type="week">

 <input type="week">は、その年度の第何週目かを入力ができる input のタイプです。FORM エレメントに使用します。

 日付けの表記はブラウザによります。

<input type="week">
<label>第何週目か : <input name="val_week" type="week" value=""></input></label>
	
実行結果

 データはYYYY-Wxx形式で送信されます。

 必ず入力値が必要な場合は required を指定します。

 CSS、スタイルシートを利用して入力値を検証するには :in-range:out-of-range クラスを使います。 この擬似クラスによって、入力値の範囲によって自動的にスタイルが反映できます。

 日付ついては<input type="date">、日付と時刻については<input type="datetime-local">、時刻については<input type="time">を参照してください。
 その他に年月度の入力用に<input type="month">もあります。

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

 ここでは送信するという前提でnameパラメーターは付けるようにしています。送信したくないデータにはnameパラメーターを付けない方法があります。

AttributeValueExtra information
type 扱うデータタイプまたはinputタグの形状
name*必須。データ送信に必要。
value 初期値または設定値
idエレメントをユニークとします。cssにも使えます。
classcssに使います。同名のclassは同じスタイルが適応されます。
max最大値。入力範囲の指定で最大値。
min最小値。入力範囲の指定で最小値。
step入力値の間隔。

 必ず入力値が必要な場合は required を指定します。


ブラウザでの見え方(このページのスタイルが反映されています)

 ブラウザにもよりますが、データはYYYY-Wxx形式で送信されます。

関連typeについて

  • button... 汎用ボタン。scriptに利用する
  • checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
  • color... カラーピッカー。色選択に使用します。
  • date... 日付け
  • datetime-local... 日付けと時刻(ローカルタイムゾーン)
  • email... emailアドレス
  • file... ファイルのアップロード
  • hidden... 画面に表示しないがサーバーに送信するデータ
  • image... 任意の画像を利用したカスタム用ボタン
  • month... 年度と月度
  • number... 数値
  • password... パスワード入力
  • radio... 選択肢が必要な場合
  • range... 調整バーによる数値入力
  • reset... リセットボタン。入力データをクリア
  • search... 検索用
  • submit... 送信ボタン
  • tel... 電話番号
  • text... テキスト入力。改行を含む場合は<textarea>を
  • time... 時刻
  • url... URL
  • week... 年度の第何週目か