HTML5 权威指南第 12 章 表单 学习笔记

Posted GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 权威指南第 12 章 表单 学习笔记相关的知识，希望对你有一定的参考价值。

html5 权威指南第 12 章 表单 学习笔记

本章主要是介绍了比较基础的表单应用方面，稍微复杂一点儿的语义化内容会放在下一章将，毕竟 input 有 29 个属性。

部分内容与 精通 CSS 第 9 章 表单与数据表 学习笔记 是有重叠的，不过「精通 CSS」更关注展现方面的内容，本章内容更关注结构化内容。

制作基本表单

这里讲述表单最核心的 3 个元素，以及简短的能够将数据即使展现的例子。

表单基础元素

最基础的表单结构之需要有三个元素：

  • form

    告诉浏览器这一段处理的是一个表单

  • input

    表单具体要输入的内容

    这一部分的内容是可以扩展的，譬如说 input 有 29 个属性，换言之，单 input 一个元素来说，就存在近 30 种类型，遑论还有诸如 textare 的其他表单可用类型了。

  • button

    用户告诉浏览器表单已经处理完毕，应该将数据传给服务器了

查看表单数据

配备的一段模拟服务器的代码，载命令行使用 node filename.js 即可运行：

var http = require("http");
var querystring = require("querystring");

http
  .createServer(function (req, res) {
    switch (req.url) {
      case "/form":
        if (req.method == "POST") {
          console.log("[200] " + req.method + " to " + req.url);
          var fullBody = "";
          console.log(req.url);
          req.on("data", function (chunk) {
            fullBody += chunk.toString();
          });
          req.on("end", function () {
            res.writeHead(200, "OK", { "Content-Type": "text/html" });
            res.write("<html><head><title>Post data</title></head><body>");
            res.write(
              "<style>th, td {text-align:left; padding:5px; color:black}\\n"
            );
            res.write(
              "th {background-color:grey; color:white; min-width:10em}\\n"
            );
            res.write("td {background-color:lightgrey}\\n");
            res.write("caption {font-weight:bold}</style>");
            res.write('<table border="1"><caption>Form Data</caption>');
            res.write("<tr><th>Name</th><th>Value</th>");
            var dBody = querystring.parse(fullBody);
            console.log(dBody);
            for (var prop in dBody) {
              res.write(
                "<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>"
              );
            }
            res.write("</table></body></html>");
            res.end();
          });
        } else {
          console.log("[405] " + req.method + " to " + req.url);
          res.writeHead(405, "Method not supported", {
            "Content-Type": "text/html",
          });
          res.end(
            "<html><head><title>405 - Method not supported</title></head><body>" +
              "<h1>Method not supported.</h1></body></html>"
          );
        }
        break;
      default:
        res.writeHead(404, "Not found", { "Content-Type": "text/html" });
        res.end(
          "<html><head><title>404 - Not found</title></head><body>" +
            "<h1>Not found.</h1></body></html>"
        );
        console.log("[404] " + req.method + " to " + req.url);
    }
  })
  .listen(8080);

注：运行后的代码只相应 POST 请求。

配置表单

以下全是 form 元素的可配置属性

配置 action 属性

即：

<form action="some-action-here"></form>

action 属性指定了提交表单时，浏览器应该将表单提交的地方。

案例中的 NodeJS 服务器为自己本机的地址，一个服务器上准备的 /form 的这个 URL，所以 action 的值是 http://127.0.0.1:8080/form。

配置 HTTP 方法属性

method 指定了将表单发送到服务器的 HTTP 方法，允许的值有 3 个，大小写均可：

  • post

    表单的数据会被包含在 表单体(request body) 内，然后发送给服务器

  • get

    表单数据会被加到 URL 中，以 ? 分割。仅只有在 安全交互(safe interaction) ，即同一个请求可以发起任意多次而不会产生额外作用的情况下调用

  • dialog

    仅在表单被 dialog元素 内使用，提交信息时会关闭对话框(dialog)

配置数据编码

enctype属性 指定了浏览器对发送给服务器的数据采用的编码格式，该属性有 3 个可用值：

  • application/x-www-form-urlencoded

    默认值，大多数情况下使用默认值就可以了

  • multipart/form-data

    当有文件上传，即 <input type="file> 的情况下使用

  • text/plain

    HTML 引入的新特性，用于 debug

