HTML表单number和range高级元素的使用

HTML表单number和range高级元素的使用

技术教程gslnedu2025-05-04 14:27:176A+A-


number类型元素

number属性提供了一个输入数字的输入类型,用户可以直接输入数字,或者通过单击微调框中的向上或者向下按钮选择数字。 代码格式如下。

<input type="number" name="shuzi"/>

(1)编辑代码

打开记事本,编写代码,在<body>标签中加入以下代码。并保存为HTML格式文件。



(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示,用户可以直接输入数字,也可以单击微调按钮选择合适的数字。



小提示:强烈建议用户min和max属性规定输入的最小值和最大值。

最小值为1,最大值为30


range类型元素

Range属性是显示一个滚动的控件。和number属性一样,用户可以使用max、min和step属性控制控件的范围。代码格式如下。

<input type="range" name=" " min=" " max=" " />

(1)编辑代码

打开记事本,编写代码,在<body>标签中加入以下代码。并保存为HTML格式文件。



(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示,用户可以拖曳滑块,从而选择合适的数字。



小提示:默认情况下,滑块位于滚珠的中间位置。如果用户指定的最大值小于最小值,则允许使用反向滚动轴。目前浏览器对这一属性还不能很少地支持。

点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8