<body>
<form id="login" action="http://www.baidu.com/s">
<input type="text" name="wd"/>
<input type="text" name="wd"/>
<input type="button" value="登录" onclick="login()"/>
</form>
<input id="name"/>
<input type="button" value="测试" onclick="t()"/>
<script>
/* document.getElementById("name").focus();
function t(){
var element = document.getElementById("name");//根据id获取标签属性
console.log(element.value);//在控制台输出value值,即内容
element.value="jim";//向表单中添加默认值
element.readOnly=true;//设置只读
element.disabled=true;//设置禁用
//文本框以及密码框的作用方式与之一致
}*/
</script>
<br />
<input type="radio" name="sex" value="0"/>女
<input type="radio" name="sex" value="1"/>男
<input type="button" value="测试" onclick="t1()"/>
<script>
document.getElementsByName("sex")[0].checked=true;//设置默认选中
document.getElementsByName("sex")[1].disabled=true;//设置禁用
function t1(){
var elements = document.getElementsByName("sex");//因为是单选框,有多个值,需要使用name来进行获取
for(var i = 0;i<elements.length;i++){
console.log(elements[i].checked+","+elements[i].value);//输出是否选中以及所对应的的value值
}
}
</script>
<br />
<input type="checkbox" name="hobby" value="1"/>足球
<input type="checkbox" name="hobby" value="2"/>篮球
<input type="checkbox" name="hobby" value="3"/>羽毛球
<input type="button" value="测试" onclick="t2()"/>
<script>
document.getElementsByName("hobby")[1].checked=true;//设置默认选中
document.getElementsByName("hobby")[1].disabled=true;//设置禁用
function t2(){
var elements = document.getElementsByName("hobby");//获取标签属性值
for(var i = 0;i<elements.length;i++){
console.log(elements[i].checked+","+elements[i].value);//输出多选框是否选中以及所对应的的value值
}
}
</script>
<br />
<br />
<select id="province">
<option>---请选择---</option>
<option value="0">---北京---</option>
<option value="1">---上海---</option>
<option value="2">---天津---</option>
</select>
<input type="button" value="测试" onclick="t3()"/>
<script>
function t3(){
var element = document.getElementById("province");//根据id获取下拉列表
var options = element.options;//获取下拉列表的属性值
for(var i = 1;i<options.length;i++){
console.log(options[i].selected+","+options[i].value);//输出下拉列表是否选中以及对应的value值
}
}
document.getElementById("province").options[1].selected=true;//设置默认选中
document.getElementById("province").options[3].disabled=true;//禁用某一下拉选项
document.getElementById("province").disabled=true;//禁用下拉列表
</script>
</body>
表单校验
最新推荐文章于 2024-10-09 11:19:11 发布