1.获取表单
(1.)document.表单名称
(2.)document.getElement(表单的id)
(3.)document.forms[表单名称]
(4.)document.forms[索引]; //从0开始的
列子:<form id="myform1" name="myform1"></form>
<form id="myform2" name="myform2"></form>
在这就举前两种比较常用到的:
<script type="text/javascript">
//第一种
var form01=document.myform1;
console.log(form01);
//第二种
var form1=document.getElementById('myform1');
console.log(form1);
</script>
2.获取input元素
(1)通过 id获取:document.getElementById(元素的id);
(2)通过 form.名称形式获取:myform.元素名称; —>name属性值
(3)通过 name 获取:document.getElementByName(元素名称)[索引]//从0开始
(4)通过 tagName 数组:document.getElementsByTagName(‘input’)[索引] //从 0 开始
例子:
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea><br />
<button type="button" onclick="getTxt();" >获取元素内容</button>
</form>
//第一种
var uname=document.getElementById('uname').value;
console.log(uname);
//第二种
//通过 form.名称形式获取: myform.元素名称; --> name 属性值
var form=document.getElementById('myform').upwd;
console.log(form); //通过from.名称获取 name=upwd
console.log(form.value);
3.获取单选框
获取单选框有一个前提:将一组单选框按钮设置相同的name属性值
(1)获取单选按钮组:document.getElementsByName(“name属性值”);
(2)遍历每个单选按钮,并查看单选按钮元素的checked属性
若属性值为true,表示被选中,否则未被选中
选中状态设定: checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定: 没有 checked 属性 或 checked=’false’
例子:
form action=""name="myform">
<input type="text" name="txt" value="txts">
<input type="radio" name="sex"value="1" checked>男
<input type="radio" name="sex" value="2">女
<button type="button" onclick="select1()">点击</button>
</form>
<script type="text/javascript">
function select1(){
var na=document.getElementsByname('sex');
for(var i=0,i<na.length;i++){
var s=na[i]; //每一个元素
var h=s.checked;
var t=s.value;
console.log("是否被选中: "+h+",值是: "+t);
}
}
</script>
4.获取多选框
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="checkbox" name="rad" value="1" /> 唱歌
<input type="checkbox" name="rad" value="2" checked /> 跳舞
<input type="checkbox" name="rad" value="3" checked /> rap
<button type="button" onclick="getTxt()">点击</button>
</form>
<script type="text/javascript">
function getTxt(){
var radio=document.getElementsByName('rad');
var all="";
for(var i=0;i<radio.length;i++){
//得到每个单选按钮
var s=radio[i];
var g= s.checked;//得到每个单选按钮及状态
if(g){ //判断g的状态
var vv= s.value;
all+=vv+",";
}
}
//字符串的截取
all=all.substring(0,all.length-1);
console.log(all);
}
</script>
5.获取下拉选项
(1)获取select 对象:
var ufrom = document.getElementById(“ufrom”);
(2)获取选中项的索引:
var idx=ufrom.selectedIndex ;
(3)获取选中项 options 的 value 属性值:
var val = ufrom.options[idx].value;
注意:当通过 options 获取选中项的 value 属性值时,
若没有 value 属性,则取 option 标签的内容
若存在 value 属性,则取 value 属性的值
(4)获取选中项 options 的 text:
var txt = ufrom.options[idx].text;
选中状态设定:selected=‘selected’、selected=true、selected
未选中状态设定:不设 selected 属性
例子:
<select id="city" name="city">
<option value="-1" >请选择</option> <!--索引 0-->
<option value="beijing" selected="selected">北京</option> <!--索引 1-->
<option value="shanghai">上海</option> <!--索引 2-->
<option >杭州</option> <!--索引 3--> <!-- 若没有 value 属性,则取 option 标签的内容-->
</select><br />
<button onclick="test()">点击</button>
<script type="text/javascript">
function test(){
//获取 select 对象
var city=document.getElementById('city');
// 获取选中项的索引:
var id =city.selectedIndex;
console.log(id);
//获取选中项 options 的 value 属性值:
var index1=city.options[1].value;
console.log(index1); //beijing
获取选中项 options 的 text:
var text1=city.options[2].text;
console.log(text1);
// 选中状态设定:selected='selected'、selected=true、selected
// 未选中状态设定:不设 selected 属性
var oo= city.options[3].checked=true; //选中下标为3的下拉按钮,设置为true,设置选中状态
</script>
6.表单提交
提交表单:
(1)使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();
(2)使用 submit 按钮 + οnclick=“return 函数()” +函数编写代码: 最后必须返回:return true|false;
(3)使用 submit 按钮/图片提交按钮 + 表单 οnsubmit=“return 函数();” +函数编写代码: 最后必须返回: return true|false;
(4)使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();
例子:
<form id="fo" action="https://www.baidu.com" method="get" onsubmit="return sub2() ">
姓名:<input type="text" id="uname" name="uname"/> <span id="nameMsg" style="color: #2b82ff"></span> <br />
密码:<input type="password" id="userpass" name="userpsss"/> <span id="pwdMsg" style="color: #2b82ff"></span> <br />
<input type="submit" value="登录" onclick="return hh()"/>
</form>
<script type="text/javascript">
//第一种方法
function login() {
// 条件判断
// 1、得到姓名和密码
var uname = document.getElementById("uname").value;
var upwd = document.getElementById("upwd").value;
// 2、判断用户名和密码是否为空
if (uname == null || uname.trim() == "") {
document.getElementById("nameMsg").innerHTML = "姓名不能不为为空!";
return; // 阻止代码往下运行
}
// 如果姓名不为空,则清空提示信息
document.getElementById("nameMsg").innerHTML = "";
if (upwd == null || upwd.trim() == "") {
document.getElementById("pwdMsg").innerHTML = "密码不能不为为空!";
return; // 阻止代码往下运行
}
// 提交表单
document.getElementById("myform1").submit();
}
//第二种方法
function hh(){
var uname=document.getElementById('uname').value;
var upass=document.getElementById('userpass').value;
if(uname==null || uname.trim()==""){
document.getElementById('nameMsg').innerHTML="用户名不能为空";
return false;
}
//如果姓名不为空,清除提示;
document.getElementById("nameMsg").innerHTML="";
if(upass==null || upass.trim()==""){
document.getElementById("pwdMsg").innerHTML="密码不能为空";
return false;
}
return true;
}
//第三种方法
function sub2(){
//获取两个元素值
var name3=document.getElementById('uname').value;
var upass3=document.getElementById('userpass').value;
//比较
if(name3==null || name3.trim()==""){
document.getElementById('nameMsg').innerHTML="哎,小伙用户名不能为空"
return false;
}
//如果用户输入了用户名,把提示消息去掉
document.getElementById('nameMsg').innerHTML="";
if(upass3==null || upass3.trim()==""){
document.getElementById('pwdMsg').innerHTML="小伙记性不好啊,密码都没输";
return false;
}
return true;
}
</script>