网站都离不开的Form表单

网站都离不开的Form表单

Form表单允许用户输入数据并向Web服务器发送数据，是一个重要的交互控件。
例如，常见的用户注册页面，用户输入个人信息后，点击按钮提交注册。

<form action="http://xxx.www.com/register" method="post"> 
  <label for="text">输入文本:label>
  <input type="text" name="text" id="text" required />
  
  <label for="file">上传文件:label>
  <input type="file" name="file" id="file" accept="image/*" />

  <label for="tel">输入数字:label>
  <input type="number" name="age" id="age" min="1" max="30" />
  
  <label for="datetime">输入时间:label>
  <input type="datetime-local" name="datetime" id="datetime" />
  
  <label for="email">输入邮件:label>
  <input type="email" name="email" id="email" required />
  
  <label for="url">输入url:label>
  <input type="url" name="url" id="url" />
  
  <label for="pattern">输入字母:label>
  <input type="text" name="pattern" id="pattern" pattern="[A-Za-z]"/>

  <input type="hidden" name="timestamp" id="timestamp" value='20230826' />
  <button type="submit">提交表单button>
form>

一. 用户输入

第一个问题来了，用户怎么输入数据？

Form表单支持输入多种数据类型，包括文本、文件和日期时间等。具体实现是各种输入控件，例如input、checkbox、select和botton等。

常用的input控件支持以下类型：

type属性值	数据类型
text	输入单行的纯文本。多行文本可用textarea控件。
file	上传文件
hidden	隐藏输入框，用户看不到该表单字段，但实际数据会提交给服务器。
submit	提交按钮，点击时会提交表单
number	输入数字，唤起数字键盘，有递增/减按钮。
password	输入密码，展示的时候会模糊处理，但实际数据还是明文的。
email	输入一个合法的邮件地址。
url	输入一个合法的网址。

问题随着而来，如果用户输入了错误的数据，怎么办？

为了保证数据的正确性和安全性，并实时地反馈给用户，需要做表单校验。有以下三种方式：

方式	特点
HTML内置校验	简单，性能好
Javascript校验	支持自定义
服务端校验	最后的防线，对于重要数据一定要有服务端校验。由于请求服务端有网络延迟，用户体验没有客户端校验好，通常两者搭配使用。

HTML内置校验是通过标签属性实现的，例如input标签的校验属性如下：

属性	校验内容
required	必填字段
pattern	正则匹配。

对于简单的表单使用HTML内置校验就足够了，如果想自定义错误信息和界面，就得用到Javascript校验：即通过监听表单元素的状态，并调用JavaScript API来修改DOM。

var form = document.getElementsByTagName("form")[0];
var email = document.getElementById("mail");

// 处理用户输入事件
addEvent(email, "input", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});

// 处理表单提交事件
addEvent(form, "submit", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);

  if (!test) {
    email.className = "invalid";
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";

    // 某些旧版浏览器不支持 event.preventDefault() 方法
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});

表单校验关乎到整个网站的数据安全，拦截非法字符和限制字符长度是必要的。

二. 请求服务器

最后一个问题是，怎么发送数据给服务器？

当触发表单提交时，会自动请求服务器。并支持以下请求行为。

属性	行为
action	请求地址：指定请求服务器URL
method	请求方法：指定method为POST/GET。
enctype	数据格式：当method=POST时，可以用enctype指定MIME。可能取值有：application/x-www-form-urlencoded：默认值;multipart/form-data：用来提交文件。
novalidate	表单校验：提交表单时默认会验证表单，如果不需要校验可设置novalidate。
target	响应结果：在提交表单之后，可通过target指定在哪里显示响应信息。可能取值有：_self：默认值。在当前上下文中加载；_blank：在新的上下文中加载；_parent：在当前上下文的父级上下文中加载；_top：在最顶级的浏上下文中。这里的浏览器上下文指的是标签页、窗口或 iframe。

Form表单提交后是请求action指向的地址，加载整个新的HTML页面。在等待网络请求和页面渲染出来的这个过程，会有白屏和闪屏，影响用户体验。为了进一步提升用户体验，AJAX便诞生了。

在现代Web应用中，Form表单只是被用来用户输入数据，当用户提交表单时，不再使用默认的表单提交，而是用异步的XMLHttpRequest来请求服务器数据，并用Javascript调用DOM API来局部更新HTML页面。

<form id="myForm">
  <label for="myName">告诉我你的名字：</label>
  <input id="myName" name="name" value="John" />
  <input type="submit" value="提交" />
</form>

window.addEventListener("load", function () {
  function sendData() {
    var XHR = new XMLHttpRequest();

    // 我们把这个 FormData 和表单元素绑定在一起。
    var FD = new FormData(form);

    XHR.addEventListener("load", function (event) {
      // 接收服务器返回数据，调用DOM API更新HTML页面
      alert(event.target.responseText);
    });

    XHR.addEventListener("error", function (event) {
      alert("哎呀！出了一些问题。");
    });

    XHR.open("POST", "https://example.com/cors.php");

    XHR.send(FD);
  }

  var form = document.getElementById("myForm");

  // 禁用表单提交的默认行为，使用XMLHttpRequest请求服务器
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    sendData();
  });
});

总结

Form表单允许用户输入数据并向Web服务器发送数据。在Form表单中，用输入控件来输入用户数据。同时，为了数据的正确性和安全性，需要进行表单校验。最后，表单提交时会自动请求服务器地址，并加载整个新的HTML页面，这会导致白屏和闪频。为了进一步提升用户体验，现代Web应用使用了AJAX技术，即使用表单来输入用户数据，然后用XMLHttpRequest来异步请求服务器数据，最后用JavaScript调用DOM API局部刷新HTML页面。