HTML 【フォーム】5 ~ input要素(4)日時の入力部品

Time And Date Clock Graphic Concept

今回は、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” 時刻の入力フォーム

対応ブラウザなら、入力補助のカレンダーや時間を選択するためのスピンボタンが表示されます。
colmun_image2356_01
上の表示に対する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”>で入力欄を作ると、ブラウザで次のように表示されます。
colmun_image2356_02
上の表示に対する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属性で初期値を指定すると、ブラウザで次のように表示されます。
colmun_image2356_03
上の表示に対する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属性を使用すると、ブラウザで次のように表示されます。
colmun_image2356_04
上の表示に対する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」です。

colmun_image2356_05
上の表示に対する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日ずつのステップとなります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です