HTML5 の input 要素の拡張は、IE11 ではかなり遅れているというか控えめなのですが、何故か気合が入っているのが、type=range を使ったいわゆる『スライダー』コントロールですある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。 両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。 そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。 ▼ 実際の実行
<form action="http://winofsql.jp/php_get.php" target="my_frame" accept-charset="utf-8"> <input type="range" name="userid" onmousemove='document.getElementById("userid2").value=this.value;'> <br> <input type="number" name="userid2" id="userid2"> <input type="submit" name="send" value="送信"> </form> <iframe name="my_frame" frameborder="1" scrolling="yes" width="400" height="100" > </iframe>
|
【HTMLの最新記事】
- HTML5 : input 要素に datalist 要素リストを並べて入力候補を作成する
- HTML5 : input 要素の type 属性に tel 指定は、スマホで効力を発揮
- HTML5 : input 要素に pattern 属性
- HTML5 : input 要素に required 属性
- HTML5 の input 要素の pattern 属性を利用して入力チェック
- PHP にデータを渡す為の HTML としての FORM
- HTML5 の input 要素の type="file" で multiple を使う場合の記述方法と、type="submit" ボタンの FORM 属性の上書き。
- input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性
- HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )