HTML表单新增属性

<input type="range" min="最小值" max="最大值" step="改变数值的步长">
语法解释 min属性：用于指定可输入的最小数值，默认值为0； max属性：用于指定可输入的最大数值，默认值为100； step属性：指定滑动条每向左或向右移动一次滑块，数值 将减小或增加的数值，默认步长是1。
语法解释 min属性：用于指定可输入的最小数值，默认时将不限定最 小输入值；max属性：用于指定可输入的最大数值，默认时将不 限定最大输入值；step属性：指定输入框的值在单击微调上、 下限按钮时增加或减小的数值，默认步长是1。
22
number类型示例
23
5. range类型
作用 range类型让input元素生成一个数字滑动条，使用滑动条 可让用户输入特定范围的数值。 基本语法
<input type="datetime-local" name="…"> 注意： IE11和Firefox现在都不支持datetime-local类型，在这些 浏览器中datetime-local类型文本框就跟“text”文本框完全 一样。
34
datetime-local类型示例
35
11. week类型
41
提交按钮取消校验示例
42
第10讲 HTML5新增文档结构标签
10.1 概述 10.2 <header>标签 10.3 <article>标签 10.4 <section>标签 10.5 <nav>标签 10.6 <aside>标签 10.7 <footer&;
语法解释 根据具体校验要求，设置对应的正则表达式。Title属性不是必需
要的，但为了提高用户体验，建议设置这个属性。
11
pattern属性示例
12
5. placeholder属性
作用 placeholder属性主要用于在文本框或文本域中提供输入提示信息 ，以增加用户界面的友好性。 基本语法
<input type="color" name="…"> 注意： IE11则不支持color类型，在该浏览器中color类型，文本 框就跟“text”文本框完全一样。
28
color类型示例
29
8. date类型
作用 date类型让input元素生成一个日期选择器。当用户单击该 文本框时，将弹出一个日历选择器，从中可选择年、月、日， 选择日期后，所选择的日期将显示在文本框中。 基本语法
40
9.4 提交按钮新增取消校验属性
基本语法 方式一：<form novalidate> 方式二：<input type="submit" formnovalidate>
注意： 方式一将关闭整个表单的校验，不管提交什么按钮都将不 进行校验。 方式二则由指定的提交按钮来关闭表单的输入校验，只有 当用户通过指定了formnovalidate属性的按钮提交表单时才会 关闭表单的输入校验。
1. tel类型
作用 tel类型让input元素生成一个只能输入电话号码的文本框。但目前， 这种类型的文本框并没有提供额外的要求，即用户在该文本框中输入任意 的字符串，浏览器都不会执行校验操作。 基本语法
<input type="tel">
17
2. email类型
作用 email类型让input元素生成一个email输入框。运行时浏览器会按 照email的格式自动检查该文本框的值，如果用户在该文本框内输入的 内容不符合email格式，将会弹出错误提示信息，并阻止表单提交。 基本语法
前端开发技术 第八章
1
前端开发技术——HTML5新增
HTML5表单新增属性及新增input元素类型 HTML5表单概述 表单新增属性 表单新增input元素类型 提交按钮新增取消检验属性
HTML5新增文档结构标签
2
2020年8月30日星期日
8.1 HTML5表单概述
HTML5表单在HTML4表单的基础上，新增了许多属性以及input元素类型，这些 新增属性及元素类型实现了以前需要由JavaScript才能实现的一些功能，如 非空校验、数值类型校验、聚焦、显示提示信息等功能，极大的增强了HTML5 表单的功能。
14
required属性示例
15
9.3 表单新增input元素类型
HTML5表单input元素主要新增了以下一些类型：
类型 tel email url number range search color date time datetime datetime-local week month
描述 电话输入框文本 E-mail输入文本框 URL地址输入文本框 数值输入文本框，可设置输入值的范围 以滑动条的形式表示特定范围内的数值 搜索关键字输入的文本框 颜色选择器，基于取色板进行选择 日期选择器 时间选择器 包含时区的日期和时间选择器 不包含时区的日期和时间选择器 星期选择器16 月份选择器
作用 formaction属性可以实现在一个表单中包含多个提交按钮，每个 提交按钮都可以通过formaction属性将请求提交给不同的服 务端程序处理。
基本语法 <input type="submit" formaction="服务端处理程序"/>
语法解释
所有提交按钮都可以使用formaction属性。属于提交按钮的元素 包括：<input type="submit">、<input type="image">和<button type="submit">。
7
formaction属性示例
8
3. autofocus属性
作用 autofocus属性可以使textarea和input表单元素自动获得焦点。 基本语法
<input type="text" autofocus/> <textarea rows="..." cols="..."
autofocus>...</textarea> 语法解释 一个页面中最多只能有一个表单元素设置autofocus属性，否则
38
month类型示例
39
9.4 提交按钮新增取消校验属性
有时，我们可能需要把表单中已填写好的数据暂存一下， 以便将来调出来继续填写，此时我们可以不用关心数据是否 有效，即可以取消表单的有效性校验。 在HTML5中，取消表单校验的常用方式有两种：一种是为 <form>元素设置novalidate属性；另一种是对提交按钮设置 formnovalidate属性。
该功能将失效，建议对第一个input元素设置autofocus属性。
9
autofocus属性示例
10
4. pattern属性
作用
pattern属性是input元素的验证属性，该属性的值是 一个正则
表达式，通过这个表达式可以验证输入内容的有效性。
基本语法
<input type="text" pattern="正则表达式" title="错误提示
<input type="email" name="…" multiple> 语法解释 省略multiple属性，在文本框中将只允许输入一个email地址。
18
email类型示例
19
3. url类型
作用 url类型让input元素生成一个URL地址输入框，要求必须在 其中输入一个包含访问协议的完整的URL路径。运行时浏览器会 按照完整的URL的格式自动检查该文本框的值，如果不符合格式 要求，将会弹出错误提示信息，并阻止表单提交。 基本语法
13
6. required属性
作用 requried属性用于验证某个表单元素的内容是否为空。 基本语法
<input type="…" name="…" required> <select name="…" … required> <textarea name="…" … required>
基本语法 <form id="form1"> … </form> <input type="text" form="form1"/>
语法解释 在表单外的元素，通过设置元素的form属性值等于表 单的id值，即可建立了表单元素和表单的隶属关系。
5
form属性示例
6
2. formaction属性
为了更好地表达HTML的文档结构和语义，HTML5新增了许多用于 表示文档结构方面的元素，用以取代HTML4中的DIV元素。HTML5 提供的文档结构标签主要有以下几个： header article section nav aside footer
3
8.2 表单新增属性
HTML5表单主要新增了以下一些属性： form属性 form action属性 autofocus属性 pattern属性 placeholder属性 required属性
4
8.2.1 form属性
作用 form属性可以定义表单元素和某个表单之间的隶属关系， 使用了form属性后，表单的元素可以放在 <form></form>标签对之外的任何地方。