Heim > Artikel > Web-Frontend > JavaScript 学习（2）表单元素_html/css_WEB-ITnose
JavaScript 学习（2）表单元素_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:38895Durchsuche
##JavaScript 学习-2
1. 表单和表单元素
1.1 form对象
form对象的引用：document.forms[0]或者引用name属性，如：document.forms["formname"],也可以直接使用document.formname调用form对象
1.2 form表单属性和元素
name,target,action,method,enctype
赋值改变:document.forms[0].action或document.formName.action
获得form中的元素使用form.elements[]，如下面将text值清零
var form=window.document.forms[0];for(var i=0;i<form.elements.length;i++){ if(form.elements[i].type=="text"){ form.elements.value=""; }} 1.3表单控件
<html><head><title></title><script type="text/javascript">function goThere () { var list=document.forms[0].urlList; location.href=list.options[list.selectedIndex].value;}</script></head><body><form name="radiolist"> <select name="urlList" onchange="goThere()"> <option selected value="http://www.baidu.com">baidu <option value="http://www.qq.com">qq </select></form></body></html> 1.4向函数传递表单数据和元素
javaScript提供了一个关键字this，它通常指向对象，这个对象包含使用这个关键词的脚本，因此，在一个文本域的onchange事件处理器中，可以使用this作为关键词为函数的参数如
function upperMe(field){ //dosomething }
每个控件都有一个指向所含的表的属性，故可以这么写this.form获取该form
<html><head><title>js_4</title><script type="text/javascript">function processData (formthis) { for(var i=0;i<formthis.Beatles.length;i++){ if(formthis.Beatles[i].checked){ break; } } var beatle=formthis.Beatles[i].value; var song=formthis.song.value; alert("chcecking whether "+song+" feature in " +""+beatle);}function varifySong(entry){ var song=entry.value; alert("checking whether "+song+" is a beatles tunes");}</script></head><body><form onsubmit="return false"><p>choose your favoriate Beatle:<input type="radio" name="Beatles" value="Jhon" checked>John<input type="radio" name="Beatles" value="Markey">Markey</p><p> input your song name:<br><input type="text" name="song" value="song search" onchange="varifySong(this)"><input type="button" name="process " value="process requset..." onclick="processData(this.form)"></p></p></form></body></html> 这段代码有一个比较特殊的逻辑，实验后能发现，在输入框输入之后，点击process requeset之后我们可以看到首次触发是文本框的onchange事件，而process requeset的事件并没有执行。因为text onChange事件的触发是在text离开焦点就触发了，所以在点击text之外的任何的地方都会先触发onChange事件，而按钮的单击在第二次点击后才能执行。这就是组合验证。
1.5提交和验证表单
onsubmit事件处理必须求值得到return true才允许继续提交，或者return false阻止提交。
<html><head><title>js_5</title><script type="text/javascript"> function checkForm(fomr1){ for (var i = 0; i < fomr1.elements.length; i++) { if(fomr1.elements[i].type=="text" &&fomr1.elements[i].value==""){ alert("fill all the name"); return false; } }; }</script></head><body><form onsubmit="return checkForm(this)">Please enter all requested information:<br>FirstName: <input type="text" name="FirstName"><br>LastName :<input type="text" name="LastName"><br><input type="submit"></form></body></html>