首页手记 JavaScript表单共通属性和方法

JavaScript表单共通属性和方法

标签：

Html/CSS JavaScript 深度学习

取得form元素

1、将form元素看成与其他元素一样，并为其添加id属性，然后使用getElementById()方法找到它。

例子：

<form id="form1" title=1></form>

var form = document.getElementById("form1")
alert(form.title)
//输出：1

2、通过document.forms可以取得页面中所有的form元素，在这个集合中，可以通过数值索引或name值来取得特定的form元素。

例子：

<form name="form1" title=1></form>
<form name="form2" title=2></form>

var forms = document.forms;
alert(forms[0].title)
alert(forms["form2"].title)
//输出：1/2

3、通过document对象取得设置了name属性的form元素。

例子：

<form name="form1" title=1></form>
<form name="form2" title=2></form>

var form1 = document.form1;
var form2 = document.form2;
alert(form1.title)
alert(form2.title)
//输出：1/2

form元素的常用方法

1、submit()方法：
调用submit()方法可以提交表单，但是不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。

例子：

<form name="myForm" method="get" action="https://www.baidu.com/">
    <input type="text">
</form>

var myForm = document.forms[0]
setTimeout(function(){myForm.submit()},2000)

使用input或button元素，只要将其type属性的值设置为"submit"或者使用图像按钮(通过将input的type属性值设置为"image")都可以提交表单。这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

例子：

<form name="myForm" method="get" action="https://www.baidu.com/">
    <input type="text">
    <input type="submit" value="OK">
</form>

var myForm = document.forms[0]
myForm.addEventListener("submit",function(event){
    if(myForm.elements[0].value==""){
        event.preventDefault()
        }
    })

2、reset()方法：
重置表单，会触发reset事件。

例子：

<form name="myForm" method="get" action="https://www.baidu.com/">
    <input type="text">
</form>

var myForm = document.forms[0]
myForm.elements[0].value="hello"
setTimeout(function(){myForm.reset()},2000)

将input或button元素的type属性值设置为"reset"就可以创建重置按钮，单击重置按钮会触发reset事件。

例子：

<form name="myForm" method="get" action="https://www.baidu.com/">
    <input type="text">
    <button type="reset">Clear</button>
</form>

var myForm = document.forms[0]
myForm.addEventListener("reset",function(event){
    if(!confirm("Are you sure?")){
        event.preventDefault()
        }
    })

取得表单元素

1、通过数值索引或name值来取得特定的表单元素。

例子：

<form name="myForm" method="get" action="">
    <input type="checkbox" name="checkA">A
    <input type="checkbox" name="checkB">B
    <input type="checkbox" name="checkC">C
</form>

var myForm = document.forms["myForm"]
myForm[0].checked=true
myForm["checkB"].checked=true
myForm.checkC.checked=true

2、通过elements属性，该属性是表单中所有元素的有序集合，可以按照位置和name属性来访问特定的表单元素（推荐用这个方法）。

例子：

<form name="myForm" method="get" action="">
    <input type="checkbox" name="checkA">A
    <input type="checkbox" name="checkB">B
    <input type="checkbox" name="checkC">C
</form>

var myForm = document.forms["myForm"]
myForm.elements[0].checked=true
myForm.elements["checkB"].checked=true
alert(myForm.elements.length)
//输出：3

表单元素的共有属性

可以通过JavaScript取得和修改表单元素的任何属性。

disabled：布尔值，表示当前字段是否被禁用。
form：指向当前字段所属表单的指针；只读。
name：当前字段的名称。
readOnly：布尔值，表示当前字段是否只读。
tabIndex：表示当前字段的切换（tab）序号。
type：当前字段的类型，如"checkbox"、"radio"，等等。
value：当前字段将被提交给服务器的值。

表单元素的共有方法