JavaScript 表单
茶柜台有一张单子。表单是 #slip。里面有文本框 #guest，name 也是 guest；数字框 #cups，name 也是 cups；还有按钮 #send，type="submit"。下面的 #note 还写着 blank。
表单把带名字的字段收在一起。写下的内容在 value 里，即使用了 type number，它也始终是字符串。提交是表单上的 submit 事件。不调用 preventDefault，浏览器就会打开表单的地址，这一页就走了。这张单子调用 preventDefault，所以说明还能读。页面把客人写成 lida，把杯数写成 2，点一次 send，这一行变成 lida / 2 / stayed。
这不是票条
票条在父元素上放了一个点击监听，读取 event.target。那一行是 red / blue / gold / 1，没有 preventDefault。铭牌那一页在链接上调用了它。那一行是 click / seal / plaque / true / quiet。这张单子两者都不是。没有 gold 按钮，也没有 currentTarget。事件名叫 submit。要紧的是 lida 和字符串 2。
getElementById("guest") 用 id 找到字段。slip.elements.guest 用 name，经由表单找到它。这里 id 和 name 是同一个词。后面的课才检查空字段。这一页不检查。空的客人也会被送出。
单子记下什么
说明从 blank 开始。客人和杯数一开始是空的。按钮文字一直是 send。按顺序读每一行。除了页面那一行，每段都从空白单子开始。页面那一行是底部的演示。演示只点一次 send。
📊 单子记下什么
| 时刻 | 你读到什么 | 说明 | 容易混 |
|---|---|---|---|
| 客人写成 lida | guest.value |
lida | 去读 id guest |
| 杯数写成 2 | cups.value |
2，而且是字符串 | 以为是数字 2 |
| 点击 send，函数写入 stayed | 说明 | stayed | 调用 slip.submit()，它会跳过监听 |
| 两个名字，经由表单 | elements.guest 和 elements.cups |
lida 2 | 去读 elements.slip |
| 页面脚本 | 这一行 | lida / 2 / stayed | red / blue / gold / 1 |
value 不会把数字框变成数字。存入 2 之后，cups.value 是字符 2。typeof cups.value 是 "string"。以后若要数字，你自己转换。这一行不做这件事。
send.click() 会触发 submit，因为按钮的 type 是 submit。slip.submit() 是另一次调用。它把表单发出去，却不运行你的 submit 监听，里面的 preventDefault 根本轮不到。这一页用的是点击。
到同一字段的两条路
getElementById("cups") 用 id。slip.elements.cups 用 name，而且你得先拿到表单。这里两个属性是同一个词。如果 name 是 count、id 仍是 cups，就没有 elements.cups，字段会在 elements.count 上。
客人的名字
字段开始是空的。脚本把 lida 放进 value，再把同一属性读回说明。这时还没有提交。
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);
记录是 lida。id 是 guest。说明不是 guest 这个词。它是 value 里的那段文字。
几杯
换一张空白单。杯数字段是 type="number"。存入 2，读取 value，再问 typeof。
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);
记录是 2 string。格子看起来像数字，脚本拿到的是文字。不带引号存入数字 2，属性仍会以字符串 "2" 回来。
提交按钮
再换一张空白单。监听在表单上，听的是 submit。它调用 preventDefault 并写入 stayed。然后页面点击 send。它不调用 slip.submit()。
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);
记录是 stayed。监听运行了，浏览器没有离开这一页。若改成调用 slip.submit()，pour 不会运行。说明仍是 blank。
单子上的名字
空白单，这次没有监听。脚本通过 slip.elements 和 name 写入两个字段，再在说明里接起来。
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);
记录是 lida 2。elements.guest 是 name 为 guest 的输入框，不是 id 为 slip 的元素。空格只是说明里的分隔。页面那一行稍后用 /。
单子下面的那一行
脚本在 body 末尾，表单和段落之后。mark 起初是 left。监听阻止默认提交，把两个值抄进说明，并把 mark 设为 stayed。然后填上 lida 和 2，点一次 send。这一行在那次点击之后写出。
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>
这一行是 lida / 2 / stayed。第一个词是客人，第二个是作为文字的杯数，最后一个是 mark。监听运行了，所以是 stayed 而不是 left。说明停在 lida / 2。blank 不见了。票条那一行是另一页。这张单子不检查字段是否已填。
在柜台
- 在客人字段写入 lida，读取
value。说明是 lida。 - 在杯数写入 2，连同
typeof读取value。说明是 2 string。 - 监听 submit，调用
preventDefault，点击 send。说明是 stayed。 - 用
slip.elements读取两个字段。然后看页面那一行：lida / 2 / stayed。
柜台上的岔路
标签仍是 guest、cups 和 send。说明不是 slip 这个词。
- 把
cups.value当成数字 2 - 调用
slip.submit()却等着pour运行 - 忘了
preventDefault，浏览器就去打开地址 - 想要
value却读了 id guest - 去找
slip.elements.slip - 在这一页检查空字段或格式
- 把这一行读成 red / blue / gold / 1
留下这些
- 写入 lida 之后，
guest.value就是 lida cups.value是字符串 2，typeof是"string"send.click()会运行 submit 监听；slip.submit()不会- 页面还在、说明能写出 stayed，是因为
preventDefault slip.elements.guest和slip.elements.cups读取带名字的字段- 页面那一行是 lida / 2 / stayed
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部