HTML5 新增标签与HTML5 表单新增功能（Day11 2/4）

本页对应 Day11_HTML5&CSS3，共 6 段视频，约 54 分钟。

学习目标

1. 能准确说明 placeholder、autofocus、required、pattern、autocomplete、form 等表单新增属性的作用与使用规则，并在示例表单中正确应用至少 5 个属性验证效果。
2. 能使用 email、number、url、tel、search 创建输入框类控件，区分哪些类型会在提交时触发验证，并为 number 正确设置 min、max、step 以控制输入范围和小数步长。
3. 能使用 range 创建范围选择框，正确设置 min、max、step、value，并说明其提交值为数字以及与 number 控件的异同。
4. 能使用 color 创建颜色选择框并说明其提交值为十六进制颜色；能使用 date、month、week、time、datetime-local 创建日期时间选择框并验证提交结果。
5. 能使用 form 标签的 novalidate 属性禁用表单原生验证，并通过对比 required、email 等场景说明启用与禁用验证后的提交行为差异。
6. 能综合搭建包含新增属性、输入框类控件、范围选择框、颜色选择框和日期时间选择框的表单，逐项验证必填、格式、范围和不验证等提交行为，并排查未设置 name、日期时间类型写法不被识别等常见问题。

知识点

先看整体：HTML5 给表单补了什么

这一节围绕“HTML5 新增标签”展开，但实际重点落在表单：一类是表单控件新增属性，另一类是 input 的 type 新增值。旧标准里我们已经学过 disabled、name、value 等属性，也学过 text、password、radio、checkbox、submit、reset、button 等类型。HTML5 不是推翻旧知识，而是在旧表单上补“提示、自动聚焦、必填、格式约束、关联表单、关闭验证”等能力。

为什么需要？因为很多验证和交互过去只能靠 JavaScript 写；怎么想？先判断这个属性是给所有控件、某类输入框，还是给 form 标签；怎么做？记住属性名和触发时机；易错点？多数验证在提交表单时才触发，空值通常不触发类型验证，需要配合 required。

新增属性：placeholder 与 autofocus

placeholder 用于给输入框或文本域设置提示文字。它和 value 不一样：提示文字颜色淡，用户一输入就消失；value 是真正的值。密码框也能写 placeholder="请输入密码"，提示文字是明文，但输入内容仍是密文。文本域 textarea 也支持。易错点：placeholder 不能替代 label，它只是提示。

autofocus 表示页面打开后自动获取焦点，不需要值。调试时给第一个输入框加上，刷新后光标就在里面闪。若给多个控件都加，通常只有第一个生效，因为焦点只有一个。实际开发不要给自己挖坑，只写一个。

<input type="text" name="username" placeholder="请输入用户名" autofocus>
<input type="password" name="pwd" placeholder="请输入密码">

新增属性：required、pattern、autocomplete

required 表示必填或必选，不需要值。提交时若为空，浏览器提示“请填写此字段”，表单无法提交。单选框要注意：给同组其中一个 radio 加 required，选同组其他项也可以，因为它们 name 相同，是一个整体；复选框则要求对应项被勾选。下拉框通常默认已有选项，课程演示中说一般不必靠它做“必须选”。

pattern 的值是正则表达式，用来验证输入内容，不匹配则无法提交。转写稿里提到“必须由数字、字母、下划线组成，3 到 5 位”，可以先了解，等学正则再回头用。易错点：它不是提示文字，别和 placeholder 混。

autocomplete 控制输入框是否显示浏览器输入记录，值有 on、off，默认 on。调试时要看到记录，输入框必须有 name，并且表单正常提交过；否则本来就不会显示。若不想显示浏览器历史，可设 autocomplete="off"。

<form action="1.php" id="loginForm">
  <input type="text" name="username" placeholder="请输入用户名" required>
  <input type="text" name="code" placeholder="数字字母下划线3-5位" pattern="\w{3,5}">
  <input type="text" name="city" autocomplete="off">
  <button>提交</button>
