目录

H5新增的input类型

search搜索域

tel电话号码输入域

url域

email域

number数值输入域

range一定范围内的数值输入域

改变range原生滑块样式 

color颜色输入域

时间日期选择器

date日期

time时间

datetime-local本地时间

提示：

H5新增表单标签

 fieldset 表单区域 

legend 区域标题

格式为代码所示：

label 标注标签 

H5新增的下拉列表  datalist 

H5新增的input类型

---

概述：HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

search搜索域

• 作用：搜索域，比如站点搜索或 Google 搜索

•   

tel电话号码输入域

 

• 作用：输入电话号码的文本域

• 代码示例 :

url域

• 作用： URL 地址的输入域；

• 说明

  • 在提交表单时，会自动验证 url 域的值

  • 移动端：通过改变触摸屏键盘来配合它（添加 .com 选项）

• 代码示例

email域

 

• 作用：包含 e-mail 地址的输入域

• 说明

  • 在提交表单时，会自动验证 email 域的值 移动端：改变触摸屏键盘来配合它（添加 @ 和 .com 选项）

• 代码示例     

number数值输入域

• 作用

  • 作用：包含数值的输入域。

• 相关属性

  • 通过以下属性设定对所接受的数字的限定

  • max:定义允许的最大值

  • min:定义允许的最小值

  • step:定义合法的数字间隔

  • value:定义默认值

• 代码示例 

range一定范围内的数值输入域

 

• 作用

  • 用于包含一定范围内数字值的输入域，显示为滑动条。

• 相关属性

  • 通过以下属性设定对所接受的数字的限定

  • max:定义允许的最大值 min:定义允许的最小值 step:定义合法的数字间隔 value:定义默认值

代码实例： 

改变range原生滑块样式 

  .range {
            
            -webkit-appearance: none;
            width: 300px;
            height: 30px;
            border:none;
            background-color: red;
            border-radius: 20px;
        }
        
        .range::-webkit-slider-thumb {
             
             -webkit-appearance: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: yellow;
        }

color颜色输入域

• 作用：颜色输入域，用于选取颜色

• 代码示例

时间日期选择器

date日期

• 作用：选择一个日期（年月日）

• 代码示例 

 

time时间

• 作用：选择小时分钟

• 代码示例 

datetime-local本地时间

• 作用：选择一个日期和时间 (无时区)

• 代码示例 

提示：

并不是所有的主流浏览器都支持新的input类型， 即使不被支持，仍然可以显示为常规的文本域

 月份 type="month"

 周 type="week" 

  type="datetime" 年月日十分

H5新增表单标签

 fieldset 表单区域 

对表单进行分组，一个表单可以有多个fieldset

legend 区域标题

说明每组的内容描述。

格式为代码所示：

 
        fieldset {
            width: 50%;
            margin: 0 auto;
            padding: 20px 30px;
            border:none;
            border:5px dashed orangered;
        }
        legend {
            font-size: 30px;
            font-weight: 900;
            color: skyblue;
            
            text-align:center;
        }
    



    

        
        

            
寄件人信息
            
                
                 姓名
                
            
            
                手机号:
                
            
            
                寄件地址:
                
            
        
      
        
        

            
收件人信息
            
                姓名:
                
            
            
                手机号:
                
            
            
                收件地址:
                
            
        

        
             男:
        
            
        

       
    

label 标注标签 

专门就是为了在表单里装字段文字的！！ 

      1. 语义化标签

      2. 自动聚焦  for=" id值" 你绑定哪个Input 那么for里写的就是你绑定的input的id属性值！！

H5新增的下拉列表  datalist 

 select>option 只能选择 不能输入

h5新增 datalist > option(单标签)  不光能输入 还能选择

   你所在的学院: