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

本文深入探讨HTML5与CSS3表单控件的高级应用,包括新属性如multiple、pattern、formnovalidate及自定义表单验证。详解fieldset、legend元素提升表单可读性,以及name、for、id属性的正确使用。介绍email、tel、url等新表单类型,搜索框样式限制解决方案,和文本区域、选择框、文件上传、按钮的细节。此外,还讨论了表单控件的样式调整和状态选择器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

《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

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

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

  • 表单元素的name, forid (p327 - 331)

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

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

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

  • 搜索框: (p335)

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

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

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

  • 文件上传: (p341 - 342)

    • multiple:IE10+。
    • size:可输入的包含路径在内的文件路径长度。
  • 提交按钮: (p343 - 344)

    • 如果使用的input标签,而不是button,则type可以使用submitimage(图片按钮)。submit需要指定value作为按钮的文字(默认是Submit或Submit Query)。
    • 当表单包含多个提交按钮时,应该避免使用button元素。
  • 重置按钮: type = "reset"。(p345)

  • 表单项的disablereadonly

    • 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控制。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值