</form>

新增属性：form 与 form 标签的 novalidate

form 属性可以写在表单控件上，值是对应表单的 id，用于把控件与表单关联。为什么需要？有时布局要求提交按钮写在 form 外面。怎么做？给 form 设 id="loginForm"，外部按钮写 form="loginForm"，点击就能提交该表单。易错点：id 写错就关联不上；控件本身仍要满足验证。

novalidate 写在 form 标签上，不需要值，表示提交时不进行浏览器自带验证。它会让 required、email、url、number 等验证失效。为什么需要？有时产品要求“失焦即验证”或用 JS 自定义验证，就要先关掉浏览器自带验证。易错点：它不是给 input 写的。

<form action="1.php" id="loginForm" novalidate>
  <input type="email" name="email" required>
</form>
<button type="submit" form="loginForm">表单外的提交按钮</button>

新增 type：输入框类 5 个

HTML5 给 input 的 type 新增 12 个值，可分四类。输入框类有 email、number、url、tel、search。

email 要求电子邮箱，提交时才验证；什么都不写不验证，所以常配合 required。number 用于数字，可配 min、max、step；默认 step="1"，只能按整数变化，想输入小数要设 step="0.1" 之类。url 要求网址，通常要以 http:// 或 https:// 开头，否则无法提交。tel 不验证，PC 端意义不大，手机端会弹数字键盘。search 像文本框，可能有清除叉号，主要偏语义，不验证。

<input type="email" name="email" placeholder="请输入邮箱" required>
<input type="number" name="age" min="-20" max="100" step="1" placeholder="请输入数字">
<input type="url" name="site" placeholder="请输入网址">
<input type="tel" name="tel" placeholder="请输入电话号码">
<input type="search" name="kw" placeholder="请搜索">

range 与 color

range 是范围选择框，拖动滑块选数字，默认范围通常 0 到 100，可用 min、max、step、value 改。step 控制变化幅度，设 10 就一卡一卡地变。color 是颜色选择框，提交的是十六进制颜色值，如 #ff0000。易错点：range 提交的是数字，不是滑块外观；color 提交的不是“红色”这种颜色名。

<input type="range" name="r" min="-50" max="50" step="10" value="0">
<input type="color" name="color">

日期时间类 5 个与 datetime-local

日期时间类有 date（年月日）、month（年月）、week（年+第几周）、time（时分，无秒）、datetime-local（日期+时间）。转写稿中演示了 datetime 在浏览器里不被识别、会按 text 处理，所以课程里用 datetime-local。易错点：不同浏览器外观不同；week 在国内业务中用得少。

<input type="date" name="d">
<input type="month" name="m">
<input type="week" name="w">
<input type="time" name="t">
<input type="datetime-local" name="dt">

总结：新增属性解决提示、聚焦、必填、格式、关联和关闭验证；新增类型让浏览器在提交时做基础校验。记住“提交时验证、空值多不验证、需要必填配 required”，就能把这一节串起来。

先分清：通用属性与新增类型

本节讲 HTML5 表单的两块新增能力：一是表单控件的新增属性，二是 input 的 12 个新 type 值。转写里先复习了旧属性：disabled 设置不可用且不需要值；name 是提交到后端时的标识，要提交数据通常必须写；value 对文本框是默认文字，对单选、复选框、下拉选项则是真正提交的内容。为什么要先复习？因为新属性是加在这些通用控件上的，先知道旧规则，才不会把“提示文字”和“默认值”混为一谈。怎么想？把属性分成“提示类、焦点类、验证类、关联类”。怎么做？下面逐个看。易错点：name 不是装饰，没有它，很多提交和 autocomplete 现象都看不到。

placeholder：提示文字不是默认值

