HTML基础标签 二

HTML基础标签

• 表单数据验证
• 视频元素
• audio音频元素
• 表单元素总汇
• 表单数据验证

表单数据验证

 <p>
        HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持
    的成熟度还不同。在大部分情况下，可能还是要借助jQuery等前端库来实现丰富的验证功能和显
    示效果。

    常见的三种验证:
        1、必须填写一个值 &lt;input type="text" required&gt;
        2、针对数值型输入限定在某一个范围内&lt;input type="number" min="10" max="100"&gt;
        3、使用正则表达式
    </p>
    <form>
        <!--针对字符串类型定义允许输入的最大字符数-->
        <input type="text" maxlength="5"/>
        <!--要求输入数据非空，否则提交时报错-->
        <input name="username" required placeholder="用户姓名"/>
        <input name="age" type="number" min="16" max="24"/>
        <!--数据验证是在form提交时执行，如果验证成功则继续提交；如果验证失败则报错，并拒绝提交-->
        <input type="submit" value="测试样例"/>
    </form>
    <form>
        <!--正则式校验-->
        <input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
        <input type="submit" value="测试样例"/>
    </form>

    <h3>禁止表单验证</h3>
    <form action="http://li.cc" novalidate>
        <input name="username" required placeholder="用户姓名"/>
        <input type="submit" value="测试样例"/>
    </form>

视频元素

 <p>
        主流视频支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm<br/>
        - 主流的音频编解码器：AAC、MPEG-3、Ogg Voribs
        - 视频编解码器：H.264、VP8、Ogg Theora
        <strong>video 视频元素</strong>
            以往的视频播放，需要借助Flash插件才可以实现。但Flash插件的不稳定性经常让
        浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是HTML5的video元素。
        <ol>
            <li>src视频资源的 URL</li>
            <li>width视频宽度</li>
            <li>height视频高度</li>
            <li>autoplay设置后，表示立刻开始播放视频</li>
            <li>preload设置后，表示预先载入视频</li>
            <li>controls设置后，表示显示播放控件</li>
            <li>loop设置后，表示反复播放视频</li>
            <li>muted设置后，表示视频处于静音状态</li>
            <li>poster指定视频数据载入时显示的图片</li>
        </ol>
    </p>
    <video src="video/sihouzi.mp4" width="800" height="600" poster="img.png" autoplay controls loop muted></video>
    <hr/>
    <h4>兼容多个浏览器</h4>
    <p>
        通过source元素引入多种格式的视频，让更多的浏览器保持兼容
    </p>
    <video width="800" height="600" controls poster="img.png">
        <source src="test.webm">
        <source src="test.mp4">
        <source src="test.ogg">
        <object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object>
    </video>

audio音频元素

 <p>
        audio元素用于嵌入音频内容，而音频元素的属性和视频元素类似。
        音频的支持度和视频类似，使用source元素引入多种格式兼容即可。
        主流的音频格式有：.mp3、 .m4a、 .ogg、 .wav
        <ul>
            <li>src视频资源的URL</li>
            <li>autoplay设置后，表示立刻开始播放音频</li>
            <li>preload设置后，表示预先载入音频</li>
            <li>controls设置后，表示显示播放控件</li>
        </ul>
    </p>
    <audio src="test.mp3" controls autoplay></audio>
    <hr/>
    <h4>多浏览器兼容</h4>
    <audio controls>
        <source src="test.mp3">
        <source src="test.m4a">
        <source src="test.wav">
    </audio>

表单元素总汇

