Form对象
Form对象方法
reset()：把表单的所有输入元素重置为它们的默认值。
submit()：提交表单。
Text对象
Text对象属性
disabled：设置或返回文本域是否应被禁用。
readOnly：设置或返回文本域是否应是只读的。
value：设置或返回文本域的value属性的值。
Text对象方法
focus():在文本域上设置焦点。
示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<form>
<inputname="wd"/>
<inputtype="submit"value="百度一下"onclick="sub()">
</form>
<script>
varform=document.getElementsByTagName("form")[0];
vartext=document.getElementsByName("wd")[0];
text.focus();
functionsub(){
vartext=document.getElementsByName("wd")[0];
//text.value="魔道";
//text.readOnly="true";
//console.log(text.readOnly);
//text.disabled="true";
console.log(text.disabled);
text.focus();
}
//type为text、password、textarea的标签均有value、focus、disabled、readOnly
</script>
</body>
</html>
Radio对象
Radio对象属性
checked：设置或返回单选按钮的状态。
disabled：设置或返回是否禁用单选按钮。
value：设置或返回单选按钮的value属性的值。
Checkbox对象
Checkbox对象属性
checked：设置或返回checkbox是否应被选中。
disabled：设置或返回checkbox是否应被禁用。
value：设置或返回checkbox的value属性的值
Select对象
Select对象集合
options[]：返回包含下拉列表中的所有选项的一个数组。
Select对象属性
disabled：设置或返回是否应禁用下拉列表。
length：返回下拉列表中的选项数目。
selectedIndex：设置或返回下拉列表中被选项目的索引号。
Select对象方法
add()：向下拉列表添加一个选项。
remove()：从下拉列表中删除一个选项。
Option对象
Option对象构造方法
Option(text,value)：通过text和value值创建Option对象
Option对象属性
selected：设置或返回selected属性的值。
text：设置或返回某个选项的纯文本值。
value：设置或返回被送往服务器的值。
Select对象及Option对象示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<selectid="grade">
<optionvalue="1">一年级</option>
<optionvalue="2">二年级</option>
<optionvalue="3">三年级</option>
<optionvalue="4">四年级</option>
</select>
<inputtype="button"onclick="text()"value="按钮"/>
<scripttype="text/javascript">
functiontext(){
varselect=document.getElementById("grade");
console.log(select.disabled);
console.log(select.length);
console.log(select.selectedIndex);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")
varoptions=select.options;
console.log(options[select.selectedIndex].value);
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
for(vari=0;i<options.length;i++){
console.log(options[i].value);
console.log(options[i].selected);
console.log(options[i].text);
}
varoption=newOption("五年级","5");
select.add(option);
select.remove(0);
}
</script>
</body>
</html>
注册表
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<spanstyle="color:red;"id="wrong-massage"></span><br/>
<formonsubmit="returncheck()">
<table>
<tr>
<td>用户名：</td>
<td><inputid="name"placeholder="请输入用户名"onblur="check_name()"></td>
</tr>
<tr>
<td>密码：</td>
<td><inputid="pw"type="password"placeholder="请输入密码"onblur="check_pw()"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><inputid="pw-check"type="password"placeholder="请输入确认密码"/></td>
</tr>
</table>
<inputtype="radio"name="sex"value="0"/>男
<inputtype="radio"name="sex"value="1"/>女
<br/>
<inputtype="checkbox"name="hobby"value="0"/>羽毛球
<inputtype="checkbox"name="hobby"value="1"/>篮球
<inputtype="checkbox"name="hobby"value="2"/>乒乓球
<inputtype="checkbox"name="hobby"value="3"/>足球
<br/>
<selectid="grade">
<optionvalue="1">大一</option>
<optionvalue="2">大二</option>
<optionvalue="3">大三</option>
<optionvalue="4">大四</option>
</select>
<br/>
<td><inputtype="reset"value="重置"/></td>
<td><inputtype="submit"value="注册"/></td>
</form>
<script>
//使用$()函数可节省代码量
function$(id){
returndocument.getElementById(id);
}
functioncheck(){
varn=document.getElementById("name");
varw=document.getElementById("pw");
varmsg=document.getElementById("wrong-massage");
varc=document.getElementById("pw-check");
if(n.value.length>12){
msg.innerHTML="用户名不能超过15个字符，请重新输入！";
n.focus();
returnfalse;
}
if(n.value.length==0){
msg.innerHTML="用户名不能为空，请重新输入！";
n.focus();
returnfalse;
}
if(w.value.length>12){
msg.innerHTML="密码不能超过12个字符，请重新输入！";
w.focus();
returnfalse;
}
if(w.value.length==0){
msg.innerHTML="密码不能为空，请重新输入！";
w.focus();
returnfalse;
}
if(w.value!=c.value){
msg.innerHTML="密码错误，请重新输入！";
c.focus();
returnfalse;
}
varsex=document.getElementsByName("sex");
varhobby=document.getElementsByName("hobby");
for(vari=0;i<sex.length;i++){
sex[i].disabled=true;
console.log(sex[i].checked+""+sex[i].value);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
for(vari=0;i<hobby.length;i++){
hobby[i].checked=true;
console.log(hobby[i].checked+""+hobby[i].value);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
varselect=document.getElementById("grade");
varoptions=select.options;
console.log(select.length);
console.log(select.selectedIndex);
console.log(options[select.selectedIndex].value);
for(vari=0;i<options.length;i++){
varoption=options[i];
console.log(option.value)
select.disabled=true;
}
returnfalse;
}
functioncheck_name(){
varn=document.getElementById("name");
varmsg=document.getElementById("wrong-massage");
if(n.value.length>12){
msg.innerHTML="用户名不能超过15个字符，请重新输入！";
n.value="";
n.focus();
}
elseif(n.value.length==0){
msg.innerHTML="用户名不能为空，请重新输入！";
n.focus();
}
else{
msg.innerHTML="";
}
}
functioncheck_pw(){
varw=document.getElementById("pw");
varmsg=document.getElementById("wrong-massage");
if(w.value.length>12){
msg.innerHTML="密码不能超过12个字符，请重新输入！";
w.value="";
w.focus();
}
elseif(w.value.length==0){
msg.innerHTML="密码不匹配，请重新输入！";
w.focus();
}
else
{
msg.innerHTML="";
}
}
</script>
</body>
</html>
Image对象
Image对象属性
src：设置或返回图像的URL。
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54940.shtml