为什么需要？输入框需要告诉用户“这里填用户名/密码/留言”。怎么想？它只是提示，不是数据。怎么做？给输入框或文本域加 placeholder="用户名"，密码框也可以写 placeholder="密码"，文本域可写“请输入留言”。易错点：placeholder 和 value 不一样，文字颜色淡，一输入就消失，提交时不会作为值提交；密码框的提示仍是明文提示，不是密码内容。

<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<textarea placeholder="请输入留言"></textarea>

autofocus：打开页面自动聚焦

为什么需要？让用户一进页面就能直接输入。怎么想？焦点同一时间只能有一个。怎么做？在目标控件上加 autofocus，不需要值。易错点：给多个控件加，通常只有第一个生效；实际开发不要自己制造冲突，只写一个。

required：提交时必填或必选

为什么需要？有些字段不能为空。怎么想？浏览器在“提交表单”时验证，不是一输入就验证。怎么做？给文本框、密码框、文本域加 required；单选组可给其中一个选项加，因为同 name 的 radio 是一个整体；复选框则要按组理解，转写中强调 required 加在复选上时，必须选中该项。易错点：select 默认已有选项，通常不必再加 required；required 不写值；空着提交会被拦下。

pattern 与 autocomplete：先了解正则和输入记录

pattern 为什么需要？用正则限制输入格式。怎么想？值是一个正则表达式，格式不匹配则表单不能提交。怎么做？写在输入框上，等学正则后再深入。易错点：现在不熟悉正则不要硬编规则；它和 required 类似，都是提交时验证。

autocomplete 为什么需要？浏览器会记录输入历史，有时要显示，有时要关闭。怎么想？它控制输入框是否显示输入记录。怎么做？默认 on，可设 off；要看到历史，输入框必须有 name，并且表单成功提交过。易错点：没有 name 或没提交，看不到历史；百度等网站自己用 JS 做下拉记录，和浏览器历史不是一回事。

<input type="text" name="userName" autocomplete="off">

form 属性：控件在表单外也能关联

为什么需要？布局时输入框在上、提交按钮在下，按钮可能被写在 form 外面。怎么想？用表单 id 把外部控件关联回去。怎么做？表单写 id="formBooks"，外部按钮写 form="formBooks"。易错点：form 的值必须等于目标表单的 id；关联后仍要满足必填等验证。

新增输入框类：email、number、url、tel、search

为什么需要？让输入框有语义和初步验证。怎么想？这 5 个仍是 input，只是 type 变了。怎么做？email 要求邮箱格式；number 输入数字，可配 min、max、step；url 要求网址，通常要以 http:// 或 https:// 开头；tel 不验证，但手机端可能弹数字键盘；search 无验证，可能有清除叉号。易错点：email、number、url 在内容为空时通常不验证，想必填要配合 required；number 默认 step=1，写小数会提交失败，要小数就设 step="0.1"；tel 不是电话号码验证器。

<input type="email" required placeholder="请输入邮箱">
<input type="number" min="-20" max="100" step="1">
<input type="url" placeholder="请输入网址">
<input type="tel" placeholder="请输入电话号码">
<input type="search" placeholder="请搜索">

range 与 color：滑块选数字、颜色提交十六进制

range 为什么需要？让用户拖动选择数字。怎么想？它和 number 很像，只是交互变成滑块。怎么做？type="range"，可设 min、max、value、step；默认范围是 0 到 100，默认步长 1。易错点：转写中给 range 加 padding 后滑块可能拖不动，调试时要去掉干扰样式；要小数就设 step。

color 为什么需要？可视化选颜色。怎么做？type="color"，选完提交的是十六进制颜色值，如 #ff0000。易错点：页面显示宽度受前面 input 样式影响，不是颜色框本身复杂。

日期时间类五个：date、month、week、time、datetime-local