<p>
        - form表示HTML表单<br />
        - input表示用来收集用户输入数据的控件<br />
        - textarea 表示可以输入多行文本的控件<br />
        - select 表示用来提供一组固定的选项<br />
        - option 表示提供提供一个选项<br />
        - optgroup 表示一组相关的option元素<br />
        - button 表示可用来提交或重置的表单按钮（或一般按钮）<br />
        - datalist定义一组提供给用户的建议值<br />
        - fieldset表示一组表单元素<br />
        - legend 表示 fieldset 元素的说明性标签<br />
        - label 表示表单元素的说明标签<br />
        - output 表示计算结果<br />
    </p>
    <h3>form定义表单</h3>
    <p>
        form元素主要是定义本身是一组表单，用于向服务器提交用户录入的一组数据<br />
    <ol>相关属性
        <li>action 表示表单提交的目标地址</li>
        <li>method 表示表单的请求方式：有POST和GET两种，默认GET</li>
        <li>
            <ol>
                <li>GET提交数据上限为2K，POST提交理论上来说没有上限，不同的浏览器产品上限不同</li>
                <li>GET采用？key=value进行传递，采用的是协议头；POST不会在地址栏中出现？,采用的是协议体进行数据传输</li>
                <li>GET语义是查询数据，POST语义是新增数据</li>
            </ol>
        </li>
        <li>enctype表示浏览器对发送给服务器的数据所采用的编码格式。
            有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、
            multipart/form-data（用于上传文件到服务器）、
            text/plain（未规范的编码，不建议使用，不同浏览器理解不同）
        </li>
        <li>name 设置表单名称，以便程序调用</li>
        <li>target 设置提交时的目标位置：_blank、_parent、_self、_top</li>
        <li>autocomplete 设置浏览器记住用户输入的数据，实现自动完成表单。默认为
            on 自动完成，如果不想自动完成则设置 off</li>
        <li>novalidate 设置是否执行客户端数据有效性检查</li>
    </ol>
    </p>
    <form action="bb.do">
        <input type="submit" value="提交数据" />
    </form>

    <h3>input用于用户输入数据</h3>
    <p>
        input元素默认情况会出现一个单行文本框。
    <ol>有五个属性
        <li>autofocus 让光标聚焦在某个 input 元素上，让用户直接输入</li>
        <li>disabled 禁用 input 元素</li>
        <li>autocomplete 单独设置 input 元素的自动完成功能</li>
        <li>form 让表单外的元素和指定的表单挂钩提交</li>
        <li>type是input元素的类型，内容较多</li>
        <li>name 定义 input 元素的名称，以便接收到相应的值</li>
    </ol>
    </p>
    <form>
        <input disabled>
        <input autofocus>
    </form>

    <h3>label添加说明标签</h3>
    <p>
        label元素可以关联input，让用户体验更好。且更加容易设置 CSS 样式
    </p>
    <form>
        <label>用户名称：</label><input name="username" /><br />
        <label for="pwd">用户口令：</label><input name="pwd" id="pwd" />
    </form>

    <h3>fieldset对表单进行编组</h3>
    <p>
        fieldset元素可以将一些表单元素组织在一起，形成一个整体。
    <ol>
        <li>name 给分组定义一个名称</li>
        <li>form 让表单外的分组与表单挂钩</li>
        <li>disabled 禁用分组内的表单</li>
    </ol>
    子标签legend添加分组说明标签
    </p>
    <fieldset>
        <legend>注册表单</legend>
        其它内容部分，例如用户名称: <input type="text" />
    </fieldset>

    <h3>button添加按钮</h3>
    <p>
        button元素添加一个按钮&lt;button&gt;提交数据&lt;/button&gt;
        <br />
        针对input的type属性进行设置，也可以得到按钮，按钮有3个值：
    <ol>
        <li>submit 表示按钮的作用是提交表单，默认</li>
        <li>reset 表示按钮的作用是重置表单</li>
        <li>button 表示按钮为一般性按钮，没有任何作用</li>
    </ol>
    </p>
    <form>
        <input type="text" name="username" placeholder="用户名称" />
        <button onclick="sub1()">提交数据</button>
    </form>
    <form>
        <input type="text" value="默认值" name="username" />
        <input type="submit" value="提交数据" />
        <input type="reset" value="重置数据" />
        <input type="button" onclick="sub2()" value="注册新用户" />
    </form>

    <h3>type属性</h3>
    <p>
        input元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容。
    <ol>
        <li>text 一个单行文本框，默认行为</li>
        <li>password 隐藏字符的密码框</li>
        <li>search 搜索框，在某些浏览器键入内容会出现叉标记取消</li>
        <li>submit、reset、button 生成一个提交按钮、重置按钮、普通按钮</li>
        <li>number、range 只能输入数值的框；只能输入在一个数值范围的框</li>
        <li>checkbox用于实现复选框，允许用户选中多个值</li>
        <li>radio用于实现排他性的单选，只允许用户选中一个值</li>
        <li>hidden 生成一个隐藏控件,数据会提交，但是不显示</li>
        <li>file 生成一个上传控件</li>
        <!--以下内容在不同的浏览器中支持效果不同-->
        <li>image成一个图片按钮</li>
        <li>color颜色选择代码按钮</li>
        <li>email、tel、url 生成一个检测电子邮件、电话号码、网址的文本框</li>
        <li>date、month、time、week、datetime、datetime-local 获取日期和时间</li>
    </ol>
    </p>
    <form>
        <input name="uname1" />
        <input type="password" name="upwd" />
        <input type="search" />
        <input type="number" />
        <input type="range" min="10" max="20" id="range1" value="19" step="3" />
        <input type="button" value="获取range值" onclick="f1()" />
    </form>

        <h3>input的placeholder设置输入时的提示信息</h3>
        <p>
            在移动应用中由于考虑屏幕大小问题，一般不采用label标签进行提示，而是在输入框中提示
        </p>
        <form>
            <input name="username" placeholder="请输入用户名称"/>
            <input type="password" name="password" placeholder="请输入口令"/>
        </form>
        <hr/>
    <form>
        <!--checkbox允许多选，可以使用一个名称name提交多个数据，选中对应的选项，提交的是对应value值;
            属性checked表示默认选中-->
        <input type="checkbox" value="11" name="hobby">排球
        <input type="checkbox" value="12" name="hobby" checked>足球
        <input type="checkbox" value="13" name="hobby">蓝球
        <input type="checkbox" value="14" name="hobby">其它
    </form>
    <form>
        <!--radio用于实现单选，一个单选组中只能选中一个选项，单选组是通过name相同实现的-->
        <input type="radio" value="true" name="sex" checked>男
        <input type="radio" value="false" name="sex">女
    </form>
    <form>
        <input type="image" src="image/pic01.jpg" width="200px" height="100px" onclick="f2()" />
        <a href="javascript:return void(0);" onclick="f2()"><img src="image/pic01.jpg" height="100px" /></a>
    </form>
    <form>
        <input type="color" name="col" id="col" />
        <input type="button" value="获取数据" onclick="f3()" />
    </form>
    <form>
        <!--可以根据不同的数据类型，弹出不同的软键盘,并且默认提交数据时会进行对应的格式验证，如果不符合格式要求则弹出提示-->
        <input type="email" name="email" />
        <input type="tel" name="phone" />
        <input type="url" name="homepage" />
        <input type="submit" value="提交数据" />
    </form>
    <form>
        <input type="date" />
        <input type="time" />
    </form>
    <form>
        <input type="hidden" value="123" name="id" />
        <input type="submit" value="提交数据" />
    </form>
    <form method="post" enctype="multipart/form-data">
        <input type="file" />
    </form>

    <h3>下拉框列表 select</h3>
    <p>select默认用于实现单项的下拉选择,选项使用option定义</p>
    <form>
        <select name="classId">
            <option value="">请选择班级编号</option>
            <!-- value是提交值,标签体内容为显示内容，selected属性用于设置当前项为默认选中项-->
            <option value="1" selected>航海1班</option>
            <option value="2">航空2班</option>
        </select>
    </form>
    <form>
        <!--multiple用于设置多选，按照ctrl键即可多选-->
        <select name="classId" multiple>
            <option value="">请选择班级编号</option>
            <option value="1" selected>航海1班</option>
            <option value="2">航空2班</option>
        </select>
    </form>
    <p>
        optgroup 对 select 元素的option选项进行编组
    </p>
    <form>
        <select>
            <optgroup label="水果类">
                <option value="1">苹果</option>
                <option value="2" selected>橘子</option>
                <option value="3" label="香蕉">香蕉</option>
            </optgroup>
            <optgroup label="饮料类">
                <option value="11">苹果汁</option>
                <option value="12">橘子汁</option>
                <option value="3" label="香蕉">香蕉汁</option>
            </optgroup>
        </select>
    </form>

    <h3>textarea多行文本框</h3>
    <p>
        生成一个可变更大小的多行文本框。
        <ol>
            <li>name 设定提交时的名称</li>
            <li>form 将表单外的多行文本框与某个表单挂钩</li>
            <li>>readonly 设置多行文本框只读</li>
            <li>disabled 将多行文本框禁用</li>
            <li>maxlength 设置最大可输入的字符长度</li>
            <li>autofocus 获取焦点</li>
            <li>placeholder 设置输入时的提示信息</li>
            <li>rows设置行数, cols设置列数</li>
            <li>wrap 设置是否插入换行符，有 soft 和 hard 两种</li>
            <li>required 设置必须输入值，否则无法通过验证</li>
        </ol>
    </p>
    <form>
        <textarea rows="6" cols="50" placeholder="请留下您宝贵的遗言" required></textarea>
    </form>

    <h3>output计算结果</h3>
    <p>
        output 就是计算两个文本框之间的值，其实就是内嵌了 JavaScript 功能
    </p>
    <form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
        <input type="number" id="num1"> x <input type="number" id="num2"> = 
        <output for="num1 num2" name="res">
    </form>
