-
HTML5与CSS3学习笔记【第十五章 表单(一)】
前言
表单有两个基本组成部分：访问者在页面上可以看见并填写的控件、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。
16.1创建表单
每个表单都以form开始标签开始，以form 结束标签结束。两个标签之间是组成表单的说明标签、控件和按钮，每个控件都有一个name属性，用于在提交表单时对数据进行识别。访问者通过你提供的提交按钮提交表单——触发提交按钮时，他们填写的数据就会发送至服务器上处理数据的脚本。
了解了表单的全貌之后，不妨仔细看看其中的细节。form 开始标签可以有一些属性，其中最重要的就是 action 和 method。将 action 属性的值设为访问者提交表单时服务器上对数据进行处理的脚本的 URL。例如，action=“save-info.php”。method 属 性 的 值 要么是get， 要么是post。大多数情况下都可以使用 post，不过每种方法都有其用途，了解其用途有助于理解它们。
... <body> <h1>Create a New Accounth1> <form method="post" action="show-data.php"> <fieldset> <h2 class="hdr-account">Accounth2> <div class="fields"> <p class="row"> <label for="first-name">First Name:label> <input type="text" id="first-name" name="first_name" class="field-large" /> p> <p class="row"> <label for="last-name">Last Name:label> <input type="text" id="last-name" name="last_name" class="field-large" /> p> ... div> fieldset> ... 更多表单元素 ... <input type="submit" value="Create Account" class="btn" /> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
每个表单包括 form 元素自身、访问者输入信息的其他表单元素以及用于将收集到的信息发送给服务器的提交按钮
创建表单的步骤
(1) 输入以结束表单。16.2处理表单
表单从访问者那里收集信息，脚本则对这些信息进行处理。脚本可以将信息记录到服务器上的数据库里，通过电子邮件发送信息，或者执行很多其他的能。有很多语言都可以用于编写表单处理脚本。对于刚起步的新手，PHP 是个错的选择，因为用它处理一些常见任务很简单。除了 PHP，我们还可以选择他语言，如 Django（一个使用 Python 的框架）、Ruby on Rails、ASP.NET、JSP（JavaServer Pages）等。
表单验证
表单验证指的是提交表单时，对用户输入的每个字段的内容进行检查，看是否符合预期的格式（例如，对于电子邮件字段，检查输入是否为正确的电子邮件地址格式）。先前提到，有的表单元素有内置的验证功能。有的网站使用JavaScript 进行验证（网上有相关的教程和代码）。这些都不能完全替代服务器端验证，因为旧的浏览器或禁用JavaScript 的浏览器不会执行客户端验证。进行服务器端验证也是出于安全性考虑（参见前面的补充材料“表单安性”）。总之，必须考虑将服务器端的验证加入表单处理脚本。16.3对表单元素进行组织
如果表单上有很多信息需要填写，可以使用 fieldset 元素将相关的元素组合在一起，使表单更容易理解。表单越容易让访问者理解，访问者就越有可能正确地填写表单。还可以使用 legend 元素为每个 fieldset 提供一个标题（caption），用于描述每个组的目的，有时这些描述还可以使用 h1 ～ h6 标题。对于一组单选按钮，legend 元素尤其重要，因为通常如果不配合使用 legend，单选按钮（就没有明显的上下文。即便不添加任何 CSS，浏览器也会让哪些控件属于哪个 fieldset 显得相当清晰。当然，你可以自己为fieldset 和 legend 添加样式，从而让表单更吸引人，更便于使用。
对表单元素进行组织的步骤
(1) 在 form 开始标签的下面、任何希望包含在第一个组的表单元素的上面，输入。
(2) 如果需要，输入。（如果需要包含 legend，它必须是 fieldset 里的第一个元素。）
(3) 输入标签的文本。
(4) 输入以完成标签。
(5) 如果不使用 legend，则创建一个标题从而可以识别属于该 fieldset 的一组控件。
(6) 创建属于第一组的表单元素。
(7) 输 入结 束 第 一 组 表 单元素。
(8) 为每一组表单元素重复第 (1) 步至第(7) 步。16.4创建文本框
文本框可以包含一行无格式的文本，它可以是访问者想输入的任何内容，通常用于姓名、地址等信息。每个文本框都是通过带有 type=“text” 的input 标签表现出来的。除了 type 之外，还有一些其他可用的属性，其中最重要的就是name。服务器端的脚本使用你指定的 name 获取访问者在文本框中输入的值或预设的值（即value属性值）。事实上，name和 value 对其他的表单字段类型来说，也是很重要的。
创建文本框的步骤
(1) 如果需要，输入用于让访问者识别文本框的标签，例如Last Name:，其中 idlabel 匹配第 (4) 步中的标签，关于这一点，下一节会给出更多解释。
(2) 输入 (3) 输入 name=“dataname”，这里的dataname是用于让服务器（和脚本）识别输入数据的文本。
(4) 如果在第 (1) 步中创建了 label，输入id=“idlabel”，这里的 idlabel 跟第 (1) 步中for 属性的文本一样。这跟具有显式文本框的label 元素关联。很多程序员将 id 和 name 设为同一个值，尽管这并不是必需的。
(5) 如果需要，输入 value=“default”，这里的default 是这个字段中最初显示的数据，如果访问者没有输入别的内容的话，这一数据将被发送到服务器。
(6) 如果需要，输入placeholder=“hinttext”，这里的 hinttext 是这个字段中最初显示的数据，用于指导用户的输入。当input元素获得焦点时，这些文本将会消失，让用户输入内容。
(7) 如果需要，输入 required=“required”，表示仅在这个字段有值的情况下才能提交表单。
(8) 如果需要，输入 autofocus 或 autofocus=“autofocus”（在 HTML5 中这两种方法均可）。如果这是第一个拥有此属性的表单控件，input 元素在页面加载时会默认获得焦点。
(9) 如果需要，通过输入 size=“n” 定义文本框的大小，这里的n是需要设置的文本框宽度，以字符为单位。也可以使用CSS设置输入框的宽度。
(10) 如果需要，输入 maxlength=“n”，这里的n 是该文本框允许输入的最大字符数。
(11) 最后，输入 > 或 />，结束文本框。16.5为表单组件添加说明标签
标签（label）是描述表单字段用途的文本。例如，在访问者应该输入其姓名中名的文本字段之前，可能有“First Name:”的字样。可以使用 label 元素（有点小意外吧）标记这些文字说明标签。你或许已经注意到前面的示例中已经使用过 label 元素了。
label 元素有一个特殊的属性：for。如果 for 的值与一个表单字段的 id 的值相同，该 label 就与该字段显式地关联起来了。这对提升表单的可用性和可访问性都有帮助。例如，如果访问者与标签有交互（如使用鼠标点击了标签），与之对应的表单字段就会获得焦点。这种关联还可以让屏幕阅读器将文本标签与相应的字段一起念出来。设想，这对不了解表单字段含义的视障用户来说是多么重要。出于这些原因，我强烈建议你在label 元素中包含 for 属性。
为表单组件添加正式标签
(1) 输入
(3) 输入标签的内容。
(4) 输入。
(5) 如果创建的是表单元素，确保包括 id属性，对应于第 (2) 步中指定的 for 属性。 -
相关阅读:
系列二十六、idea安装javap -c
「Gitee篇」如何用Git平台账号登录建木CI
makkefile文件自动化编译以及基础文件命令（补）
Linux的目录管理
代码随想录笔记--动态规划篇
AI能否取代程序员：探讨人工智能在编程领域的角色
AtCoder_abc267_c
无穷级数几个基础知识
【微服务】Nacos服务端完成微服务注册以及健康检查流程
JDBC 版本和历史
- 原文地址：https://blog.csdn.net/kzpx_1106/article/details/125902740