为什么需要？日期时间选择过去要自己写大量 DOM，现在浏览器原生支持。怎么想？按精度分：date 年月日；month 年月；week 年+第几周；time 小时分钟，无秒；datetime-local 同时选日期和时间。怎么做？直接写对应 type。易错点：W3C 中有 datetime，但浏览器常不认，会按 text 处理，实际演示要用 datetime-local；week 在国内使用较少。

novalidate：关闭浏览器自带验证

为什么需要？浏览器验证要等到提交时，而实际项目常想用 JS 在失去焦点时验证。怎么想？如果不想要浏览器自带验证，就在 form 上关闭。怎么做？给 form 加 novalidate，不需要值。易错点：它关闭的是整个表单的浏览器验证，required、email 等都不会再拦提交；不是每个控件单独关闭。

小结

新增属性重点掌握：placeholder、autofocus、required、pattern、autocomplete、form。新增类型共 12 个：输入框类 email、number、url、tel、search；range；color；日期时间类 date、month、week、time、datetime-local。再加上 form 的 novalidate，就构成了本节的主线。

本节说明：标题与内容范围

本节笔记标题写的是“HTML5 音视频”，但转写稿实际讲解的是 HTML5 表单控件新增属性与新增类型，并未涉及 video/audio 标签。下面按转写稿内容整理，不补写音视频知识。转写稿中没有实际图片和完整代码文件，因此只保留其中明确出现的属性名、type 值和关键代码片段。

先回顾旧表单属性：理解新增属性的基础

为什么需要：新增属性不是孤立的，先知道旧属性，才能判断哪些是“所有表单控件通用”，哪些只适用于输入框。
怎么想：转写稿先回顾 disabled（转写中“低斯A”）、name（“内部”）、value（“V6”）等。disabled 表示不可用且不需要值；name 是提交到后端时的标识；value 在不同控件里意义不同：文本框里是默认文字，单选/复选里是真正提交的值，按钮里是按钮文字。
怎么做：写表单时，需要提交的控件要有 name；普通按钮、重置按钮通常不必加 name；一组单选按钮要设置相同 name。
易错点：不要把所有控件都机械加 name；单选的“一组”靠相同 name 关联，不是靠外观。

placeholder：输入提示，不是默认值

为什么需要：表单里需要提示用户“这里输入用户名/密码/留言”，但又不希望提示文字被当成真实内容提交。
怎么想：placeholder（转写中“poliase hold”）用于输入框或文本域，显示淡色提示；一旦输入就消失。它和 value 不同，value 是控件值。
怎么做：

<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<textarea placeholder="请输入留言"></textarea>

易错点：密码框的 placeholder 是明文提示，但输入内容仍是密文；选择框加它意义不大；不要把 placeholder 当默认值提交。

autofocus：页面打开自动聚焦

为什么需要：让用户一打开页面就能直接在某个输入框输入，减少一次点击。
怎么想：autofocus（转写中“auto fox”）不需要值，写在希望获得焦点的控件上。
怎么做：

<input type="text" autofocus>

易错点：一个页面只应写一个；转写稿演示两个都写时，实际只有第一个生效。实际开发不要自己制造冲突。

required：提交时的必填/必选验证

为什么需要：有些字段必须填写或必须选择，否则表单不应提交。
怎么想：required 不需要值；提交表单时，如果设置了 required 却为空，浏览器阻止提交并提示。
怎么做：

<input type="text" required>
<input type="radio" name="gender" required>男
<input type="radio" name="gender">女

易错点：单选按钮只要同组中一个选项加 required，该组必须选一个；复选框则要单独看，不能以为选了别的就代表这个也选了；下拉选择默认已有选项，转写稿认为通常不必再加；文本域可以加 required。

pattern：用正则约束输入格式

为什么需要：有些输入不仅要非空，还要符合格式，例如数字、字母、下划线组合。
怎么想：pattern（转写中“partta”）的值是正则表达式，用于验证输入内容；不匹配时表单无法提交。
怎么做：转写稿明确说当时还未讲正则，因此只做了解，不展开演示。
易错点：不要在没有正则基础时硬编复杂规则；它和 required 类似，都是提交时参与验证。

