[49-4] input要素で時間を入力してもらおう (datetime, date, month, week, time)

<input>要素の「type属性」で「時間」に関するフォーム部品を作りましょう。
全部HTML5からの新しいtype属性の値です。

  type属性の値 部品の役割
<input>要素で作る
「時間」関連の部品
type="datetime"  new 日付と時刻の入力
(協定標準時による時間で)
type="datetime-local"  new 日付と時刻の入力
(ローカルな時間で)
type="date"  new 日付の入力
type="month"  new 月の入力
type="week"  new 週の入力
type="time"  new 時刻の入力

対応ブラウザなら、値が「time」以外のとき「カレンダー」が出ます。
「datetime」「datetime-local」と「time」のときは、時間をチョイスするために
スピンボタン( スピンボタン )が現れて、TVのチャンネル変更のように時間を選べます。

対応ブラウザは…

左は<input type="datetime">のOperaでのプレビュー。

Operaはそこそこ対応。Chromeも頑張ってるかな。
Firefox、Safari、IE9以下は未対応です。( IE10 onWin8 は未確認)
というかんじで今(2013年3月記)はまだ全体的に不完全な対応状況。
各「値」ごとにサンプルを作りましたので、いろいろなブラウザで動作を試してみてください。

ほかの属性で機能を追加できます

type属性以外の属性も使って、さらに機能を追加できます。
(各属性については、それぞれのリンクで詳細をご覧ください。)

  • min属性で、最小値を設定する(時間と数の部品にのみ使える属性)
  • max属性で、最大値を設定する(時間と数の部品にのみ使える属性)
  • step属性で、入力の段階(ステップ)を制限する(時間と数の部品にのみ使える属性)
  • required属性で「必須項目」にする(未記入だと送信不可のバリデート)
  • list属性で、選択肢を表示する(<datalist>要素を併用します)
  • autofocus属性で、HTML文書のロード後すぐに「フォーカス(記入のための選択)」する
  • form属性で <form>要素の外に出してレイアウトする
  • autocomplete属性で「オートコンプリート(履歴から入力予測する)」機能の指定をする
  • readonly属性で「読み取り専用」にする
  • disabled属性で「使用不可」にする

type="datetime" と "datetime-local"

違いは「タイムゾーン」を書くか書かないか、だけ。
どちらも「日付け(年月日)と時刻」をチョイスしてもらう部品です。

<input type="datetime">だと協定標準時 (UTC) での日付と時刻の入力欄になります。
これは「2013-04-01T20:00:00+09:00といった具合で、最後に +00:00 というカタチで「タイムゾーン」を書いておきます。

上記のように日時の最後に「+09:00」と書けば日本時間。日本は協定標準時より9時間早いので。
協定標準時での表記について詳しくは「[24] 追加を示す<ins>と、削除されたことを示す<del>を使おう」をご覧ください。

<input type="datetime-local">なら、協定標準時に関係なくローカルな日付と時刻の入力欄になります。「2013-04-01T20:00:00」ってタイムゾーン無しで書くだけ。

とにかく両方とも、書式はこんな決まりがあります。

  • 日時は「西暦-月-日 T 時:分:秒」で書き、datetime のときはタイムゾーンも追加。
  • 西暦年は4桁、月日と時分秒は2桁の数字で。時分秒の直前に大文字の「T」を入れます。
  • 時間は24時間表記。(午後6時ジャストは「T18:00:00」)
  • 秒は省略可。(最後の「:00」をとります。午後6時ジャストは「T18:00」でOK)
  • 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。

では、サンプルを見てみましょう。

●サンプル1
<input type="datetime">のサンプルです。
name属性で部品名をつけます。名前は何でもいい。ここでは「datetime」にしました。
min属性で最小値(ここでは2013年4月1日9時)、max属性で最大値(ここでは2013年6月30日21時)を指定しています。
step属性秒単位で指定します。ここでは7200秒 (2時間) にしました。2時間ずつのステップでチョイスできます。step属性を書かなければ初期値は60秒 (1分) ずつのステップです。

