・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属性rangeについて試してみます。
要素 input 属性 type="time" type="range"
利用ブラウザ Opera
サンプル(
HTML5 sample11)
rangeは、サンプルのように、バーで値を設定するフォームです。今回は、属性に、 step="1" min="1" max="5"を指定しました。stepは前回同様、数値の間隔、min,maxはその名の通り、最小値と最大値です。
<li>顧客満足度:1<input type="range" name="range" id="range" step="1" min="1" max="5">5</li>
また、今回のサンプルでは、datetime,datetime-localの時と同様に、formのaction先に、datetime.phpというURLを指定しています。
このブログでは、 phpファイルをアップできないので、送信ボタンを押すとエラーになりますので、ご注意ください。
・datetime.php(
ソースコード)
このサンプルを試したい方は、
XAMPPのインストール記事を参照して、PHPが動く環境を作ってみてください。
送信ボタンをクリックした遷移先は以下のようになります。