autocomplete：是否显示浏览器输入记录

为什么需要：浏览器会记录输入历史，方便再次填写；但有些场景不希望显示。
怎么想：autocomplete（转写中“autocompte”）用于输入框，值有 on/off，默认 on。要看到历史记录，输入框必须有 name，并且表单曾成功提交过。
怎么做：

<input type="text" name="username" autocomplete="off">

易错点：没有 name 或没成功提交过，本来就不容易看到历史记录；不要误以为设置 autocomplete 就一定能立刻出现记录。

form 属性：让表单外控件关联表单

为什么需要：实际布局中，提交按钮可能被放在 form 标签外面，但仍需提交该表单。
怎么想：给控件设置 form="表单ID"，即可把它与指定表单关联。
怎么做：

<form id="formBooks">...</form>
<button form="formBooks">提交</button>

易错点：form 的值必须是目标表单的 id；控件不在 form 内部时，不写这个属性就没有提交关系。

新增输入框类型：email、number、url、tel、search

为什么需要：让输入框具备语义和基础验证，尤其在手机端还能影响键盘。
怎么想：email 要求电子邮箱；number 输入数字，可配 min/max/step；url 要求网址，通常需 http:// 或 https://；tel 不验证，手机端倾向弹数字键盘；search 有搜索语义，部分浏览器显示清除叉号。
怎么做：

<input type="email" required>
<input type="number" min="-20" max="100" step="0.1">
<input type="url" placeholder="请输入网址">
<input type="tel" placeholder="请输入电话号码">
<input type="search" placeholder="请搜索">

易错点：email/url/number 是提交时验证；空值通常不验证，想必填要配合 required。number 默认 step=1，输入小数可能提交不了，要改 step。tel/search 不负责格式验证。

range 范围选择框

为什么需要：让用户拖动滑块选数字，比手输更直观。
怎么想：range 默认范围约 0–100，可用 min/max 改范围，用 value 设默认值，用 step 设变化幅度。
怎么做：

<input type="range" name="n1" min="-50" max="50" step="10">

易错点：它提交的是数字，不是滑块外观；step 会影响可选值；转写稿提到给 range 加 padding 可能影响拖动，演示时要注意。

color 颜色选择框

为什么需要：让用户可视化选颜色。
怎么想：type="color" 提交的不是“红色”这种颜色名，而是十六进制颜色值，如 #ff0000。
怎么做：

<input type="color" name="color">

易错点：name 是提交时才用；只写 type="color" 就能出现选择器外观。

日期时间选择框：date、month、week、time、datetime-local

为什么需要：过去做日历控件工程量大，HTML5 提供原生日期时间选择。
怎么想：date 选年月日；month 选年月；week 选年和周；time 选小时和分钟；同时选日期时间时，转写稿强调浏览器认 datetime-local，而 datetime 可能被当普通文本。
怎么做：

<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">

易错点：week 在国内使用少；time 没有秒；datetime 在演示浏览器中不生效，要用 datetime-local。

novalidate：关闭表单自带验证

为什么需要：浏览器自带验证要等到提交时才触发；实际项目常用 JS 在失去焦点时验证，此时需要先关闭原生验证。
怎么想：novalidate 写在 form 上，不需要值，表示表单不进行验证。
怎么做：

<form novalidate>...</form>

易错点：它会关闭 required、email、url、number 等原生验证；不是所有场景都要关，只有需要自己做验证时再用。

课堂画面

代码示例

示例一：表单控件新增属性（placeholder / autofocus / required / autocomplete / form）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 表单控件新增属性</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; }
  input[type="text"], input[type="password"], textarea, select {
    width: 400px; padding: 10px; margin: 6px 0;
    border: 1px solid #999; border-radius: 4px; box-sizing: border-box;
  }
  textarea { height: 80px; }
  #submit-btn { padding: 8px 20px; }
