・HTML5 入門 input要素 掲載記事
HTML5 入門（input要素) HTML5 入門（input要素 type属性 tel）HTML5 入門（input要素 type属性 search）HTML5 入門（input要素 type属性 url）HTML5 入門（input要素 type属性 email）HTML5 入門（input要素 type属性 datetime,datetime-local）HTML5 入門（input要素 type属性 date,month,week）HTML5 入門（input要素 type属性 time,number）HTML5 入門（input要素 type属性 range）HTML5 入門（input要素 type属性 color）HTML5 入門（input要素 新しい属性のまとめ）今回の記事では、input要素のtype属性time,numberについて試してみます。
要素 input 属性 type="time" type="number"
利用ブラウザ Opera
サンプル(
HTML5 sample10)
HTML5について調べていると、time,numberは、用途はだいぶ異なりますが、同じような使い方をするので、一つの記事としてまとめることにしました。
この2つの違いは、セットされる値が時刻か値かというとこですね。
<li>time1:<input type="time" name="time1" id="time" step="5"></li>
<li>time2:<input type="time" name="time2" id="time" step="300"></li>
<li>number:<input type="number" name="number" id="number" step="5"></li>
<li><input type="submit" name="submit" value="送信" id="submit"></li>
今回、各要素にstep5,step300,step5を入れました。
type="time"では、秒単位で▲▼をクリックした時の間隔が指定できるようです。
また、type="time"では、stepに60の倍数の値を指定すると、秒は表示されないようです。
また、今回のサンプルでは、datetime,datetime-localの時と同様に、formのaction先に、datetime.phpというURLを指定しています。
このブログでは、 phpファイルをアップできないので、送信ボタンを押すとエラーになりますので、ご注意ください。
・datetime.php(
ソースコード)
このサンプルを試したい方は、
XAMPPのインストール記事を参照して、PHPが動く環境を作ってみてください。
送信ボタンをクリックした遷移先は以下のようになります。