</body>
<script>
    function f1() {
        alert(document.getElementById("range1").value);
    }
    function f2() {
        alert('图片按钮!');
    }
    function f3() {
        var obj = document.getElementById("col");
        alert(obj.value)
    }
</script>

表单数据验证

    <p>
        HTML5对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持
    的成熟度还不同。在大部分情况下，可能还是要借助jQuery等前端库来实现丰富的验证功能和显
    示效果。

    常见的三种验证:
        1、必须填写一个值 &lt;input type="text" required&gt;
        2、针对数值型输入限定在某一个范围内&lt;input type="number" min="10" max="100"&gt;
        3、使用正则表达式
    </p>
    <form>
        <!--针对字符串类型定义允许输入的最大字符数-->
        <input type="text" maxlength="5"/>
        <!--要求输入数据非空，否则提交时报错-->
        <input name="username" required placeholder="用户姓名"/>
        <input name="age" type="number" min="16" max="24"/>
        <!--数据验证是在form提交时执行，如果验证成功则继续提交；如果验证失败则报错，并拒绝提交-->
        <input type="submit" value="测试样例"/>
    </form>
    <form>
        <!--正则式校验-->
        <input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
        <input type="submit" value="测试样例"/>
    </form>

    <h3>禁止表单验证</h3>
    <form action="http://li.cc" novalidate>
        <input name="username" required placeholder="用户姓名"/>
        <input type="submit" value="测试样例"/>
    </form>