</style>
</head>
<body>

<form action="1.php" id="form1">
  用户名：<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="on" required><br>
  密&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入密码" required><br>
  性&nbsp;&nbsp;别：
    <input type="radio" name="gender" value="man" id="man" required><label for="man">男</label>
    <input type="radio" name="gender" value="woman" id="woman"><label for="woman">女</label>
    <input type="radio" name="gender" value="other" id="other"><label for="other">其他</label><br>
  爱&nbsp;&nbsp;好：
    <input type="checkbox" name="hobby" value="sing" id="sing"><label for="sing">唱</label>
    <input type="checkbox" name="hobby" value="rap" id="rap"><label for="rap">rap</label>
    <input type="checkbox" name="hobby" value="dance" id="dance"><label for="dance">跳</label><br>
  城&nbsp;&nbsp;市：
    <select name="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
    </select><br>
  留&nbsp;&nbsp;言：<textarea name="msg" placeholder="请输入留言" required></textarea><br>
</form>

<hr>
<!-- 提交按钮写在 form 标签外边，用 form 属性关联到 id 为 form1 的表单 -->
<input type="submit" form="form1" id="submit-btn" value="提交">
</body>
</html>

要点解释 / 易错点

• placeholder：只对输入框和文本域有意义（下拉、单选、复选加了没效果）；它是"纯提示"，颜色很淡，一输入就消失，不等于 value，不会提交给后端。密码框的提示文字是明文显示，真正输入后才变成圆点。
• autofocus：不需要值。一个页面里只有第一个 autofocus 生效，后面的会被忽略，实际开发只写一个。
• required：不需要值，提交时才校验，没填就"请填写此字段"，表单无法提交。
• 单选按钮的易错点：required 加在组内任意一个 radio 上即可，只要 name 相同就视为一个整体，选男/女/其他都能通过。
• 复选框的易错点：required 加在某个 checkbox 上，该复选框必须被选中，选别的（比如 rap）不算数。
• select 不需要写 required，因为它默认就有选中项，写了也起不到"必须选"的作用。
• autocomplete：值为 on（默认）/ off，控制是否显示浏览器记录的输入历史。前提是该控件有 name，且表单成功提交过一次，否则看不到历史记录，别误以为是属性失效。
• form：把写在 form 标签外面的控件或提交按钮与指定表单关联，值是表单的 id。不写这个属性，外面的按钮点了没有任何反应。

---