<input type="datetime" name="datetime" min="2013-04-01T09:00+09:00" max="2013-06-30T21:00+09:00" 
step="7200" required>

「datetime」は Opera だけが対応してるみたい。
Chrome は「datetime」だとカレンダー表示しないようですね。なぜか「datetime-local」なら出るけど。
(クリックでサンプルHTMLが開きます)

Safari と Firefox では、ただのテキストフィールド。

サンプル1は、required属性を指定しています。
日時を入力しないで送信ボタンを押すとすると、アラートが出ます。

●サンプル2
<input type="datetime-local">のサンプルです。属性の指定は上のサンプル1と同じ。
ただし、サンプル2では value属性初期値を書いています。

<input type="datetime-local" name="datetime" min="2013-04-01T09:00" max="2013-06-30T21:00" 
step="7200" value="2013-04-01T09:00" required>

ユーザが入力し忘れてるのに、value属性の値で送信されてしまう。required属性を指定していても意味無し。required属性とvalue属性は一緒に使わないってことですね。
(クリックでサンプルHTMLが開きます)

<input type="datetime-local">は、Chromeでもカレンダーは表示されるのですが、時間のチョイス不可。
Operaは完全対応。
(左はChrome。カレンダーがデカくて見やすい)
Safari と Firefox では「2013-04-01T09:00」と
HTMLソースのまま表示されて、う〜ん使えない。。
(ユーザがこの方法で入力できると期待できない)

●サンプル3
list属性も使えるという事なので試してみました。
list属性は、<datalist>要素も併用します。

<input type="datetime-local" name="datetime" list="datelist" required>
<datalist id="datelist">
<option value="2013-05-01T13:00"></option>
<option value="2013-06-01T13:00"></option>
<option value="2013-07-01T13:00"></option>
</datalist>

上のソースのような「3択」にしたかったのですが…。

Chrome はカレンダー無しでリストが出て優秀。
(左はChromeのプレビュー)
Firefox もダブルクリックでリストが出て、使えます。
しかしOpera はガッカリ。カレンダー表示してしまって3択できず、list属性は無視のもようです。
Safai はまったくの未対応。
(クリックでサンプルHTMLが開きます)

type="date" で「日付」を入力してもらおう

"date"は文字通り、type="datetime" から「time(時間)」が無くなっただけ。
日付け(年月日)をチョイスしてもらう部品です。
書式は「西暦-月-日」で、2013年5月1日なら「2013-05-01」です。

●サンプル1
datetimeのときと同じく、name属性min属性max属性step属性required属性を使用。
ここでは、nameは「date」、最小値は2013年4月1日、最大値は2013年6月30日を指定。
step属性は1日単位の指定になります。ここでは7日にしました。
step属性を書かなければ初期値の1日ずつのステップになります。

<input type="date" name="date" min="2013-04-01" max="2013-06-30" step="7" required>

「date」は Chrome が全勝。
(Opera は list属性 (サンプル2) がダメでした)
ChromeとOperaは、step属性を7日ごとに設定したので、他の日は選択できないようになっています。
(左は Chrome のプレビュー)
Safari はカレンダー表示はしませんが、ステップで7日ごとにチョイスできるので、これは使えます。
Firefox は全然ダメ。 (on Mac)

value属性を指定せずに required属性を指定すれば、ユーザが日にちを選択しないで送信ボタンを押すと、アラートが出ます。
(左は Chrome のプレビュー)
(クリックでサンプルHTMLが開きます)

●サンプル2
list属性のテスト。list属性は、<datalist>要素も併用します。

<input type="date" name="date" list="3date" required>
<datalist id="3date">
<option value="2013-05-01"></option>
<option value="2013-06-01"></option>
<option value="2013-07-01"></option>
</datalist>

Chrome, Firefox はlist属性が効いています。
(左はFirefoxのプレビュー)
やはりOperaは「datetime」のときと同様にカレンダーが出て、list属性は無視。
Safariはまったくダメ。
(クリックでサンプルHTMLが開きます)

type="month" で「月」を入力してもらおう