控制表单的自动完成功能

即 autocomplete 属性，允许的值有 on 和 off 两个，默认为 on。

是否要使用 autocomplete 完全取决于业务情况。

也可以在 form 元素上开启或禁用 autocomplete，然后在 input 中 选择 禁用或开启 autocomplete，如：

<form autocomplete="off">
  <input type="text" name="username" autocomplete="on" />
</form>

指定表单反馈信息的目标显示位置

即 target属性，有以下几个可选值：

  • _self，默认值

    在同样的窗口打开并加载内容

  • _blank

    在新窗口打开并加载内容

  • _parent

    在父级窗口打开并加载内容，如果不存在父级窗口，行为与 _self 一致

  • _top

    在顶级窗口打开并加载内容，如果不存在顶级窗口，行为与 _self 一致

_self 和 _blank 都是显而易见的，其他两个属性会在 ch15 中细讲。

设置表单名称

即 name属性，以便于在操作 DOM(Document Object Model) 时快速定位所操作的表单。

这个在之前学习 javascript 部分已经有了深刻的了解，如页面中存在多个表单，那么无论使用 querySelector 还是 getElementsByTagName 都很难快速地定位到想要操作的某一个表单上。

添加说明标签

单独使用 input元素 会造成非常大的困惑，会使人搞不清楚哪个才是合适的 input元素：

multi-input

表单想要收集的数据有三个：用户名，密码和邮箱，可是这种情况对用户来说难以区分哪个才是正确的输入框。使用 label元素 进行标记后：

use-label

自动聚焦

即 autofocus属性，打开页面就选择一个元素去自动聚焦的值，如果有多个属性都设置了 autofocus，那么最后一个值会被自动聚焦。

禁用单个元素

即 disable属性，设置了 disable 的元素会被禁用，无法修改其中的数据。

对表单元素编组

即 fieldset元素。

fieldset 是用来对表单中的元素控件进行分组，其标题由第一个 legend 子元素确定。

HTML legend 元素用于表示其父元素 fieldset 的内容标题。

渲染效果如下：

fieldset

代码为:

<fieldset>
  <legend>Choose your favorite monster</legend>

  <input type="radio" id="kraken" name="monster" />
  <label for="kraken">Kraken</label><br />

  <input type="radio" id="sasquatch" name="monster" />
  <label for="sasquatch">Sasquatch</label><br />

  <input type="radio" id="mothman" name="monster" />
  <label for="mothman">Mothman</label>
</fieldset>

在 精通 CSS 第 9 章 表单与数据表 学习笔记 中有一个使用 fieldset 将内容分组的案例：

fieldsets

以上的样式经过了一部分修改，原来的样式挺丑的。

使用 button 元素

这里指的是 button元素，而不是 <input type="button" />，其元素的 type属性有 3 个值：

  • submit，提交表单
  • reset，重置表单
  • button，通常使用

提交表单

未设置属性时，button 的默认值就是 submit。

HTML5 为 button元素 新增了一些属性，可以用来对 form元素 进行补充：

  • form
  • formaction
  • formenctype
  • formmethod
  • formtarget
  • formnoalidate

重置表单

如题，设置 <button type="reset">重置</button> 时，点击按钮可以重置表单。

通常使用

设置 <button type="button">按钮</button> 的时候，button元素 就是一个普通的按钮。

在页面上有一些点击事件的时候，就可以使用 button 去实现了。与 <input type="button> 不同，button元素 中可以放图片、文字等不同的元素，适用性更高。

表单外的元素

HTML5 之前所有与表单相关的元素都必须放在 form元素 之中，在 HTML5 之后，元素中嵌入了 form属性，因此只要设置了相应的属性，放在 form元素 之外也可以照常工作。

以上是关于HTML5 权威指南第 12 章 表单 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 权威指南第 10 章 文档分节 学习笔记

HTML5 权威指南第 9 章 组织内容 学习笔记

HTML5 权威指南第 11 章 表格元素 学习笔记

[权威指南]学习笔记——第5章 索引

[权威指南]学习笔记——第6章 特殊的索引和集合

安卓权威编程指南 - 第五章学习笔记(两个Activity)