HP制作者、Web開発者向けのHTMLタグリファレンス・使用方法・サンプル

<input type="week">「週の入力」

<input type="week">は週（年初からの通し週）を入力する場合に使用します。
※<input type="week">は、HTML5勧告版で削除されました。
HTML規格HTML4.01HTML5
使用可否×○
ブラウザIEChromeFirefoxSafari
使用可否×○×○

<input type="week"> の属性

【構文】
<input type="week" min="2014-W01" max="2014-W21" ・・・>
属性意味値のサンプルなど
name="固有名"入力に付ける固有名"text1"
value="値"初期値の表示
形式：YYYY-Wxx		"2014-W38"
min="数値"入力できる最小日時(YYYY-Wxx)
※HTML5で追加		"2014-W05"
max="数値"入力できる最大日時(YYYY-Wxx)
※HTML5で追加		"2014-W50"
step="数値"入力の単位（週）
※HTML5で追加		"1"(初期値)
disabled入力の無効化"disabled"
readonly読み取り専用"readonly"
form="フォーム名"送信するフォームの関連付け
※HTML5で追加		"form01"
autofocusフォーカス（カーソル）を設定
※HTML5で追加		"autofocus"
placeholder="テキスト"入力ヒントの表示
※HTML5で追加		"入力してください"
required入力を必須とする
※HTML5で追加		"required"
list="ID名"入力候補のリスト指定
※HTML5で追加		"id01"
autocomplete="on","off"オートコンプリート機能の使用有無
※HTML5で追加
値意味
on使用する
off使用しない
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性

<input type="week">のサンプル

<input type="week" name="sample1" style="width:150px">

ブラウザによっては、スピンボタンが表示され、上下に選択可能となります。
一部のブラウザで、送信(SUBMIT)時に数値チェックが行われます。
※非対応のブラウザもあるので注意が必要

ブラウザによって表示が異なります
ブラウザ週（年通算）の入力支援入力チェック
IE11

通常のテキストボックスで表示される

入力チェックは行われない。
文字やあり得ない週でも送信される

Chrome32

入力チェックが行われる。
あり得ない週は送信されない。

Firefox27

通常のテキストボックスで表示される

入力チェックは行われない。
文字やあり得ない週でも送信される

Safari5.1

スピンボタンが表示され、選択により
入力ができる。

入力チェックは行われない。
文字やあり得ない週でも送信される

初期値の指定【value,min,max,step】

<input type="week" name="smp01" value="2014-W05" min="2014-W01" max="2014-W25" step="4">

ブラウザによっては、スピンボタンが表示され、上下に選択可能となります。
一部のブラウザで、送信(SUBMIT)時に週チェックが行われます。
※非対応のブラウザもあるので注意が必要

入力の無効化【disabled】

<input type="week" name="smp01" value="2014-W02" disabled>

読み取り専用【readonly】

<input type="week" name="smp01" value="2014-W02" readonly>

入力必須【required】

<input type="week" name="smp01" required>

送信(SUBMIT)時に入力必須チェックが行われます。
※非対応のブラウザもあるので注意が必要

ブラウザによって表示が異なります
IE11
Chrome32
Firefox27
Safari5.1

オートコンプリートの使用有無【autocomplete】

<input type="week" name="smp01" autocomplete="off">

<input type="week">のスタイルシートサンプル

<style type="text/css">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="week" name="smp01" placeholder="入力してください" class="inputSample">

スタイルシートを使用することで、色々な入力が可能となります。

留意事項

  • <input type="week">はHTML5で追加ました。このため、対応していないブラウザも多く執筆時点ではJavaScriptなどで同等機能を実現することが推奨されます。ただし、今後ブラウザのバージョンアップが行われ一般に浸透すれば有効なTYPEとなります。

関連するHTMLタグ

<form>入力フォーム域の定義
フォーム内に定義されたinputタグ情報が送信される
<select>セレクトボックス
<textarea>複数行テキスト入力
<input type="text">1行テキスト入力
<input type="password">パスワード入力
<input type="hidden">非表示
<input type="checkbox">チェックボックス
<input type="radio">ラジオボタン
<input type="file">ファイルのアップロード
<input type="submit">formデータの送信ボタン
<input type="image">画像を使用したボタン
<input type="reset">from内の入力内容リセットボタン
<input type="button">一般ボタン
<input type="email">メールアドレス入力
<input type="url">URL入力
<input type="search">検索文字入力
<input type="tel">電話番号入力
<input type="number">数値入力（スピンボタン入力）
<input type="date">日付入力（スピンボタン入力）
<input type="datetime">UTC（協定世界時）日時入力（スピンボタン入力）
<input type="datetime-local">日時入力（スピンボタン入力）
<input type="month">年月入力（スピンボタン入力）
<input type="time">時刻入力（スピンボタン入力）
<input type="range">数値の範囲選択（スライダ選択）
<input type="color">色・カラーの範囲選択（カラーパレット選択）
cman.jp>WEBページ作成TOP>HTMLタグ・リファレンス><input type="week"> 「週（年通算）の入力」