第八章-表单和表单对象

JavaScript前端开发（第八章

表单和表单对象）目录1、表单和表单对象2、访问表单和表单元素3、操作表单对象1表单和表单对象1.1定义表单1.2表单控件1.表单和表单对象表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，它的应用范围非常广泛，不仅用于收集信息和反馈意见，还用于资料检索、网上购物等交互式场景。

表单对象是表单中所包含的用于不同目的的控件，比如文本框、密码框、按钮、复选框等。

1.表单和表单对象我们使用<form>标签定义表单，语法如下。表单的属性及功能解释：action规定当提交表单时向何处发送表单数据。name 规定表单的名称。methodget/post规定用于发送表单数据的HTTP方法。1.1.定义表单<formid="formid"name="myForm"method="post"action="">

……</form>1.表单和表单对象文本框:<input>type设置为text密码输入框:type属性设置为password隐藏域：hidden单选框：radio复选框：checkbox提交：submit重设reset无动作按钮buttonchecked:单元框复选框是否为选中状态disabled鼠标无法响应事（无法输入无法选中无法识别单机双击）maxlength允许输入最大字符数readonly只读1.1.表单控件22.1通过表单ID访问2.2通过表单名称访问访问表单和表单元素2.3通过表单标签名访问2.访问表单和表单元素我们可以使用JavaScript的DOM对象来对表单和表单元素进行操作。首先，我们需要给表单或者表单元素来定义一个id属性，然后使用document.getElementById()方法来或获取对应的DOM对象。语法如下。2.1.通过表单ID访问表单varmyForm=document.getElementById("myFormId");//myFormId为表单的idvaruserName=document.getElementById("userId");//userId为表单中控件的id2.访问表单和表单元素首先，我们需要给表单或者表单元素定义一个name属性，然后使用document.getElementsByName()方法来获取对应的DOM对象。语法如下。2.1.通过表单名称访问表单//myForm为表单的name属性varmyForm=document.getElementsByName("myForm")[0];//userName为表单中控件的name属性varuserName=document.getElementsByName("userName")[0];2.访问表单和表单元素在这里，我们不需要定义任何属性，而是直接使用document.getElementsByTagName()方法来获取对应的DOM对象。语法如下。2.1.通过表单标签名访问表单varobj=document.getElementsByTagName("input");3操作表单对象3.1提交表单3.2验证表单3.操作表单对象通过前面的回顾，我们通过三种方式访问了表单对象，接下来我们看一下获取到的表单对象，有哪些操作。（1）禁用和启用表单对象表单对象的disabled属性，如果设置为true，代表禁用这个表单对象，反之，将启用这个表单对象。（2）当我们的页面上有多个文本框时，我们需要在某个文本框双击，那么这个文本框就获得了焦点，也可以使用表单对象的focus()方法，同样如果想让某个表单对象失去焦点，那么可以使用blur()方法。3.操作表单对象提交表单是指将用户在表单中填写或选择的内容传送给服务器端的特定程序（action属性指定），然后由该程序进行具体的处理。将表单数据提交给服务器的方法有两种。第一种方法是单击表单中的“提交”按钮；第二种方法是调用表单对象的submit()方法。这两种方法基本相同，不同之处在于第一种方法是执行事件处理函数onsubmit，并且可能阻止表单提交，第二种方法是将数据直接提交给服务器。在这里我们使用方法一介绍表单的提交。语法如下。3.1.提交表单<formid="fm"method="post"action=""onsubmit="returncheck()">3.操作表单对象验证表单是指在用户提交表单之前，需要对用户输入的数据进行检查，如果满足有效性要求，再提交表单。例如，在表单注册页面，验证用户输入的身份证号是否正确，年龄是否符合要求等。验证表单分为服务器端表单验证和客户端表单验证。服务器端的表单验证是指在服务器端接收到用户提交数据后进行验证工作，而客户端表单验证是指在向服务器提交表单数据之前进行表单验证工作。我们研究的内容是在客户端进行验证，这样可以省却大量错误数据的传送，避免服务器做无用的工作。3.2.验证表单3.操作表单对象在表单的onsubmit事件处理函数中进行表单验证，语法如下。onsubmit事件会在表单中的确认按钮单击时发生。验证函数根据表单对象的值返回true或false，若返回t