1.form对象:
Form 对象代表一个 HTML 表单。
Form 对象集合:
集合 | 描述 |
包含表单中所有元素的数组。 |
Form 对象常用属性:
属性 | 描述 |
设置或返回表单的 action 属性。 | |
设置或返回表单用来编码内容的 MIME 类型。 | |
返回表单中的元素数目。 | |
设置或返回将数据发送到服务器的 HTTP 方法。 |
Form 对象常用方法:
方法 | 描述 |
把表单的所有输入元素重置为它们的默认值。 例子 | |
提交表单。 例子 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" id="test">
<input />
<input type="button" onclick="t7()" value="提交"/>
</form>
<script>
function t7(){
var element = document.getElementById("test");//获取form对象
element.submit();//提交表单
}
</script>
</body>
</html>
2.text对象:
Text 对象代表 HTML 表单中的文本输入域。在 HTML 表单中 <input type="text"> 每出现一次,Text 对象就会被创建。
Text 对象常用属性:
属性 | 描述 |
设置或返回文本域的默认值。 | |
设置或返回文本域是否应被禁用。 | |
设置或返回文本域中的最大字符数。 | |
设置或返回文本域是否应是只读的。 | |
设置或返回文本域的尺寸。 | |
返回文本域的表单元素类型。 | |
设置或返回文本域的 value 属性的值。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" id="name" />
<input type="password" id="password"/>//属性与text相同
<textarea id="ta"></textarea>//属性与text相同
<input type="button" value="测试" onclick="t1()"/>
</form>
<script>
document.getElementById("name").focus();//设置text对象焦点
function t1(){
var element = document.getElementById("name");//获取text对象
console.log(element.value);//获取text对象值
element.value = "Jimmy";//重新赋值
element.readOnly = true;//设置只读
element.disabled = true;//设置禁用
}
</script>
</body>
</html>
3.radio对象:
Radio 对象代表 HTML 表单中的单选按钮。
Radio 对象常用属性:
属性 | 描述 |
设置或返回单选按钮的状态。 | |
返回单选按钮的默认状态。 | |
设置或返回是否禁用单选按钮。 | |
返回单选按钮的表单类型。 | |
设置或返回单选按钮的 value 属性的值。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
input type="radio" name="sex" value="0" />男
<input type="radio" name="sex" value="1" />女
<input type="button" value="测试" onclick="t4()"/>
</form>
<script>
function t4(){
var elements = document.getElementsByName("sex");//获取对象数组
elements[0].checked=true;//设置“男”为已选
for(var i=0;i<elements.length;i++){//输出所有已选项的值
if(elements[i].checked){
console.log(elements[i].value);
}
}
elements[1].disabled=true;//设置“女”选项为禁用
}
</script>
</body>
</html>
4.checkbox对象常用属性方法与radio相同
5.Select 对象:
Select 对象代表 HTML 表单中的一个下拉列表。
Select 对象集合:
集合 | 描述 |
返回包含下拉列表中的所有选项的一个数组。 |
Select 对象常用属性:
属性 | 描述 |
设置或返回是否应禁用下拉列表。 | |
返回下拉列表中的选项数目。 | |
设置或返回是否选择多个项目。 | |
设置或返回下拉列表中被选项目的索引号。 | |
设置或返回下拉列表中的可见行数。 | |
返回下拉列表的表单类型。 |
Select 对象常用方法:
方法 | 描述 |
向下拉列表添加一个选项。 | |
从下拉列表移开焦点。 | |
在下拉列表上设置焦点。 | |
从下拉列表中删除一个选项。 | |
向下拉列表添加一个选项。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<select id="province">
<option value="">---请选择---</option>
<option value="北京市">北京市</option>
<option value="河南省">河南省</option>
<option value="安徽省">安徽省</option>
</select>
<input type="button" value="测试" onclick="t6()"/>
</form>
<script>
function t6(){
var element = document.getElementById("province");//获取select对象
var options = element.options;//将select对象元素存进数组中
options[2].selected=true;//设置河南省为已选
for(var i=0;i<options.length;i++){//输出所有已选项的值(河南省)
if(options[i].selected){
console.log(options[i].value);
}
}
element.disabled=true;//设置select下拉列表禁用,注意这里是element
}
</script>
</body>
</html>