HTML5新增特性

h5新特性

1.什么是h5

HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟

（W3C）完成标准制定。

2.h5新语义元素

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcaption	定义 元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
nav	定义导航链接的部分。

3.HTML5新的input类型

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在input字段主要用于选取颜色选择你喜欢的颜色
日期字段	date detetime	定义日期字段：包含年月日定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月定义年中的周数定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值 step 设置数字间隔如果step=“3” ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

4.HTML5新的表单控件

datalist 元素

datalist 元素属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，

浏览器应该在该域中显示填写的选项

使用 input元素的list属性与 datalist 元素绑定

   <form action="">
    学习科目 <input type="text" name="username" list="deta">
    <datalist id="deta">
        <option value="JAVA">JAVA</option>
        <option value="CAD">CAD</option>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JS">JS</option>
    </datalist>
   </form>

5.HTML5新的表单属性

5.1form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示**😗* autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意**😗* autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, tel,

email, password, datepickers, range 以及 color。

5.2form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

无需验证提交的表单数据

   <form action="" novalidate>
         邮箱 <input type="email" name="useremail">
         <input type="submit">
   </form>

、

可以看到 即便有type=“email”的自动验证 也依然可以提交成功

5.3input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 标签：text, search, url, tel, email 以及password。

   <form action="" novalidate>
         邮箱 <input type="email" name="useremail"><br>
         <input type="text" name="username" placeholder="用户名"><br>
         <input type="submit">
   </form>

5.4input required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的input 标签：text, search, url, tel, email, password, date

pickers, number, checkbox, radio 以及 file。

   <form action="">
         邮箱 <input type="email" name="useremail"><br>
         <input type="text" name="username" required placeholder="用户名"><br>
         <input type="submit">
   </form>

可以看到 再点击提交时 文本框不能为空

5.5input step 属性

step 属性为输入域规定合法的数字间隔。

如果 step=“3”，则合法的数是 -3,0,3,6 等

提示：step 属性可以与 max 和 min 属性创建一个区域值.

**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month,

time 和 week.

   <form action="">
         邮箱 <input type="email" name="useremail"><br>
         <input type="text" name="username" required placeholder="用户名"><br>
        年龄 <input type="number" name="age" step="5"><br>
         <input type="submit">
   </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJc7mcd0-1689592802737)(C:\Users\Administrator.DESKTOP-DTB5FD9\Desktop\笔记\h5新特性.assets\step.png)]

数值日期框的步长 点击按钮增加或减少一个步长值

5.6input autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域自动地获得焦点。

让 “First name” input 输入域在页面载入时自动聚焦：

  <form action="">
         邮箱 <input type="email" name="useremail"><br>
         <input type="text" name="username" required placeholder="用户名" autofocus><br>
        年龄 <input type="number" name="age" step="5"><br>
         <input type="submit">
   </form>

当刷新页面时 所设置的input控件自动获得焦点

5.7input form 属性

    <form action="" novalidate id="form-1">
        <input type="text" name="username" placeholder="用户名" autofocus><br>
        <input type="submit">
    </form>
    <form action="" id="form-2">
        邮箱 <input type="email" name="useremail" form="form-1"><br>
        <input type="submit">
    </form>

5.8input formaction 属性

formaction 属性用于描述表单提交的URL地址.

formaction 属性会覆盖 form 元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”

    <form action="" novalidate id="form-1">
        <input type="text" name="username" placeholder="用户名" autofocus><br>
        <input type="submit" formaction="https://www.baidu.com">
    </form>

5.9input formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 input 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 form 元素的novalidate属性.

注意**😗* formnovalidate 属性与 type=“submit” 一起使用

    <form action=""  id="form-1">
        <input type="email" nam="username"><br>
        <input type="submit" fromnovalidate>
    </form>

电子邮箱依然可以绕过验证提交

5.10input multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定 input 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 input 标签： file

5.11 input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意**😗* min、max 和 step 属性适用于以下类型的 input 标签：date pickers、number 以及 range。

input 元素最小值与最大值设置

    <form action=""  id="form-1">
        年龄<input type="number" name="age" max="100" min="0">
        <input type="submit" >
    </form>