【学习笔记10】HTML补充+H5对input的扩展

最新推荐文章于 2023-08-14 14:41:21 发布

m0_1229

最新推荐文章于 2023-08-14 14:41:21 发布

阅读量197

点赞数

分类专栏： HTML 学习文章标签： html 前端 html5

本文链接：https://blog.csdn.net/m0_60525480/article/details/119392294

版权

学习同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

1.HTML的补充：

（1）progress：进度条
max:默认为1
value：0-1之间，小数

<form action="" method="post">
            指定：<progress value="70" max="100"></progress>70%
            <br>
            指定：<progress value="30" max="100"></progress>30%
            <br>
            默认：<progress value="0.2"></progress>20%
        </form>

结果：

（2）表示用户动作产生的结果 oninput

<form oninput="result.value=num.value*num.value">
            <input type="number" name="num">的平方=
            <output name="result"></output>
</form>
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
            <input type="number" name="num1">+
            <input type="number" name="num2">=
            <output name="result"></output>
</form>

结果：

（3）meter

      <meter max="100" low="60" high="90" value="40"></meter>40 绿色
      <meter max="100" low="60" high="90" value="65"></meter>65 黄色
      <meter max="100" low="60" high="90" value="95"></meter>95 红色

结果：

（4）datalist：表示其它控件可用的值

<label>
                <input list="myDate" name="myDate">
            </label>
            <datalist id="myDate">
                <option value="1"> 谷歌</option>
                <option value="2"> 火狐</option>
                <option value="3"> 百度</option>
                <option value="4"> UC</option>
 </datalist>

结果：

与select做对比

1. select选中后显示的是文本内容 datalist显示value
2. 提交的时候都是提交value
3. 在firefox上只显示内容，在chrome上显示内容和value

2.H5中对input的扩展

（1）数字控件器：

<form method="GET">
            <input type="number" min="0" max="100" step="5">
</form>

结果：控制用户输入数字的范围，且更改数字时间隔为5

（2）进度条的拉取

<input type="range" min="0" max="100" step="5">

结果：

（3）其它：

搜索框：<input type="search">
            <br>
电话：<input type="tel">
            <br>
地址：<input type="url">
            <br>
邮箱：<input type="email">
            <br>
颜色：<input type="color">
            <br>
日期：<input type="date">
            <br>
周：<input type="week">
时间：<input type="time">
            <br>
月：<input type="month">

结果：

（4）输入框效果