这是我参与8月更文挑战的第23天，活动详情查看： 8月更文挑战
序言
我们经常有用到表单，但是对表单的一些细节处理并不清楚，我们今天来学习一些相关的内容，处理表单会变得更加方便。
表单中的元素
文档中的表单是一个特殊集合，document.forms 的成员。 这就是所谓的"命名集合"：既是有命名的，也是有序的，我们既可以使用名字，也可以使用文档编号获取表单。
document.forms.my - name="my" 的表单
document.forms[0] - 文档中的第一个表单
当我们有了一个表单时，其中的任何元素都可以通过命名的集合 form.elements 来获取到。
例如
<form name="coolFish">
<input name="one" value="1">
<input name="two" value="2">
</form>
<script>
// 获取表单
let form = document.forms.coolFish; // <form name="coolFish"> 元素
// 获取表单中的元素
let elem = form.elements.one; // <input name="one"> 元素
alert(elem.value); // 1
</script>
可能会有多个名字相同的元素，这种情况经常在处理单选按钮中出现。 在这种情况下，form.elements[name] 将会是一个集合。
<form>
<input type="radio" name="age" value="10">
<input type="radio" name="age" value="20">
</form>
<script>
let form = document.forms[0];
let ageElems = form.elements.age;
alert(ageElems[0]); // [object HTMLInputElement]
</script>
这些导航（navigation）属性并不依赖于标签的结构。所有的控件元素，无论它们在表单中有多深，都可以通过 form.elements 获取到。
Fieldset 子表单
一个表单内会有一个或多个
元素。它们也具有 elements 属性，该属性列出了 中的表单控件。<body>
<form id="coolFishForm">
<fieldset name="userFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>
<script>
alert(form.elements.login); // <input name="login">
let fieldset = form.elements.userFields;
alert(fieldset); // HTMLFieldSetElement
// 我们可以通过名字从表单和 fieldset 中获取 input
alert(fieldset.elements.login == form.elements.coolFishForm); // true
</script>
</body>
还有更简短的表达方式：form.name 我们可以通form[index/name] 来访问元素。比如说。我们可以将form.elements.login 写成 form.login。
Form中元素的新旧Name
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true，与 <input> 相同
form.login.name = "username"; // 修改 input 的 name
// form.elements 更新了 name：
alert(form.elements.login); // undefined
alert(form.elements.username); // input
// form 允许我们使用两个名字：新的名字和旧的名字
alert(form.username == form.login); // true
</script>
表单控件
input 和 textarea
我们可以通过 input.value（字符串）或 input.checked（布尔值）来访问复选框（checkbox）中的它们的 value。
input.value = "New value";
textarea.value = "New text";
input.checked = true; // 对于复选框（checkbox）或单选按钮（radio button）
select 和 option
一个 元素有 3 个重要的属性： select.options —— 的子元素的集合， select.value —— 当前所选择的 的 value， select.selectedIndex —— 当前所选择的 的编号。 它们提供了三种为 设置 value 的不同方式：
- 找到对应的 元素，并将 option.selected 设置为 true。
- 将 select.value 设置为对应的 value。
- 将 select.selectedIndex 设置为对应 的编号。
第一个方式最明显，但是 (2) 和 (3) 通常来说会更方便。 下面是一个例子：
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
// 所有这三行做的是同一件事
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
</script>
