Javascript开发之八 表单对象

   表单访问：getElementsByTagName("form")  //得到所有form表单的集合。

                 getElementById("form1")等价于：getElementsByTagName("form“)[0];

   同时一个表单内的所有元素可以用一个集合来表示： getElementById("form1").elements  

//测试select
window.onload=function(){
var form=document.getElementById("frm1");
//alert(form.name);
var select=form.city;
form.onsubmit=function(){
alert(select.options[select.selectedIndex].value);
}

//select.remove(3);
//select.remove(2);
//select.remove(1);
//select.remove(0);

//var opt=new Option("guangzhou1","guangzhou",1);
//select.add(opt);
//select.appendChild(opt);
var opt=document.createElement("option");
opt.text="test1";
opt.value="test";
select.add(opt,select.length);

var s=document.getElementById("txt")
//alert(blurandfocus.value);
//alert(blurandfocus.type);
//lert(blurandfocus.style);
s.className="yellow";
s.onblur=function(){
if(s.value=="please enter comtents")
{
this.value="please enter comtents";
}
else if(this.value=="")
{
this.value="please enter comtents";
}
else
{
this.className="red";
}
}

s.onfocus=function(){
this.className="red";
if(s.value=="please enter comtents")
{
this.value="";
this.className="yellow";
}
}

s.onchange=function(){
this.className="red";
if(s.value=="please enter comtents")
{
this.value="";
this.className="yellow";
}
else
{
alert("test");
}
}
}

</script>
<style>

.red
{
color:red;
}
.yellow
{
color:blue;
}
</style>
</head>

<body>
<form id="frm1" action="" name="formName">
<br>
<input id="txt" type="text" value="please enter comtents"/>
<br>
<select name="city">
<option value="beijin">beijin1</option>
<option value="shanghai">shanghai1</option>
<option value="tianjin">tianjin1</option>
<option value="shenzhen">shenzhen1</option>
</select>
<input type="submit" value="submit"/>
</form>
</body>
</html>

 

 

posted on 2012-11-21 15:02  peter.peng  阅读(135)  评论(0)  编辑  收藏  举报