HTML5与CSS3基础教程-第16章 表单

《HTML5与CSS3基础教程（第8版）》 第16章读书笔记

• 2020/04/04

• 表单属性（部分）： （p320）

  • multiple：允许输入多个电子邮件，或上传多个文件。
  • pattern：表单项要遵循的模式（正则），可用于text, search, url, tel, email, password。
  • formnovalidate：关闭H5的自动验证功能。用于提交按钮。
  • novalidate：关闭H5的自动验证功能。用于表单元素。
  • autofocus：用于表单项，如果是第一个拥有此属性的表单控件，此控件则会在加载时自动获取焦点。
  • size：在text中标识文本框的大小（字符长度，使用css规定长度更推荐）。
  • maxlength：最大长度，单位是字符数。
  • placeholder：文本框中的提示，灰色，当用户开始在字段中输入文本时会消失（IE10会在获取焦点时消失。）
  • autocomplete：默认情况下，大多数浏览器会保存用户输入的文本，日后可以减少输入时间，可以通过设置autocomplete="off"关闭这一特性。

  前端表单验证，不能完全代替服务器端验证，因为旧的浏览器或禁用JS的浏览器不会执行客户端验证。

• H5新增表单控件： email, tel, url。

• fieldset和legend： （p324 - 327）
  如果表单上有很多信息需要填写，可以使用fieldset元素将相关的元素组合在一起，使表单更容易理解。

  还可以使用legend元素为每个fieldset提供一个标题。legend元素可以提高表单的可访问性。如对于一组单选按钮，legend元素可以提供明显的上下文。如果使用legend元素，那么必须是fieldset的第一个元素。

• 表单元素的name, for和id： （p327 - 331）

  • name用于后台接受表单数据的字段名。不一定与id，for一致。
  • for用于label，指定label所属的表单项，需要和对应表单项的id一致。
  • 一般多单词的name使用_分隔，id和for使用-分隔，但都不允许有空格。
  • 也可以将表单标签放在lable内部来关联彼此，但是分开更常见，原因之一是容易添加样式。

• 文本框的默认大小（size）是20（个字符）。

• 密码框的唯一保护措施是防止他人看到用户输入密码， 要真正保护密码需要采取其他措施，比如使用https。 （p332）

• 使用tel表单控件，在移动端输入时可以启动数字键。

• 搜索框： （p335）

  • 在默认情况下，Chrome、Safari、Mobile Safari等浏览器中的搜索框设置样式会受到限制。要消除这一限制，可以使用专有的-webkit-appearance: none;声明，再设置样式。
  • 可以在表单中使用role="search"地标角色增加屏幕阅读器的可读性，可以添加到form上。若表单不只有search，可以将控件放在fieldset中或div中添加。
  • Webkit浏览器支持两个非官方的H5属性：autosave和results。（暂时没搞懂…）

• 文本区域： （p338 - 339）

  • 默认textarea不会继承font属性，需要显示设置继承。font: inherit;。
  • textarea的默认最大长度是32700个字符。
  • textarea默认是可以拖拽改变大小的，可以通过resize: none;来取消。
  • cols属性是文本区域的宽度（单位是字符），rows是高度（单位是行）。都可以使用css的宽高设置，并且推荐使用css。

• 选择框： （p339 - 341）

  select的size属性可以设置选择框的高度（行数），当大于1时，外观更像列表（但不是多选）。当size大小大于select的选项数量时，可以选择多余的空白项使其处于未选中状态。

• 文件上传： （p341 - 342）

  • multiple：IE10+。
  • size：可输入的包含路径在内的文件路径长度。

• 提交按钮： （p343 - 344）

  • 如果使用的input标签，而不是button，则type可以使用submit或image（图片按钮）。submit需要指定value作为按钮的文字（默认是Submit或Submit Query）。
  • 当表单包含多个提交按钮时，应该避免使用button元素。

• 重置按钮： type = "reset"。（p345）

• 表单项的disable和readonly：

  • disable：是禁用，值不会发送到服务器。
  • readonly：是只读，可以获取焦点，可以选择或复制，只能应用于文本框或文本区域。值会发送到服务器。

• 根据状态设置样式： （p347）

  选择器	应用	浏览器支持
  :focus	获取焦点的字段	IE8+
  :checked	选中的单选按钮或复选框	IE9+
  :disabled	具有disabled属性的字段	IE9+
  :enable	与:disabled相反	IE9+
  :required	具有required属性的字段	IE10+、Safari5+
  :optional	与:required相反	IE10+、Safari5+
  :invalid	值与pattern不匹配的字段，或不满足电子邮件、URL，以及任意标记为required但是为空的字段	IE10+、Safari5+
  :valid	与:invalid相反	IE10+、Safari5+

  当页面加载时就会应用:invalid的情况，可以使用:not伪类（如input:invalid:not(:required)选择器）；也可以使用js控制。