《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
。(暂时没搞懂…)
- 在默认情况下,Chrome、Safari、Mobile Safari等浏览器中的搜索框设置样式会受到限制。要消除这一限制,可以使用专有的
-
文本区域: (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控制。