[49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time)
最終更新日:2018年01月31日 (初回投稿日:2013年03月29日)<input>要素の「type属性」で「時間」に関するフォーム部品を作りましょう。
対応ブラウザでは、「カレンダー」などのピッカーや「スピナー( )」が現れて、日付や時間を選ぶことができます。
下の表はインデックスになっています。各値をクリックすると、該当の項目にジャンプします。
type属性の値 | 部品の役割 | |
---|---|---|
<input>要素で作る 「時間」関連の部品 |
この値は廃止になりました。 |
|
type="datetime-local" new | ローカルな時間で日付と時刻の入力 | |
type="date" new | 日付の入力 | |
type="month" new | 月の入力 | |
type="week" new | 週の入力 | |
type="time" new | 時刻の入力 |
● 2017年12月:値「datetime」が廃止になっているため、このページは全体的に書き直しました。
type="datetime-local" で「日付と時刻」を
<input type="datetime-local">は、日付と時刻の入力部品になります。
書式にはこんな決まりがあります。
- 日時は「西暦-月-日 T 時:分:秒」で書く。
- 西暦年は4桁、月日と時分秒は2桁の数字。時分秒の直前に大文字の「T」を入れる。
- 時間は24時間表記。(例:午後6時ジャストは「T18:00:00」)
- 秒は省略可。(最後の「:00」をとります。午後6時ジャストは「T18:00」でOK)
- 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。
datetime-local の「required属性」を使ったサンプル
サンプルです。
サンプルの HTMLソースはこちら。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の日時:<input type="datetime-local" name="datetime" required></label>
<input type="submit" value="送信">
</fieldset>
</form>
name属性で部品名をつけます。formのデータを扱うプログラムで、送信値と紐付けるためです。
また、required属性を指定しています。
日時を入力しないで送信ボタンを押すとすると、アラートが出ます。
対応ブラウザは Chrome, Opera, Edge
対応ブラウザでは「カレンダー」が表示され、日付を選ぶことができます。
(Edgeは独自のピッカーが出て日付を選べます。)
「スピナー( )」で日付・時間を1つずつ選ぶこともできます。
下は Chrome での表示です。
IE, Safari は未対応。
iOS Safari は対応していますが、min, max, step属性に未対応。
Firefox は、ver.57 から対応となっていますが、実際は未対応のようです。
(2017年12月記 / 参考:Can I Use - datetime-local)
datetime-local の「max, min, step, value属性」を使ったサンプル
min属性で最小値、max属性で最大値を指定できます。対応ブラウザでは、min属性〜 max属性の範囲しか選択できなくなります。
value属性で初期値を書いて置くこともできます。
この場合、ユーザが何も選択しなくても value属性の値で送信されるので、required属性を書いても意味無し。
step属性は秒単位で指定します。
下のサンプルでは、step属性を 2時間ずつ(7200秒)に指定しています。
サンプルの HTMLソースはこちら。
<label>ご希望の日時:
<input type="datetime-local" name="datetime" min="2018-01-01T09:00" max="2018-01-31T21:00" step="7200" value="2018-01-01T09:00"></label>
datetime-local の「list属性」を使ったサンプル
list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。
サンプルの HTMLソースはこちら。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の日時:
<input type="datetime-local" name="datetime" list="datelist"></label>
<datalist id="datelist">
<option value="2018-01-01T13:00"></option>
<option value="2018-01-02T13:00"></option>
<option value="2018-01-03T13:00"></option>
</datalist>
<input type="submit" value="送信">
</fieldset>
</form>
対応ブラウザでは、下図のようなリストが表示されます。最終行の「その他...」でカレンダーが表示されます。
type="date" で「日付」を入力してもらおう
"date"は文字通り、日付け(年月日)をチョイスしてもらう部品です。
書式は「西暦-月-日」で、2018年5月1日なら「2018-05-01」です。
type="date" は、Firefox も一応カレンダーが表示されますが、中途半端な対応。
min, max, value属性の値を無視するので入力しにくいです。(2017年12月記)
date の「max, min, step, required属性」を使ったサンプル
type="date" では step属性は1日単位の指定になります。
step属性を書かなければ初期値の1日ずつのステップになります。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の日:
<input type="date" name="date" min="2020-01-05" max="2020-01-31"
step="7" value="2020-01-05" required></label>
<input type="submit" value="送信">
</fieldset>
</form>
date の「list属性」を使ったサンプル
list属性は、<datalist>要素も併用します。
あらかじめ、選択肢のリストを作って置けて、ユーザーはその中から選択できます。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の日:
<input type="date" name="date" list="3date" required ></label>
<datalist id="3date">
<option value="2020-01-01"></option>
<option value="2020-01-02"></option>
<option value="2020-01-03"></option>
</datalist>
<input type="submit" value="送信">
</fieldset>
</form>
type="month" で「月」を入力してもらおう
"month"は、年・月をチョイスしてもらう部品です。
書式は「西暦-月」で、2018年5月なら「2018-05」になります。
month の「max, min, step, required属性」を使ったサンプル
type="month" では step属性は1ヶ月単位の指定になります。step属性を書かなければ初期値の1月ずつのステップになります。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の月:
<input type="month" name="month" min="2018-04" max="2018-12" step="2" required></label>
<input type="submit" value="送信">
</fieldset>
</form>
month の「list属性」を使ったサンプル
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の月:
<input type="month" name="month" list="3month" required></label>
<datalist id="3month">
<option value="2018-05"></option>
<option value="2018-06"></option>
<option value="2018-07"></option>
</datalist>
<input type="submit" value="送信">
</fieldset>
</form>
type="week" で「週」を入力してもらおう
"week"は、週 をチョイスしてもらう部品です。
書式は「西暦-W週」で、「元旦のある週の月曜から日曜まで」が第一週で「W01」になります。2018年の第28週なら「2018-W28」になります。
week の「max, min, step, required属性」を使ったサンプル
weekの step属性は、1週間単位。step属性を書かなければ初期値の1週ずつのステップになります。
サンプルでは2週間のステップにしました。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の週:
<input type="week" name="week" min="2018-W01" max="2018-W26" step="2" required></label>
<input type="submit" value="送信">
</fieldset>
</form>
week の「list属性」を使ったサンプル
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望の週:
<input type="week" name="week" list="3weeks" required></label>
<datalist id="3weeks">
<option value="2018-W14"></option>
<option value="2018-W15"></option>
<option value="2018-W16"></option>
</datalist>
<input type="submit" value="送信">
</fieldset>
</form>
type="time" で「時間」を入力してもらおう
"time"は、時間 をチョイスしてもらう部品です。
書式は「00:00:00」で、24時間表記で時分秒を表します。午後2時30分45秒なら「14:30:45」です。
- 秒は省略可。(午後2時ジャストは「14:00」でOK)
- 秒は小数点以下の指定も可能。小数点(.)のあとに数字を続けます。
time の「max, min, step, required属性」を使ったサンプル
weekの step属性は、秒単位で指定します。
サンプルでは30分(1800秒)のステップにしました。
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望時間:
<input type="time" name="time" min="09:00" max="16:59" step="1800" required></label>
<input type="submit" value="送信">
</fieldset>
</form>
time の「list属性」を使ったサンプル
<form class="sample">
<fieldset>
<legend>お客様情報</legend>
<label>ご希望時間:
<input type="time" name="time" list="3time" required></label>
<datalist id="3time">
<option value="09:00"></option>
<option value="12:00"></option>
<option value="15:00"></option>
</datalist>
<input type="submit" value="送信">
</fieldset>
</form>
ほかの属性で機能を追加できます
今回はサンプルで、min, max, step, required, list属性などを使ってみましたが、その他の属性も使って、さらに機能を追加できます。
- autofocus属性:HTMLのロード後すぐフォーカス(記入のための選択)する
- form属性: <form>要素の外に出してレイアウトする
- autocomplete属性:オートコンプリート機能の指定をする
- readonly属性:読み取り専用にする
- disabled属性:使用不可にする
<input>要素の 索引ページ
<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「日付・時間」の選択の部品以外は、下記の一覧をご覧ください。
- <input>要素の type属性の値一覧
<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。
- <input>要素の 他の属性一覧
次回予告
次回は「数値」を入力するための部品 <input type="number"> を使ってみましょう。
これもHTML5からの新しい値です。
- 関連記事
-
- [49-10-2] input要素で作るボタンの見た目を CSSで変えよう
- [49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)
- [49-9] input要素で非表示のデータを送ろう ( hidden )
- [49-8] input要素でファイルを送ってもらおう (file)
- [49-7] input要素で「色」を選んでもらおう (color)
- [49-6] input要素で「レンジ(割合)」を選んでもらおう(range)
- [49-5] input要素で「数」を入力してもらおう (number)
- [49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time)
- [49-3] input要素で ラジオボタン や チェックボックスを作ろう (radio, checkbox)
- [49-2] input要素でテキストを入力してもらおう ( text, search, tel, url, email, password )
- [49-1] input要素の属性一覧・ type属性の値一覧
- [48] フォーム部品のグループ化のための fieldset要素と legend要素
- [47] form要素で「送信先」と「送信方法」を指定しよう
- [46] template要素でテンプレートを作ろう
- [45-5] meta要素で OGPを設定しよう
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク