19.1.1 提交表单19.1.2 重置表单19.1.3 表单字段1．表单字段的公共属性2．表单字段的公共方法3．表单字段的公共事件Web表单在HTML中以元素表示，在JavaScript中则以HTMLFormElement类型表示。HTMLFormElement类型继承自HTMLElement类型，因此拥有与其他HTML元素一样的默认属性。不过，HTMLFormElement也有自己的属性和方法。❑ acceptCharset：服务器可以接收的字符集，等价于HTML的accept-charset属性。❑ action：请求的URL，等价于HTML的action属性。❑ elements：表单中所有控件的HTMLCollection。❑ enctype：请求的编码类型，等价于HTML的enctype属性。❑ length：表单中控件的数量。❑ method: HTTP请求的方法类型，通常是”get”或”post”，等价于HTML的method属性。❑ name：表单的名字，等价于HTML的name属性。❑ reset()：把表单字段重置为各自的默认值。❑ submit()：提交表单。❑ target：用于发送请求和接收响应的窗口的名字，等价于HTML的target属性。有几种方式可以取得对元素的引用：最常用的是：将表单当作普通元素为它指定一个id属性，使用getElementById()获取表单。此外，使用document.forms集合可以获取页面上所有的表单元素。然后，可以进一步使用数字索引或表单的名字（name）来访问特定的表单。注意，表单可以同时拥有id和name，而且两者可以不相同。 19.1.1 提交表单表单通过用户点击提交按钮或图片按钮的方式提交。提交按钮可使用type属性为”submit”的或元素来定义；图片按钮可以使用type属性为”image”的元素来定义。以这种方式提交表单会在向服务器发送请求之前，触发submit事件。这样就提供了一个验证表单数据的机会，可以根据验证结果决定是否真的要提交。阻止这个事件的默认行为可以取消提交表单。也可以通过编程方式在JavaScript中调用submit()方法来提交表单。可在任何时候调用此方法提交表单，而且表单中不存在提交按钮也不影响表单提交。 let form = document.getElementById('myForm');// 提交表单form.submit(); 通过submit()提交表单时，submit事件不会触发。因此在调用这个方法前要先做数据验证。表单提交的一个最大的问题：可能会提交两次表单。如果提交表单之后没有什么反应，用户可能会多次点击提交按钮。结果是很烦人的（因为服务器要处理重复的请求），甚至可能造成损失（如果用户正在购物，则可能会多次下单）。解决这个问题主要有两种方式：在表单提交后禁用提交按钮；通过onsubmit事件处理程序取消之后的表单提交。 19.1.2 重置表单用户单击重置按钮可以重置表单。重置按钮可以使用type属性为”reset”的或元素来创建。表单重置后，所有表单字段都会重置回页面第一次渲染时各自拥有的值。如果字段原来是空的，就会变成空的；如果字段有默认值，则恢复为默认值。用户单击重置按钮重置表单会触发reset事件。这个事件为取消重置提供了机会。重置表单也可以通过JavaScript调用reset()方法来完成。 19.1.3 表单字段表单元素可以像页面中的其他元素一样使用原生DOM方法来访问。此外，所有表单元素都是表单elements属性（元素集合）中包含的一个值。这个elements集合是一个有序列表，包含对表单中所有字段的引用，包括所有、、<button>、<select>和<fieldset>元素。<br />elements集合中的每个字段都以它们在HTML标记中出现的次序保存，可以通过索引位置和name属性来访问。<br />如果多个表单控件使用了同一个name，比如像单选按钮那样，则会返回包含所有同名元素的HTMLCollection。 <a name="WxRlg"></a></p> <h3 id="76zspq"><a name="76zspq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1．表单字段的公共属性</h3><p>除<fieldset>元素以外，所有表单字段都有一组同样的属性。<br />以下列出了这些表单字段的公共属性和方法：<br />❑ disabled：布尔值，表示表单字段是否禁用。<br />❑ form：指针，指向表单字段所属的表单。这个属性是只读的。<br />❑ name：字符串，这个字段的名字。<br />❑ readOnly：布尔值，表示这个字段是否只读。<br />❑ tabIndex：数值，表示这个字段在按Tab键时的切换顺序。<br />❑ type：字符串，表示字段类型，如”checkbox”、”radio”等。<br />❑ value：要提交给服务器的字段值。对文件输入字段来说，这个属性是只读的，仅包含计算机上某个文件的路径。<br />这里面除了form属性以外，JavaScript可以动态修改任何属性。<br />这种动态修改表单字段属性的能力，为任何时候以任何方式修改表单，提供了方便。<br />举个例子，Web表单的一个常见问题是用户常常会点击两次提交按钮。<br />在涉及信用卡扣款的情况下，这是个严重的问题，可能会导致重复扣款。<br />对此，常见的解决方案是第一次点击之后禁用提交按钮。可以通过监听submit事件来实现。</p> <pre><code class="lang-javascript">let form = document.getElementById('myForm'); form.addEventListener('submit', (event) => { let target = event.target; // 取得提交按钮 let btn = target.elements['submit-btn']; // 禁用提交按钮 btn.disabled = true; }); </code></pre> <p><a name="PdMoa"></a></p> <h3 id="bapgl1"><a name="bapgl1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2．表单字段的公共方法</h3><p>每个表单字段都有两个公共方法：focus()和blur()<br />focus()方法把浏览器焦点设置到表单字段。这意味着该字段会变成活动字段并可以响应键盘事件。<br />例如，文本框在获得焦点时会在内部显示闪烁的光标，表示可以接收输入。<br />focus()方法主要用来引起用户对页面中某个部分的注意。<br />比如，在页面加载后把焦点定位到表单中第一个字段就是很常见的做法。<br />实现方法是监听load事件，然后在第一个字段上调用focus()<br />HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点，而无须使用JavaScript。<br />focus()的反向操作是blur()，其用于从元素上移除焦点。<br />调用blur()时，焦点不会转移到任何特定元素，仅仅只是从调用这个方法的元素上移除了。 <a name="OcSnJ"></a></p> <h3 id="fbtmo0"><a name="fbtmo0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3．表单字段的公共事件</h3><p>除了鼠标、键盘、变化和HTML事件外，所有字段还支持以下3个事件：<br />❑ blur：在字段失去焦点时触发。<br />❑ change：在<input>和<textarea>元素的value发生变化且失去焦点时触发，或者在<select>元素中选中项发生变化时触发。<br />❑ focus：在字段获得焦点时触发。<br />blur和focus事件会因用户手动改变字段焦点或者调用blur()或focus()方法而触发。<br />这两个事件对所有表单都会一视同仁。<br />change事件则不然，它会因控件不同而在不同时机触发。<br />对于<input>和<textarea>元素，change事件会在字段失去焦点，同时value自控件获得焦点后发生变化时触发；<br />对于<select>元素，change事件会在用户改变了选中项时触发，不需要控件失去焦点。<br />用途：<br />focus和blur事件通常用于以某种方式改变用户界面，以提供可见的提示或额外功能（例如在文本框下面显示下拉菜单）；<br />change事件通常用于验证用户在字段中输入的内容。<br />比如：<br />有的文本框可能只限于接收数值。focus事件可以用来改变控件的背景颜色以便更清楚地表明当前字段获得了焦点；<br />blur事件可以用于去掉这个背景颜色；<br />change事件可以用于在用户输入了非数值时把背景改为红色。</p>
