获得表单对象
利用表单在文档中的索引或表单的name属性来援用表单
document.forms[i] //得到页面中的第i个表单。
document.forms[formName] //得到页面中相应name的表单
利用表单的id属性：
document.getElementById(formId);
document.formName;
经常使用属性
属性 描写
action 返回或设置action属性
elements 获得1个数组，包括该表单中所有的表单域
length 返回表单的表单域的数量
method 返回或设置表单的method属性
name 返回或设置表单的name属性
Form对象的方法
方法 描写
submit() 相当于单击submit按钮，表示表单提交到指定页面
reset() 相当于单击reset按钮，表示所有表单域到初始值
Form对象的事件
事件 描写
onsubmit 在表单提交之前触发
onreset 在表单被重置之前触发
表单域通用方法
援用表单域的4种方法
form.name; form.elements[i];
form.elements[name]; document.getElementById(id);
disabled：使表单域不能接受用户的操作，变成只读
name：获得或设置表单域的名称
form：获得该表单域所属的表单
value：获得或设置表单域的值
type：判断表单域的类型
focus():使表单域取得焦点
blur()：使表单域失去焦点
文本域 (text,password,textarea )
利用value属性获得和设置文本域内容
利用defaultValue取得文本域的默许值。reset方法就是调用该属性。
单选按钮组和复选框经常使用操作
通过checked属性取得选中和未选中的状态。
取得单选按钮组的值：
只能通过遍历单选按钮来获得被选中的值
复选框的处理类似单选按钮
Demo
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html>
<head>
<metahttp-equiv=Content-Type content=text/html;charset=utf⑻ />
<title>UntitledDocument</title>
<ScriptLanguage=JavaScript>
function getRadioValue() {
varradioGroup = document.forms[0].r;
// alert(radioGroup.value); //不能想固然用这个。必须遍历才能取到被选中的单选按钮的值
// alert(radioGroup.length);
varselected = null;
for(vari=0;i<radioGroup.length;i++) {
if(radioGroup[i].checked){
selected= radioGroup[i];
alert(selected.value);
break;
}
}
}
functiongetCheckboxValue(){
vargroup = document.form1.hobby;
vara1 = new Array();
varj=0;
for(vari=0;i<group.length;i++) {
if(group[i].checked){
alert(group[i].value);
a1[j]=group[i].value;
j++;
}
}
}
</Script>
</head>
<body>
<formname=form1 >
<inputtype=radio name=r value=1 >奥迪</input>
<inputtype=radio name=r value=2>宝马</input>
<inputtype=radio name=r value=3>劳斯莱斯</input><br>
驾驶技术:<br>
<inputtype=checkbox name=hobby value=1>开车</input><br>
<inputtype=checkbox name=hobby value=2>开飞机</input><br>
<inputtype=checkbox name=hobby value=3>开坦克</input><br>
<inputtype=checkbox name=hobby value=4>开轮船</input><br>
<inputtype=button onclick=getRadioValue(); value=选择汽车/><br/>
<inputtype=button onclick=getCheckboxValue(); value=选择驾驶技术/>
</form>
</body>
</html>
下拉列表的使用
使用value属性获得和设置下拉列表选当选项的值
使用selectedIndex属性获得当前被选当选项的索引
使用options属性获得所有选项集合
使用option对象的value属性和text属性,可以读写这两个属性。
使用option对象的selected属性选中该option
Demo
<!DOCTYPE HTML PUBLIC -//W3C//DTDHTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html>
<head>
<metahttp-equiv=Content-Type content=text/html;charset=utf⑻ />
<title>UntitledDocument</title>
<script>
functionselectValue() {
// varcars = document.forms[0].elements[cars];
varcars = document.form1.cars;
// alert(cars.value);
// cars.value=6;
// alert(cars.value);
// alert(selectedIndex:+cars.selectedIndex);
vara = cars.options; //返回的是1个数组
// a[1].text=奇瑞;
// a[1].value=99;
// alert(a[1].text);
// alert(a[1].value);
// vara = cars.options;
// alert(a[1].selected);
// a[1].selected=true;
}
</script>
</head>
<body>
<formname=form1>
<selectname=cars id=idCars>
<optionvalue=4 selected>劳斯莱斯</option>
<optionvalue=5>宝马</option>
<optionvalue=6>奔驰</option>
</select>
</form>
<ahref=# onclick=selectValue();>测试下拉列表</a>
</body>
</html>
表单验证操作
利用验证函数的两种经常使用的方法：
<inputtype=submit onclick=return validate()/>
<formaction=a.jsp onsubmit=return validate()/>
若返回false,则不提交表单。Demo
<!DOCTYPE HTML PUBLIC -//W3C//DTDHTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html>
<head>
<metahttp-equiv=Content-Type content=text/html;charset=utf⑻ />
<title>UntitledDocument</title>
<script>
functionvalidate() {
alert(validate);
//常见的验证操作
// returnfalse;
returntrue;
}
</script>
</head>
<body>
<formaction=05.html name=form1>
用户名:<inputtype=text name=text1 value=/>
<inputtype=submit name=submit1 value=提交onclick=return validate();/>
</form>
<br><br>
<formaction=05.html name=form2 onsubmit=returnvalidate();>
用户名:<inputtype=text name=text2 value=/>
<inputtype=submit name=submit2 value=提交/>
</form>
</body>
</html>
注册表单
用户名长度为：5⑴0
密码长度为：5⑴0
确认密码框必须跟密码框的值相等
爱好：学js，用js，教js。 必须最少选中1项
不符合，旁边给出提示。并且不能提交！
Demo
<!DOCTYPE HTML PUBLIC -//W3C//DTDHTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html>
<head>
<metahttp-equiv=Content-Type content=text/html;charset=utf⑻>
<title>akali-javascriptform</title>
<script>
functioncheck(frm){
varuname = frm.uname.value;
varpwd1 = frm.pwd1.value;
varpwd2 = frm.pwd2.value;
varfs = frm.favorite;
varfs_no = false;
varuname_ok = true;
varpwd1_ok = true;
varpwd2_ok = true;
document.getElementById(unameError).innerHTML= ;
document.getElementById(pwd1Error).innerHTML= ;
document.getElementById(pwd2Error).innerHTML= ;
document.getElementById(favoriteError).innerHTML= ;
if(uname.length<5||uname.length>10){
document.getElementById(unameError).innerHTML= 用户名长度应在5⑴0;
uname_ok= false;
}
if(pwd1.length<5||pwd1.length>10){
document.getElementById(pwd1Error).innerHTML= 密码长度应在5⑴0;
pwd1_ok= false;
}
if(pwd1!=pwd2){
document.getElementById(pwd2Error).innerHTML= 两次输入密码不1致！;
pwd2_ok= false;
}
for(vari=0;i<fs.length;i++){
if(fs[i].checked){
fs_no= true; //如果有1个被选中！
break;
}
}
if(!fs_no){
document.getElementById(favoriteError).innerHTML= 请最少选择1个爱好！;
}
return uname_ok&&pwd1_ok&&pwd2_ok&&fs_no;
}
</script>
</head>
<body>
<formaction=a.jsp onsubmit=return check(this); >
用户名：<inputtype=text name=uname /> <spanstyle=color:red; id=unameError></span><br/>
密码：<input type=passwordname=pwd1 />
<spanstyle=color:red; id=pwd1Error></span>
<br/>
确认密码：<inputtype=password name=pwd2 />
<spanstyle=color:red; id=pwd2Error></span>
<br/>
爱好：<inputtype=checkbox name=favorite value=1 />学js
<inputtype=checkbox name=favorite value=2 />用js
<inputtype=checkbox name=favorite value=3 />教js
<spanstyle=color:red; id=favoriteError></span>
<br/>
<inputtype=submit value=提交 />
</form>
</body>
</html>
业务思想
表单操作不过是交互的必要性设计，冲浪的时候，早已经是见多不惊。但真正到自己设计的时候呢，不同的观点，略有不同，但实质很简单，根据可用性设计原则，设计出优美的表单，还是很重要的。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