"month"は、年・月をチョイスしてもらう部品です。
書式は「西暦-月」で、2013年5月なら「2013-05」になります。

月単位でチョイスできます。
(左はChromeのプレビュー)

step属性で2ヶ月ステップにしたので、選択できない月があります。
(左は同じく Chromeのプレビュー)
(クリックでサンプルHTMLが開きます)

こちらもサンプルを1、2 作りました。
●サンプル1でname属性min属性max属性step属性required属性使用。
 step属性は1月単位の指定になります。(サンプルでは2ヶ月にしました)
 step属性を書かなければ初期値の1月ずつのステップになります。
●サンプル2は、list属性のテストです。

ブラウザごとの動作の結果は、「date」と同様。
Chrome全勝。Operaは list属性がダメ。Firefoxは list属性だけ可。Safariは全敗。
(クリックでサンプルHTMLが開きます)

type="week" で「週」を入力してもらおう

"week"は、 をチョイスしてもらう部品です。
書式は「西暦-W週」で、「元旦のある週の月曜から日曜まで」が第一週で「W01」になります。
2013年の第28週なら「2013-W28」になります。
(週単位でカウントするのは医療関係かな? なんだか私は使用頻度は低そうです)

週単位でチョイスできます。
サンプルでは、step属性で2週ステップにしたので、選択できない週があります。
(左はChromeのプレビュー)
(クリックでサンプルHTMLが開きます)

こちらもサンプルを1、2 作りました。
●サンプル1でname属性min属性max属性step属性required属性使用。
 step属性は1週間単位の指定になります。(サンプルでは2週間にしました)
 step属性を書かなければ初期値の1週ずつのステップになります。
●サンプル2は、list属性のテストです。

ブラウザごとの動作の結果は、「date」や「month」と同様。
Chrome全勝。Operaは list属性がダメ。Firefoxは list属性だけ可。Safariは全敗。
(クリックでサンプルHTMLが開きます)

type="time" で「時間」を入力してもらおう

"time"は、時間 をチョイスしてもらう部品です。
書式は「00:00:00」で、24時間表記で時分秒を表します。午後2時30分45秒なら「14:30:45」です。

  • 秒は省略可。(午後2時ジャストは「14:00」でOK)
  • 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。

"time"はカレンダーは無く、時間の入力欄のみです。
対応ブラウザでは、直接入力やスピンボタン( スピンボタン ) でチョイスできます。

対応ブラウザでは、左のように、バリデートのアラートも出ます。(左はChromeのプレビュー)
(クリックでサンプルHTMLが開きます)

こちらもサンプルを1、2 作りました。
●サンプル1でname属性min属性max属性step属性required属性使用。
 step属性は1秒 ごとの指定ができます。(サンプルでは30分(=1800秒)にしました)
 step属性を書かなければ初期値の1分 (60秒) のステップになります。
●サンプル2は、list属性のテストです。

ブラウザごとの動作の結果は良くないです。全勝のブラウザは無し。
Chromeは、min, max, step属性は効いてるもよう。list属性は未対応。
Operaは、Win版は Chrome と同じですが、Mac版はスピンボタン( スピンボタン )に反応せず、直接入力しかできませんでした。min, max, step属性は効いているもよう。
Firefoxは、文字列を入力しても送信できてしまう。しかし list属性だけ対応。
Safariは、WINでは全敗。MACのは、min, max, step属性は有効。list属性には未対応。
(クリックでサンプルHTMLが開きます)

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプルを作りました。
今回の「時間」関連の部品も一応使っていますが、まだ実用性はありませんねぇ。
ま、新しい属性全体の使用例として見てください。
OperaChrome だと、新しい属性がほぼ対応しているようです。(2013年3月記)

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

次回予告

今回「時間」関連のサンプルを作ってみての感想は、こりゃーまだ使えんね
ブラウザごとに各属性への対応状況がまちまちで。過渡期ですな。

さて次回は、「数値」を入力するための部品 <input type="number"> を使ってみましょう。
これもHTML5からの新しい値です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.