新增标签与特性

datalist

image.png

fieldset元素可将表单内的相关元素分组、打包，和legend搭配使用

外面的大边框就是fieldset标签给的

    

        
用户登录
        账号： 


        密码： 
     

image.png

新增的input type属性值：

类型	使用示例	含义
email		输入邮箱格式
tel		输入手机号码个事
url		输入url格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		月年
week		星期年
color		颜色

    

        
新增input type 类型
        

            邮箱： 

            手机： 

            数字： 

            url：  

            搜索： 

            区域： 

            小时分钟： 

            年月日： 

            时间： 

            月年： 

            星期年： 

            颜色： 

             
        
     

image.png

常用新属性

属性	用法	含义
placeholder		占位符、用户输入信息时里面的文字消失
aotofocus		规定当页面加载时 input元素应该自动获得焦点
multiple		多文件上传
autocomplete		规定表单是否应该启用自动完成功能， on off on表示记录已经输入的值
required		必填项
accesskey		规定激活（使元素获得焦点）元素的快捷键 采用alt+字母的形式

焦点就是光标

示例：
1. placeholder

和

的区别是在输入框打字时value值不会消失，而placeholder设置的值会消失

image.png

2. autofocus

    用户名： 

加入autofocus后，鼠标没有点击，光标就会自动在输入框闪烁，代码里直接写autofocus也可以：

image.png

3. multiple 多文件上传

    上传头像: 

写法跟autofocus一样，标签里可以直接写multiple，不用写multiple=“multiple”

image.png

4.autocomplete
是否自动完成（自动记录用户输入信息，下次再输入时自动提示。类似输入法联想功能）

（1）首先要有提交按钮
（2）还要有name值
（3）autocomplete="autocomplete"等价于直接写autocomplete，等价于autocomplete="on",如果不想要记忆功能，就把on换成off。

    
自动记录完成
    

        姓名： 
        
    

image.png

5. required 必填项 内容不能为空

    昵称： 

6. accesskey 激活元素的快捷键

    昵称： 

表示按住alt+s后，光标出现在搜索框

image.png

综合案例：学生档案

 
 
 
    
 
 
    

        

            
学生档案
            姓名: 


            手机号： 


            邮箱: 



            学科： 
            



            出生日期： 


            成绩： 


            毕业时间： 


            
        
    
 
 

image.png