表单元素与控件取值

如何从文档中取得表单？

• document.forms: 文档中全部 <form> 组成的命名集合, 既有序又可按名索引;

document.forms.my; // name="my" 的那个表单
document.forms[0]; // 文档中第一个表单

如何从表单中取得控件？

• form.elements: 表单内全部控件的命名集合, form.elements[name] 或 form.elements[index] 取值;
• 关键性质: 与标签嵌套层级无关, 再深的控件也能从表单直接取到;
• 同名控件: form.elements[name] 变成集合, 单选按钮组与复选框组就属于这种;

const form = document.forms.my;
form.elements.one; // <input name="one">
form.elements.age[0]; // name="age" 的 radio 组里的第一个

• fieldset: 相当于"子表单", 也有 elements, 且 fieldset.elements.login == form.elements.login 为 true;
• 反向引用: 控件通过 element.form 找回所属表单, 于是 form → element → form 双向可达;

form.login.form; // HTMLFormElement, 又回到同一个表单

• 简写 form.name 等价于 form.elements.name, 但两者有微妙差异;

写法	取值来源	控件 name 改掉后
form.elements.login	实时按名字查表	立刻失效 (undefined)
form.login	表单保留的旧引用	旧名、新名都能取到

• 结论: 简写能用, 但确实改过 name 时行为会分叉, 所以改名字后以 form.elements 为准;

输入类控件的值如何读写？

• input.value: 字符串值;
• input.checked: 布尔值, 只对复选框与单选按钮有意义;

input.value = "New value";
textarea.value = "New text";
input.checked = true; // checkbox / radio

• textarea 陷阱: 绝不能用 textarea.innerHTML 读值, 它只保留页面初始的 HTML, 不反映当前输入;
• 取值口径: input.value、textarea.value、select.value 是统一入口, 只是复选框/单选要看 checked;

select 的三个属性怎么用？

属性	含义
select.options	全部 <option> 组成的集合
select.value	当前选中 option 的 value
select.selectedIndex	当前选中 option 的序号 (从 0 起)

• 三种等价的设值方式 (选项序号从 0 开始, 下面都在选第 3 项):

select.options[2].selected = true; // 1. 直接改 option
select.selectedIndex = 2; // 2. 按序号选中
select.value = "banana"; // 3. 按值选中

• multiple: 加了该属性后 <select> 可同时选中多项 (实际很少用);
• 多选取值: 此时 value/selectedIndex 不够用, 只能逐个检查 option.selected;

const selected = Array.from(select.options)
  .filter((option) => option.selected)
  .map((option) => option.value);

new Option 如何创建选项？

option = new Option(text, value, defaultSelected, selected);
new Option("Classic", "classic"); // <option value="classic">Classic</option>

• 参数: text 为选项文字, value 为选项值, defaultSelected 为真则写入 selected HTML 属性, selected 为真则当场选中;
• 两者区别: defaultSelected 只影响属性 (option.getAttribute("selected")), selected 决定是否真的选中, 实践中两个都设成同值或都省略;
• 等价的啰嗦写法: document.createElement("option") 再手动设属性, 只是更长;
• 常用选项属性: option.selected (是否选中)、option.index (在 <select> 中的序号)、option.text (给用户看的文字);

整个表单的值能否一次取出？

• 一行取回全部 name/value 对, 省去逐个控件的判断;

const data = new FormData(form);

• 它只负责"打包", 发送与解析见 Fetch;