HTML5 -01- H5表单新增特性

以你之姓@ 2021-12-14 03:55 424阅读 0赞

H5主要做什么？主要用来做效果CSS3，做结构H5标签，应用api-定位等js。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZG9uZ2xpYW5nemhpY2Fp_size_16_color_FFFFFF_t_70][]

### 1.1什么是HTML5 ###

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
    </html>

### 1.2HTML5-html5中的语义标签 ###

<header>头部</header>
    <nav>导航</nav>
    <main>
        <article>float作用于块级元素</article>
        <aside>右边</aside>
    </main>
    <footer>底部</footer>

### 1.3HTML5-html5中的语义标签的兼容性 ###

第一种方式：手动创建标签
    第二种方式：引入第三方插件

将行级元素转换为块级元素

main{
               
             /*将行级元素转换为块级元素*/
                display: block;
                width: 100%;
                height: 500px;
                background-color: #ccc;
            }

### 1.4HTML5-表单的新增type属性 ###

*  a)email： 输入email格式 -校验格式
 *  b)tel： 手机号码 -在移动端打开数字键盘
 *  c)url： 只能输入url格式 
 *  d)number： 只能输入数字 -（value="60" max="100" min="0"）
 *  e)search： 搜索框 -X删除
 *  f)range： 范围，可以进行拖动，通过value进行取值 -（value="50" max="100" min="0"）
 *  g)color ：拾色器，通过value进行取值
 *  h)time ：时间
 *  i)date： 日期 不是绝对的
 *  j)datetime： 时间日期 
 *  k)month： 月份
 *  l)week： 星期

![20190707160552607.png][]

### 1.5HTML5-表单中新增的其它属性 ###

*  placeholder：提示文本，提示占位
 *  autofocus:自动获取焦点
 *  autocomplete:自动完成：on:打开 off:关闭 1.必须成功提交过:提交过才会记录 2.当前添加autocomplete的元素必须有name属性

*  required:必须输入，如果没有输入则会阻止当前数据提交
 *  pattern:正则表达式验证\*:代表任意个 ?:代表0个或1个 +：代表1个或多个

*  multiple：可以选择多个文件

文件：<input type="file" name="photo" multiple> <br>
    邮箱：<input type="email" name="email" multiple><br>

*  form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交

地址：<input type="text" name="address" form="myForm">

### 1.6HTML5-新增的表单元素--输入+选择框 ###

网址：<input type="url" list="urls">
        <datalist id="urls">
            
            <option value="http://www.baidu.com" label="百度"></option>
            <option value="http://www.sohu.com"></option>
            <option value="http://www.163.com"></option>
        </datalist>

### 1.7HTML5-新增的表单元素 ###

### 1.8HTML5-表单的新增事件 ###

*  1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件
 *  2.onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次
 *  3.oninvalid:当验证不通过时触发

### 1.9HTML5-进度条 ###

第一种 max:最大值 value:当前进度值
    <progress max="100" value="100"></progress>
    第二种 度量器  high:规定的较高的值 low:规定的较低的值 max:最大值 min:最小值 value:当前度量值
    <meter max="100" min="0" high="80" low="40" value="30"></meter>

### 1.10HTML5-表单案例总结  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZG9uZ2xpYW5nemhpY2Fp_size_16_color_FFFFFF_t_70 1][]

### 1.11HTML5-多媒体标签 ###

### 1.12HTML5-dom操作 ###

### 1.13HTML5-类样式操作 ###

### 1.14HTML5-自定义属性 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZG9uZ2xpYW5nemhpY2Fp_size_16_color_FFFFFF_t_70]: /images/20211213/c4ec271d8ad348ba82af3503e52fcdaa.png
[20190707160552607.png]: /images/20211213/71e30eb1c7c6428c9fa372098d2041f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZG9uZ2xpYW5nemhpY2Fp_size_16_color_FFFFFF_t_70 1]: /images/20211213/06c0988e3fa1406ea2c40901f6e98075.png