さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】フォーム 日付関連の入力

Pocket
LINEで送る

フォームにおいて、日付関連の入力を行うtype属性をご紹介します。

日付関連の入力を行うtype属性は以下のものがあります。

datetime・・・タイムゾーンUTCの日時を入力するための入力欄を作成
datetime-local・・・ローカルの日時を入力するための入力欄を作成
date・・・日付を入力するための入力欄を作成
week・・・週を入力するための入力欄を作成
month・・・月を入力するための入力欄を作成
time・・・時刻を入力するための入力欄を作成

日付はカレンダーから入力し、時刻は時、分を指定して入力できるようになっています。

【使用例(datetime)】

<input max="2010-12-31" min="2010-01-01" name="datetime" type="datetime" />

type属性がdatetime-local、date、week、monthの場合でもカレンダーによる入力補助が表示されます。
datetime、datetime-localの場合にのみ時刻入力の欄が表示されます。
時刻入力のみを使用したい場合は、timeを使用します。

【使用例(time)】

<input name="time" type="time" />

min、max、stepといった属性も指定できますので、入力してほしい条件によって使用するようにしましょう。

【対応ブラウザ】
Opera9.0以降

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容