h5新特性总结&表单实现

今天开始学h5和css3的新特性，边学边持续更新。

1.语义化标签：

header，nav，main，article，aside，footer

（1）IE9可能支持h5，但是行级元素在设置宽度的时候是失效的。并不是所有的浏览器都能够识别出

，需要给它转换为块级元素：

display:block;

（2）IE8以及IE8以下不支持h5：不认识语义标签，完全无效；解决方法：

a.手动创建标签：document.createElement("header");所创建的标签都是行级元素，需要在样式里加display:block;

b.引入第三方插件：html5.shiv.min.js，引入后可以做到兼容：

补充一个：之前学vue的时候，如果不用vue-cli，链接vue的是

（3）IE10全部支持。

 

2.表单标签

.新增type属性，之前的是text，password，新增有email，tel，url，number，search，range，color，time，date，datetime-local，month，week

email提供验证，包含@+域名；

tel没有验证，在移动端可以打开数字键盘；

url验证，必须包含http：//

number，只能输入数字（可小数），有上调下降箭头调整，可以设置max，min，value默认值

search，提供人性化体验，最后有个x全部删除

range，设置范围max，min拉动条

color，颜色选取

time，点击选取--：--

date，箭头下拉有日历控件选择 年/月/日

datetime，大多数浏览器不支持，只有safari支持。

datetime-local：浏览器支持

month，week，生成月，周

 

3.表单其他属性

placeholder：提示文本，提示占位，“请输入xxx”

autofocus：自动获取焦点，不用鼠标去点

autocomplete：自动补全，但是有两个前提：

（1）必须成功提交过

（2）加autocomplete的这个元素必须有name属性

用户名：
 

required：必须输入

pattern：正则表达式验证，

回顾：

*：任意个

？：0个或1个

+：1个或多个

手机号码：pattern=“^(\+86)?1\d{10}$”

手机：

multiple：

(a) type为file：上传文件，加multiple可以上传多个文件

(b) type为email：多邮箱之间用逗号分割，加multiple可实现

form:指定表单id，不在表单内，但是提交也可以随着该表单的提交一起提交。

 

4.表单新增元素

（1）实现可输入，可选择：datalist，但是不同浏览器支持不一样，应该少使用

（2）实现一个表单

其中用到定位绑定用for。

   
   


   

       

           

学生档案

            姓名: 
           

            手机号码:
           

            邮箱地址:
           

            所属学院:
           
           

            入学成绩:
           

            基础水平:
           

            入学日期:
           
            毕业日期:
           

           
       

   

css样式：

*{
    margin:0;
    padding: 0;
}
form{
    width:600px;
    margin:20px auto;
}
form > fieldset{
    padding: 10px;
}
form > fieldset > meter,
form > fieldset > input {
    width:100%;
    height: 40px;
    line-height: 40px;
    margin:10px 0;
    border:none;
    border:1px solid #CCC;
    border-radius: 4px;
    padding-left: 5px;
    font-size: 16px;
    /*width=内容+padding+border*/
    box-sizing: border-box;
}
form > fieldset > meter{
    padding-left: 0;
}

#submit{
    background-color: red
}

最后效果：