jQuery UI では、spinner と呼ばれるコントロールですが、type 属性に number を指定する事によって同様のコントロールになります(Chrome と Firefox )。min 属性と max 属性をさらに指定すると、最小値(min)と最大値(max)の間を( step を指定しなければ 1 づつ )増やしたり減らしたりするコントロールが、フィールドの右横に実装されます。 増減値は、step 属性で指定できるので、汎用性も高いです。 Google Chrome▼ 奇数扱いになっていますフィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。 ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。 その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります
Firefox
Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。
IE11 IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。
▼ 実際の実行
<form action="http://winofsql.jp/php_get.php" target="my_frame" accept-charset="utf-8"> <input type="number" name="userid" value="" step="2" min="-1" max="5"> <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 属性の上書き。
- HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )
- input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性