今回は【HTML】type属性weekの使い方、週の入力欄を作成しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はinput type=”week”(週)について解説しております。
今回は、input type="week"
(週)について詳しく解説していきます。
type=”week”では、「週(カレンダー)」の入力欄を作成します。
input type="week"
で作成すると、週の入力欄が作成されます。
注意!
IEとSafari、Firefoxは非対応になります。weekタイプは対応していない為、
通常のinput=textのテキスト入力欄になります。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="week"
になり、週の入力欄になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
type=”week”について
input type="week"
を指定すると、日付(週)の入力欄(キーボード)になります。
ブラウザによっては入力しやすいインターフェイスが表示され、ユーザビリティが向上します。
送信されるデータは「YYYY-Wxx」形式になります。
YYYY | 4桁の年 |
---|
Wxx | 1年の最初から数えた週の数値になります。例)「2021-W10」は、2021年の10週目を表します。 |
---|
書き方は以下のようになります。
<form method="post">
<div>
<label for="week-data">予約希望週</label>
<input type="week" name="week-data" />
</div>
</form>
value属性(入力欄に初期値)について
value属性とは、入力欄に初期値の文字を指定します。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。
例)value="2021-W10"
と指定すると、2021年の10週目が値の初期値になります。
<form method="post">
<div>
<label for="week-date">予約希望週</label>
<input type="week" name="week-date" value="2021-W10" />
</div>
</form>
min属性とmax属性(日付の選択範囲)について
min属性とは、週の最小値を指定します。
例) min="2021-W10"
と指定すると、2021年10週から選択可能になります。
max属性とは、週の最大値を指定します。
例) max="2021-W10"
と指定すると、2021年10週まで選択可能になります。
<form method="post">
<div>
<label for="week-min">予約希望週を入力 min属性(最小値)</label>
<input type="week" name="week-min" value="2021-W10" min="2021-W10" />
</div>
<div>
<label for="week-max">予約希望週を入力 max属性(最大値)</label>
<input type="week" name="week-max" value="2021-W10" max="2021-W10" />
</div>
</form>
min属性とmax属性と続けて指定することにより、範囲指定が可能になります。
例) min="2021-W10"
、max="2021-W14"
と指定すると、2021年10週から2021年14週までの範囲を選択できます。
<form method="post">
<div>
<label for="week-date">予約希望週 min属性とmax属性</label>
<input type="week" name="week-date" value="2021-04"
min="2021-W10" max="2021-W14" />
</div>
</form>
※上記のコードは分かりやすいように、改行を入れております。
required属性(必須項目)について
required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。
<form method="post">
<div>
<label for="week-date">予約希望月</label>
<input type="week" name="week-date" required />
</div>
</form>
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="week"
は、 「日付(週)」の入力欄を作成します。 -
input type="week"
は、 Android・iOSのモバイル端末など対応したブラウザでは月のキーボードが表示されます。 - IEとSafari、Firefoxは非対応になります。weekタイプは対応していない為、通常の入力欄になります。
- 送信されるデータは「YYYY-Wxx」形式になります。
- value属性とは、入力欄に初期値の文字を指定します。
- min属性とは、月の最小値を指定します。
- max属性とは、月の最大値を指定します。
- required属性とは、必須項目に設定します。
- IEとSafari、Firefoxは非対応になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事