HTML5的一些新特性之增强型表单 - HelloWorld开发者社区

众所周知，HTML5增加了一些新特性，作为一名小白，我也紧跟步伐，接下来几天将会学习HTML5的以下的一些新特性（可能会有多或少，会不定时更新和编辑）：

(1)增强型表单；(2)视频和音频--(重点)；(3)Canvas绘图技术；(4)SVG 绘图技术；(5)拖放API；(6)地理定位-(重点)-熟练掌握； (7)Web Worker；(8)Web Storage ；(9)Web Socket。

1、增强型表单：

（1）一些表单元素的值：

在H4中原有：text/password/checkbox/radio/submit reset/button/number/file；

H5中新增的一些值：email/url;number/search/color/date/ month/week/tel；

（2）新增的表单元素：

H4中原有：input/（select/option）/label。

H5中新增的一些表单元素：datalist/progress/meter/output。

分别介绍一下新增表单元素的功能：

1.叮铃铃----- datalist:

<h2>h5新表单元素---datalist</h2>
        <form>
            <datalist id="list3">
                <option>腾讯</option>
                <option>联想</option>
                <option>东大街的狗场</option>
            </datalist>
               请选择你想去那家公司做CEO
            <input type="text" name="lunch" list="list3"/>
        </form>

它的意义可能主要就在于，能够给你（增大你强迫症的犯病率）很多种不同的选择。值得我们注意的是："datalist"中定义的Id值名称要与“input”表单中“list”定义的值相同，并且“input”中的值仍然可以自行输入。

2.叮铃铃---progress：

它主要是显示一个进度条，有两种形式：

①左右晃动的进度条：；② 具有指定进度值：

基于progress，可以做如下一个小练习：

练习：使用定时器+进度条实现一个可以动态，前进的进度条,到100%停止（或者重复开始和结束）。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <h2>h5新增元素--progress--动态前进的进度条</h2>
        <progress value="0" id="p3"></progress>
        <script>
            //1:获取进度条元素
            var p3 = document.getElementById("p3");
            //2:创建变量保存初始值 0~1
            var v = 0;
            //3:创建定时器间隔1s执行次
            var t = setInterval(function(){
                //3.1:修改变量增 += 0.1
                v += 0.1;
                //3.2:将新值保存进度条value
                p3.value = v;
                //3.3:判断如果变量值大于 0.9 停止定时器
                if(v>0.9){clearInterval(t)}
            },200);

        </script>

</body>
</html>

3.叮铃铃---meter刻度尺

作用：用于识别一个值所处的范围，穷（红色），小康（黄色），暴富（绿色），大体上就是表示随着进度条的不同进度，其颜色也会不同，可以改变其宽、高属性。

基本用法：

练习:使用定时器+meter实现可以动态变化刻度尺, 观察颜色变化。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <h2>h5新增元素--progress--刻度尺</h2>
        <!--薪水(月)-->
        <meter  min="0" max="100000"
                low="20000" high="90000"
                optimum="99999"
                value="0" id="p3"></meter>
        <script>
            //1:获取刻度尺
            var p3 = document.getElementById("p3");
            console.log(1);
            console.log(p3);
            //2:创建变量保存初始值
            var v = 0;
           // 3:创建定时器
            var timer = setInterval(function(){
                //3.1:修改变量的值 += 500
                v += 500;
                //3.2:将新值保存刻度尺
                p3.value = v;
                //3.3:大于100000停止
                if(v>100000){clearInterval(timer)}
            },100);
        </script>
</body>
</html>

4.叮铃铃---output

作用：输出,语义标签,没有任何外观样式,样式上等同于span（最简单的标签）。

例子如下（感觉上没有卵用，应为小计不能随着“value”值的变化而增加或者减少）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <h2>h5新增元素--output--输出</h2>
        商品单价:￥3.5 <br/>
        购买数量: <input type="number" value="1"/> <br/>
        小计: <output>￥3.5</output>
</body>
</html>

总结一下h5中新增的表单属性：

① placehodler 占位符；例：；

② autofocus 自动获取焦点；例：；

③ multiple 允许输入框中出现多个值(用逗号分隔)；例:

④ form 用于把输入域放置到form外部；例：

注意：两个“form”中的id值是相同的。

以下为输入验证相关的新属性：

⑤ required 必填项,内容不能空

⑥minlength 指定字符串最小长度

⑦ maxlength 指定字符串最大长度

例：<input type="text" placeholder="请输入用户名"autofocus name="uname" required minlength="3" maxlength="12"/>

⑧max 指定数字的最大值