了解JavaScript表单操作和表单域(2)

1)value 就是选项的值,提交时会提交该属性的值
2)text 就是option标签中间文本值,类似于innerText
3)selected="selected" 表示页面加载时默认的选项

<script type="application/javascript"> /** * 一、获取表单域对象 * 1.document.getElementById() * 2.formObj.elements[index] * 3.formObj.elements[formarea_name] * 4.formObj.formarea_name */ function getFormArea(){ var obj = document.getElementById("nickid"); //常用 console.log(obj) var formObj = document.aaform obj = formObj.elements[2]; console.log(obj); obj = formObj.elements["nickname"]; console.log(obj); obj = formObj.nickname; //常用 console.log(obj); console.log(formObj.aaa); // a标签不是表单域 } //设置disabled function testReadonly(){ var formareaobj = document.aaform.username; formareaobj.disabled = true; } //光标 焦点 function testMethod(){ var formareaobj = document.aaform.username; // 获得焦点,光标放在该位置 // formareaobj.focus(); // 失去焦点,光标从该位置消失 // formareaobj.blur(); var cityobj = document.getElementById("cityid"); cityobj.focus(); } function testEvent(){ var formareaobj = document.aaform.username; //动态为表单域对象添加事件 formareaobj.onfocus = function(){ console.log("我获取焦点了!") } } function testSelect(){ var sel = document.getElementById("cityid"); console.log(sel.value) console.log(sel.selectedIndex); console.log(sel.options); console.log(sel.length); var optionobj = sel.options[sel.selectedIndex]; console.log(optionobj.value) console.log(optionobj.text); } </script> <body> <button>获取表单域对象</button> <button>readonly</button> <button>测试表单域对象的方法</button> <button>测试表单域对象的事件</button> <button>测试表单域对象-select</button> <hr/> <form action="demo01.html"> 用户名:<input type="text" value="admin" ><br/> 密码:<input type="password"><br/> 昵称:<input type="text" value="大名鼎鼎" abcd="1234" ><br/> 性别:男<input type="radio" value="nan">&nbsp;&nbsp; 女<input type="radio" value="nv"><br/> 爱好:狗<input type="checkbox" value="dog"> 猫<input type="checkbox" value="cat"> 羊驼<input type="checkbox" value="yt"><br/> 城市<select > <option value="1">广州</option> <option value="2" selected="selected">东莞</option> <option value="3">深圳</option> <option value="4">中山</option> </select><br/> <textarea>这家伙很懒,什么都没有留下...</textarea><br/> <input type="submit" value="注册"> <input type="reset" value="重置"> <button type="submit" disabled="disabled">这是个按钮</button> <a href="">baidu</a> </form> </body>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7b6232614b4f425a70708ff618e2ec48.html