1、Radio对象:
Radio 对象代表 HTML 表单中的单选按钮。
Radio 对象常用属性:
Radio 对象常用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="t1()" />
<br />
<input type="radio" name="sex" value="0" />女
<input type="radio" name="sex" value="1" />男
<input type="button" value="单选" onclick="t3()" />
<script>
function t3(){
//获取用户选中项的值
var elements=document.getElementsByName("sex");
for (var i=0;i<elements.length;i++) {
var element=elements[i];
console.log(element.checked+","+element.value);
}
}
document.getElementsByName("sex")[1].checked=true;
document.getElementsByName("sex")[0].checked=true;
</body>
</html>
2、Checkbox 对象:
Checkbox 对象代表一个 HTML 表单中的 一个选择框。 Checkbox 对象常用属性:
Checkbox 对象常用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="name" />
</script>
<input type="checkbox" name="hobby" value="0" />篮球
<input type="checkbox" name="hobby" value="0" />羽毛球
<input type="checkbox" name="hobby" value="0" />乒乓球
<input type="button" value="多选" onclick="t4()" />
<script>
function t4(){
//获取用户选中项的值
var elements=document.getElementsByName("hobby");
for (var i=0;i<elements.length;i++) {
var element=elements[i];
console.log(element.checked+","+element.value);
}
}
document.getElementsByName("hobby")[1].checked=true;
document.getElementsByName("hobby")[0].checked=true;
</script>
</body>
</html>
3、Select 对象:
Select 对象代表 HTML 表单中的一个下拉列表。
Select 对象集合:
Select 对象常用属性:
4、Option 对象
Option 对象代表 HTML 表单中下拉列表中的一个选项。 Option 对象构造方法:
Option 对象常用属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option value="">--请选择--</option>
<option value="001">--辽宁省--</option>
<option value="">--北京市--</option>
<option value="">--上海市--</option>
</select>
<input type="button" value="下拉列表" onclick="t5()" />
<script>
function t4(){
//获取用户选中项的值
var elements=document.getElementsById("province");
var options=element.options;
for (var i=0;i<options.length;i++) {
var option=options[i];
console.log(option.selected+","+option.value);
}
}
document.getElementsById("province").options[1].selected=true;
document.getElementsById("province").disabled=true;
</script>
</body>
</html>
5、Form 对象:
Form 对象代表一个 HTML 表单。
Form 对象集合:
Form 对象常用属性:
Form 对象常用方法:
6、Text 对象:
Text 对象代表 HTML 表单中的文本输入域。
在 HTML 表单中 <input type="text"> 每出现一次,Text 对象就会被创建。
Text 对象常用属性:
Text 对象常用方法:
说明:Password 对象和Textarea 对象都有value属性、disabled属性和readOnly属性,都有focus方法;Hidden 对象有value属性、disabled属性,没有readOnly属性和focus方法;