当前位置： 首页 > Web前端 > HTML

快速理解JavaScript表单操作

时间：2023-03-28 10:44:14 HTML

前言在HTML中使用

表单元素对应JavaScript中的HTMLFormElement类型，HTMLFormElement继承了HTMLElement接口：interfaceHTMLFormElementextendsHTMLElement{...}因此，HTMLFormElement不仅仅与HTMLElement除了相同的属性和方法外，它还有自己独特的属性和方法：acceptCharset：服务器可以接收的字符集，相当于HTML的accept-charset属性。action：请求的URL，相当于HTML的action属性。元素：表单中所有控件的HTMLCollection。enctype：请求的编码类型，相当于HTML的enctype属性。length：表单中控件的数量。method：HTTP请求的方法类型，通常是get或者post，相当于HTML的method属性。name：表单的名称，相当于HTML的name属性。target：用于发送请求和接收响应的窗口名称，相当于HTML的target属性。reset()：将表单字段重置为其各自的默认值，如果没有默认值则为空。submit()：提交表单。如果要获取表单元素的引用，需要使用DOM选择器进行搜索，比如getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelector这些方法，使用getElementById()方法获取form，只要给form设置一个id属性就够了：letform=document.getElementById("form-id");Document中的是document.forms的成员，因此可以通过索引或表单名称来访问具体的表单。如下图：//文档中的第一个元素letfirstForm=document.forms[0];//获取名为“form-name”的表单letformName=document.forms["form-name"];注意：一个表单可以同时有id和name，两者可以不同。提交表单通常，表单元素通过在客户端单击它来发送表单数据。提交按钮的定义主要包括：使用type="submit"属性值定义元素，如。定义具有type="submit"属性值的。定义具有type="image"属性值的元素，例如。以这种方式提交表单会在请求之前触发提交事件。这提供了验证表单数据的机会，可用于决定是否应提交表单。如下：letform=document.getElementById("form-id");form.addEventListener("submit",(event)=>{//验证表单if(...){//验证失败后，防止表单提交event.preventDefault();return;}//这里用于验证成功后提交表单});调用preventDefault()方法可以阻止表单提交。通常，这是在表单数据无效且不应发送到服务器时完成的。也可以调用submit()方法提交表单，表单中没有提交按钮不影响提交。如下：letform=document.querySelector("#form-id");//提交表单form.submit();通过submit()方法提交的表单不会触发提交事件。因此，在调用此方法之前必须进行数据验证。表单提交的最大问题之一是它们可能会被提交两次。如果提交表单后没有响应，不耐烦的用户可能会多次点击提交按钮。因此，解决这个问题的方法主要有两种：表单提交后禁用按钮，或者通过onsubmit事件取消后续的表单提交。重置表单一般情况下，用户填写完表单信息后，想要重新填写，可以使用重置按钮来重置表单。重置按钮的定义主要包括：使用type="reset"属性值定义元素，如。定义使用type="reset"属性值的重置成功后，表单字段的值将重置为默认值;如果没有默认值，它将为空。重置按钮可以触发重置事件。此事件提供了取消重置的机会。像这样：让form=document.getElementById("form-id");form.addEventListener("reset",(event)=>{event.preventDefault();});重置按钮也可以调用reset()方法完成重置操作：letform=document.getElementById("form-id");//重置表单form.reset();但是reset()方法会触发重置事件。注意：在表单设计中通常不鼓励重置表单。表单域表单元素可以像访问页面上的其他元素一样使用本机DOM方法访问。另外，被调用的elements属性是一个表单的有序列表，包含对表单中所有label元素的引用，包括、