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

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）输入框效果      

autofocus :在输入框加能自动聚焦
      placeholder="请输入用户名"，输入框提示
      required：校验被填项
      pattern="1\d{10}" 设置输入框格式
      maxlength="11"