今回は、input要素で作る部品の中で、時間を入力する部品についてまとめます。
フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ? フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ? form要素の使い方
HTML 【フォーム】3 ? form要素で使う主な属性の使い方
HTML 【フォーム】4 ? fieldset要素とlegend要素
HTML 【フォーム】5 ? input要素(1)フォーム部品一覧
HTML 【フォーム】5 ? input要素(2)テキスト入力部品
HTML 【フォーム】5 ? input要素(3)ラジオボタンとチェックボックス
目次
1.日時を入力する部品
2.type以外の属性で機能を追加
3.datetimeとdatetime-local
4.dateで日付入力
1.日時を入力する部品
日時に関するinput要素のtype属性の値は、HTML5からの新しい属性値です。
type属性の値 | 部品の種類 | |
---|---|---|
input要素で作る 日時関連の部品 |
type = ”datetime” | 日付と時刻の入力フォーム (協定標準時による時間で入力する場合) |
type = ”datetime-local” | 日付の入力フォーム (ローカルな時間で入力する場合) |
|
type = ”date” | 日付の入力フォーム | |
type = ”month” | 月の入力フォーム | |
type = ”week” | 週の入力フォーム | |
type = ”time” | 時刻の入力フォーム |
対応ブラウザなら、入力補助のカレンダーや時間を選択するためのスピンボタンが表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type=”datetime-local”>
2.type以外の属性で機能を追加
type属性以外の属性を使って、機能を追加することができます。
min属性 最小値を設定する max属性 最大値を設定する step属性 入力の段階(ステップ)を設定する required属性 必須入力項目にする(未記入だと送信不可となる) list属性 選択肢を表示する(datalist要素を併用する) autofocus属性 HTML文書のロード後すぐにフォーカス(記入のために選択された状態に)する form属性 form要素の外に出してレイアウトする autocomplete属性 オートコンプリート機能(履歴から入力を予測する機能)の設定をする readonly属性 読み取り専用の状態にする disabled属性 使用不可の状態にする
3.datetimeとdatetime-local
<input type=”datetime”>と<input type=”datetime-local”>は、どちらも日付(年月日)と時刻を入力するための部品です。
そして、両者には、タイムゾーンを書くか書かないか、の違いがあります。
<input type=”datetime”>は、協定標準時(UTC)での日付と時刻の入力欄になります。
入力の際には、「2017-02-09T22:00:00+09:00」というように、最後に+00:00という形式でタイムゾーンを書きます。
上のように、日時の最後に+09:00と書けば日本時間になります(日本時間は協定標準時より9時間早いため)。
<input type=”datetime-local”>は、協定標準時は関係なくローカルな日付と時刻の入力欄になります。
入力の際には、「2017-02-09T22:00:00」というように、タイムゾーンなしで書きます。
書式には次のようなルールがあります。
・日時は「YYYY-MM-DD T HH:MM:SS」の形で書き、datetime の場合はタイムゾーンも追記します。
(西暦年は4桁、月日と時分秒は2桁の数字で書き、時分秒の直前に大文字の「T」を入れます。)
・時間は24時間表記です。
・秒は省略可能です。
・秒は小数点以下の指定も可能です。
●<input type=”datetime-local”>で入力欄を作ると、ブラウザで次のように表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type=”datetime-local” name=”datetime” min=”2017-02-09T22:00″ max=”2018-02-09T22:00″ step=”7200″ required>
name属性で、datetimeという部品名を付けています。
min属性で最小値(上の例では2017年2月9日22時)、max属性で最大値(上の例では2018年2月9日22時)を指定しています。
step属性は秒単位で指定するので、上の例では7200秒(2時間)に指定しています。2時間ずつのステップで選択できます。step属性を書かなかった場合は、デフォルト値は60秒ずつのステップになります。
required属性を指定していますので、日時を入力せずに送信ボタン等を押すとアラートが出ます。
●value属性で初期値を指定すると、ブラウザで次のように表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type=”datetime-local” name=”datetime” min=”2017-02-09T22:00″ max=”2018-02-09T22:00″ step=”7200″ value=”2017-02-09T22:00″>
value属性で指定した値が、入力欄にデフォルトで表示されます。
required属性は、ユーザの入力忘れを防止する目的で使用しますが、value属性を使用している場合は、ユーザの未入力時でも、value属性の値でそのまま送信されてしまうため、required属性を指定しても意図した働きは期待できません。
●list属性を使用すると、ブラウザで次のように表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type=”datetime-local” name=”datetime” list=”datelist” required>
<datalist id=”datelist”>
<option value=”2016-02-09T22:00″></option>
<option value=”2017-02-09T22:00″></option>
<option value=”2018-02-09T22:00″></option>
</datalist>
list属性は、datalist要素も併用して、上記の様に書きます。
選択リストで「その他」をクリックすると、カレンダーが表示されて、リストにない日付の入力ができます。
4.dateで日付入力
<input type=”date”>は、日付を入力するための部品です。
type=”datetime” から文字通りtime(時間)が無くなったものです。
日付(年月日)を選択して入力してもらいます。
書式は「YYYY-MM-DD」です。
上の表示に対するhtmlコードは、以下の通りです。
<input type=”date” name=”date” min=”2018-02-09″ max=”2019-02-09″ step=”7″ required>
datetime-localの時と同じく、name属性、min属性、max属性、step属性、required属性を指定しています。
step属性は、1日単位の指定となります。上の例では7日に指定しています。
step属性を指定しない場合、初期値である1日ずつのステップとなります。
コメントを残す