示例二：新增表单控件类型——输入框类 + 范围选择框 + 颜色选择框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 新增表单控件类型</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; }
  input { padding: 8px; margin: 6px 0; border: 1px solid #999; box-sizing: border-box; }
  input[type="email"], input[type="number"], input[type="url"],
  input[type="tel"], input[type="search"] { width: 400px; }
  input[type="range"] { width: 400px; height: 30px; }  /* 注意：不加 padding */
  input[type="color"] { width: 400px; }
  hr { margin: 16px 0; }
</style>
</head>
<body>

<form action="2.php">
  <!-- 一、输入框类（5 个） -->
  邮&nbsp;&nbsp;箱：<input type="email" name="email" placeholder="请输入邮箱" required><br>
  数&nbsp;&nbsp;字：<input type="number" name="num" placeholder="请输入数字" min="-20" max="100" step="0.1" required><br>
  网&nbsp;&nbsp;址：<input type="url" name="url" placeholder="请输入网址" required><br>
  电&nbsp;&nbsp;话：<input type="tel" name="tel" placeholder="请输入电话号码"><br>
  搜&nbsp;&nbsp;索：<input type="search" name="search" placeholder="请搜索"><br>

  <hr>

  <!-- 二、范围选择框 -->
  范围（默认 0~100）：<input type="range" name="r1"><br>
  范围（-50~50，默认 40，步长 10）：<input type="range" name="r2" min="-50" max="50" value="40" step="10"><br>

  <hr>

  <!-- 三、颜色选择框 -->
  颜&nbsp;&nbsp;色：<input type="color" name="color"><br>

  <hr>
  <input type="submit" value="提交">
</form>
</body>
</html>

要点解释 / 易错点

• email / number / url：外观和普通文本框没区别，区别只在提交表单时验证，格式不对就提交不了。三个都有同一个坑：内容为空时不验证，所以常和 required 配合使用。
• number 的 min / max：超出范围能写进去，但提交不了。输入框宽度会随 max 位数变短，这是正常现象。
• number 的 step：默认值是 1，所以默认只能输入整数，写 0.1 会提示"请输入有效值"；要输入小数必须设置 step="0.1"（可简写 step=".1"）。
• url：必须以 http:// 或 https:// 开头，否则验证不通过。
• tel：没有验证功能，PC 端几乎没有意义，它的价值在于手机端会弹出数字键盘。
• search：也没有验证功能，只是语义化，多一个可点击的清除叉号。
• range：默认范围 0~100，通过 min / max / value / step 控制；提交的是数字，不是位置。易错点：给 range 加 padding 会导致滑块拖不到两端，所以示例里只设宽高不设内边距。
• color：提交给后端的是十六进制颜色值（如 #ff0000，提交后在地址栏里会看到 %23 即 # 的编码），不是颜色名称。

---

示例三：日期时间选择框 + novalidate 关闭表单验证

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>日期时间选择框 & 关闭表单验证</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; padding: 20px; }
  input { padding: 8px; margin: 6px 0; border: 1px solid #999; box-sizing: border-box; width: 300px; }
  hr { margin: 16px 0; }
</style>
</head>
<body>

<!-- novalidate：让整个表单不进行浏览器自带验证 -->
<form action="3.php" novalidate>
  日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：<input type="date" name="d1"><br>
  年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月：<input type="month" name="d2"><br>
  年 + 周：<input type="week" name="d3"><br>
  时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<input type="time" name="d4"><br>
  日期 + 时间：<input type="datetime-local" name="d5"><br>

  <hr>

  邮箱（必填 + 格式校验）：<input type="email" name="email" required><br>
  <input type="submit" value="提交">
</form>
</body>
</html>

要点解释 / 易错点

• date 选年月日、month 选年月、week 选年+第几周、time 选小时和分钟（没有秒），这些都是标准新增值，直接写 type 就有日历/时钟控件，不用自己写 div 定位。
• datetime 的易错点：W3C 规范里确实有 datetime 这个值，但浏览器不认，写了会被当作 text 处理（凡是写错的 type 值都按默认 text 走）。要同时选日期和时间，必须写 datetime-local。
• novalidate 是 form 标签的属性，不需要值，加上后 required、email、url、number 这些验证全部失效，直接提交。
• 使用场景：浏览器自带验证必须等到点击提交才触发，如果想用 JS 的失去焦点事件做"写完就提示"的即时验证，就要先用 novalidate 把自带验证关掉，否则两套提示会打架。

常见错误

1. 单选组 required 写法错位

• 现象：给同组每个 radio 都加 required，或只给"其他"加了一个，以为选"男"会通不过。
• 原因：同 name 的 radio 在浏览器眼里是一个整体，required 是组级约束，选组内任意一项都算满足；checkbox 才是各自独立。
• 修法：radio 组只写一个 required；checkbox 需要每项都加。

2. 演示不出输入历史，或关了还看得见

• 现象：加了 autocomplete 却看不到下拉历史；或者设了 off 页面上仍冒出提示。
• 原因：控件没有 name、或从未成功提交过一次，浏览器根本不会记录；off 只关浏览器自带的那份记录，页面自己用 JS 存的历史不受影响。
• 修法：先补 name + 走通一次提交再观察；判断"这是谁记的"，看样式是否与浏览器原生下拉一致。

3. number 输小数提交被拒

• 现象：写 0.1 提交报"请输入有效值"，提示最接近的是 0 和 1。
• 原因：step 默认是 1，只能整数；min/max 也一起参与校验。
• 修法：显式写 step="0.1"（或 0.01），并让 min/max 与步长对齐，否则仍会踩边界。

4. datetime 静默降级

• 现象：写了 type="datetime"，页面上是个普通文本框，日历不出现。
• 原因：浏览器不实现这个值，未知 type 一律按 text 处理，不报错。
• 修法：改用 datetime-local；兼容性排查时先看"它是不是退化成了普通输入框"。

5. 提交按钮写在 form 外面点了没反应

• 现象：按钮布局在表单下方，点击无任何反馈。
• 原因：控件没有被 form 包裹，也没有建立关联。
• 修法：加 form="表单的 id"，注意值是 id 不是 name。

6. 把 placeholder 当默认值用

• 现象：用户不填就提交，后端拿到的该字段是空。
• 原因：placeholder 只是提示文字，写第一个字符就消失，从不参与提交。
• 修法：默认数据用 value，提示用 placeholder，两者可以并存。

7. 给 range 加 padding

• 现象：滑块拖不到最左/最右端。
• 原因：内边距挤占了轨道可用范围，range 对 padding 的响应与其他输入框不同。
• 修法：用 height/width 控制尺寸，不要用 padding 撑。

练习

1. 注册表单校验时序观察 写一个含用户名（placeholder+required+autofocus）、邮箱（email+required）、年龄（number，min=18 max=100）的表单。分别测试：全空提交、邮箱乱填提交、年龄填 200 提交。记录三次提示文案的差异，并回答：为什么"什么都不填"时邮箱的格式提示不会出现？

2. 滑块联动 用 range 做 0–10 的评分，页面实时显示当前值（不要等提交），提交后从地址栏参数确认 name 与数值。再把它改成 min=-50 max=50 step=10，观察拖动是否变成"一卡一卡"，并解释原因。

3. 结构解耦 把提交按钮放到 form 标签外面，用属性让它仍能提交。然后给 form 加 novalidate，再点提交，记录行为变化，并说明为什么实际项目里产品经理会要求这么做。

4. 分类验证 从 12 个新 type 中挑出两组：①提交时才校验的；②完全不校验的。各写一个最小示例证明你的分类，并对"不校验"那组补一个属性让它变成必填。

5. 日期场景选型 为"选生日""选会议时间""选账单月份"三个场景各选一个 type，说明理由；再故意写一个 datetime，观察降级结果并记录。

原视频对照

#	视频	时长
1	表单控件新增属性	16:42
2	新增表单控件类型-输入框	17:16
3	新增表单控件-范围选择框	06:38
4	新增表单控件-颜色选择框	02:38
5	新增表单控件-日期时间选择框	07:22
6	设置表单不进行验证	03:27

小结

1. 新增 type 的价值一半在语义和移动端键盘（tel、email 会调出对应键盘），一半在提交校验，别只盯着"长得一样"就否定它。
2. 原生校验的时机固定在"点提交那一刻"，这是它体验差的根因，也是 novalidate + 自写 JS 校验成为主流做法的原因。
3. 空值不校验是 email/number/url 的默认行为，required 是补这一刀的唯一手段，两者必须成对考虑。
4. 未知 type 一律静默降级为 text——兼容性问题先怀疑"它是不是退化成普通输入框了"，比查文档快。
5. 控件与表单的关联不只有"包裹"一种，form 属性让布局与结构解耦，这在分栏、卡片式表单里是刚需。
6. placeholder 是提示、value 是数据，混用是线上 bug 的高发点。
7. step 是 number/range 的隐形约束，必须和 min/max 一起设计，否则边界值一定出问题。
8. 12 个值按"5 输入框 + range/color + 5 日期时间"三类记，比背清单稳；记不住时先想它属于哪一类，再推具体值。