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

19
五月
2021

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 属性,允许的值有 onoff 两个,默认为 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元素 之外也可以照常工作。

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员