[JavaScript] 10.JS 表单操作

获得表单对象

利用表单在文档中的索引或表单的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>

业务思想

表单操作不过是交互的必要性设计,冲浪的时候,早已经是见多不惊。但真正到自己设计的时候呢,不同的观点,略有不同,但实质很简单,根据可用性设计原则,设计出优美的表单,还是很重要的。


相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...