网站都离不开的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 | 输入密码,展示的时候会模糊处理,但实际数据还是明文的。 |
输入一个合法的邮件地址。 | |
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页面。