javascript之表单

最新推荐文章于 2019-05-17 15:49:57 发布

rainkin1993

最新推荐文章于 2019-05-17 15:49:57 发布

阅读量585

点赞数

分类专栏： javascript初学之路文章标签： javascript function input 文档 div c

本文链接：https://blog.csdn.net/rainkin1993/article/details/7880483

版权

javascript初学之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.

写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.

1.Form对象

除了通过ID TagName等来获得form对象还可以直接通过document.formName获得

例子1-1：

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
vara = document.form1;
alert(a);
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="">
  <p>
    <label>
      <input type="radio"name="RadioGroup1" value="A" id="RadioGroup1_0"/>
      AA</label>
    <br />
    <label>
      <input type="radio"name="RadioGroup1" value="B" id="RadioGroup1_1"/>
      BBB</label>
    <br />
    <label>
      <input type="radio"name="RadioGroup1" value="C" id="RadioGroup1_2"/>
      CCC</label>
    <br />
  </p>
</form>
</body>
</html>

注意：如果name重名了返回一个节点列表NodeList(尽量不要重名)，可以通过索引访问

2.获取表单元素

（1）在form中访问表单控件，可直接通过name访问（同样重名会返回一个类数组）

window.onload =function (){
var a = document.form1;
alert(a.RadioGroup1[0].value);//返回A
}

（2） form对象有个elements属性，包含了所有的表单控件（不包括div之类的）

window.onload =function (){
var a = document.form1;
alert(a.elements.length);//返回3
}

3，form对象有个onsubmit事件，当表单提交，就会发生submit事件，我们可以通过这个来检测内容是否正确

返回false 就不会提交

 
window.onload =function (){
varf = document.form1;
f.οnsubmit=function(){
if(true/*要检测内容*/) return true;
else return false;}
}

4.checked

单选按钮和复选框都有一个checked属性，表示是否被选中

window.onload =function (){
var f = document.form1;
if(f.RadioGroup1[0].checked) alert(true);//如果被选中，checked属性就是true ，就会返回true
}

5.文本框

文本框的value表示内容，defaultValue表示默认内容

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.input.value);}
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="aaa">
  <input type="text"value="阿斯蒂芬" name='input'/>
  <input name=""type="submit" />
</form>
</body>
</html>

6.复选框select对象

（1）select对象有个value属性，表示当前选中的内容

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.s.value);return false;}
}
</script>
 
</head>
 
<body>
<formid="form1" name="form1" method="post"action="aaa">
 <select name="s">
   <optionvalue="A">a</option>
   <optionvalue="B">b</option>
 </select>
  <input name=""type="submit" />
</form>
</body>
</html>
//点击提交返回A

（2）有个selectedIndex属性，表示选中的内容的下标第一个为0，第二为1；

window.onload =function (){
var f = document.form1;
f.οnsubmit=function(){alert(f.s.selectedIndex);return false;}
}
//如果选中第一个返回0

（3）有个options类数组，包含了所有的option

window.onload =function (){
varf = document.form1;
f.οnsubmit=function(){alert(f.s.options.length);return false;}
}
//返回2

注意这个options和数组很像，可以改变length ，可以直接对options[0]赋值

var o = newOption("t",'v');

f.options[0] = o;

（3）添加option

可以通过creatElement 和 appendChild方法添加

但是有更好的方法

var f = document.form1.s;//获得select对象
var o = new Option("t",'v');//创建一个option对象  new Option（'text值','value值'）
f.add(o,f.options[0]);//select对象的add方法 添加option  add（‘要添加的option对象’，‘已存在的option对象’）将会添加到这个已存在对象的前面  如果想要添加到最后 add（‘要添加对象’，null）；

（4）删除option

select的remove方法 select.remove（下标）

window.onload =function (){
var f = document.form1.s;
var o = new Option("t",'v');
f.remove(0);
}

rainkin1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之表单

漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.1.Form对象除了通过ID TagName等来获得form对象还可以直接通过document.formName获得例子1-1：无标题文档
复制链接

扫一扫

专栏目录