新增表单元素与相关标签

目录

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 搜索

•   <input type="search">

tel电话号码输入域

 

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

• 代码示例 :<input type="tel">

url域

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

• 说明

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

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

• 代码示例<input type="url">

email域

 

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

• 说明

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

• 代码示例    <input type="email"> 

number数值输入域

• 作用

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

• 相关属性

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

  • max:定义允许的最大值

  • min:定义允许的最小值

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

  • value:定义默认值

• 代码示例 <input type="number">

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

 

• 作用

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