实用HTML小知识点

实用HTML小知识点
1.用JavaScriptform表单的验证，有如下表单

<form action="" method="post" onsubmit="return check_all()">
		<table>
		<tr>
		 <td class="weight_b">用户名:</td>
		 <td><input onblur="check_name()" type="text" 

name="uname" id="uname" maxlength="16"/></td>
		 <td id="text1"><span>*</span> (英文、汉字、数字、

6-16个字符)</td>
		</tr>
		<tr>
		 <td class="weight_b">密码：</td>
		 <td><input onblur="check_pwd()" type="password" 

name="pwd" id="pwd" maxlength="16" /></td>
		  <td id="text2"><span>*</span> (6-16个字符)</td>
		</tr>
				
		<tr>
		<td></td>
		 <td id="btn"><input type="submit"/></td>
		 <td></td>
		</tr>
		</table>
	</form>

 a.文本框的内容验证，需要JS通过表单元素的name拿到该元素里面的内容，

再将该内容与正则表达式匹配，看是否符合，正确返回true，错误给出提示

（还是先拿到用于显示提示的表单元素对象，在用innerHTMl属性给该对象

填入内容，显示在页面上），例如我们验证用户名长度要大于6：

function check_name(){
	  var uname=document.getElementById('uname').value;
	  var txt1=document.getElementById('text1')
	  if(uname.length<6){
	  txt1.innerHTML="<span>◎用户ID长度不够 </span> (英文、汉

字、数字、6-16个字符)";
	    return false;
	  }else{
		txt1.innerHTML="<span>v</span>";
	  }
	 }

 b.表单的提交,表单在用户点击submit按钮后会通过form的method方法提交

到action对应的地址。记得一定要写onsubmit属性，否则表单未提供js验证

也会提交！，例如

function check_all(){
	  if(check_name()&&check_pwd()){
			return true;
		}else{
		return false;
		}
	 }

 2.用css操作元素的display属性可以做下拉菜单，图片切换之类的特效哦
例如，我们在div中有4张图片，4个按钮，代码如下：

<div>
<div id="one" style="display:''"><img src="img/a.jpg" alt=""  

height="300px"/></div>
		<div id="two" style="display:none"><img 

src="img/b.jpg" alt=""  height="300px"/></div>
		<div id="three" style="display:none"><img 

src="img/c.jpg" alt=""  height="300px"/></div>
		<div id="four" style="display:none"><img 

src="img/d.jpg" alt=""  height="300px"/></div>

<div id='btn'>
		<input type="button" id="1th" onclick="change(1)" 

value='1'"/>
		<input type="button" id="2th" onclick="change(2)" 

value='2'/>
		<input type="button" id="3th" onclick="change(3)" 

value='3'/>
		<input type="button" id="4th" onclick="change(4)" 

value='4'/>
		</div>
		
</div>

 如何通过点击按钮切换图片呢，由于div的特性，我们只要把按钮对应的图片设置为显示，其他不显示即可。代码如下：

 function change(ele){
	 var div1=document.getElementById('one');
	 var div2=document.getElementById('two');
	 var div3=document.getElementById('three');
	 var div4=document.getElementById('four')
		if(ele==1){
		div1.style.display='';
		div2.style.display='none';
		div3.style.display='none';
		div4.style.display='none';
		}else if(ele==2){
		div1.style.display='none';
		div2.style.display='';
		div3.style.display='none';
		div4.style.display='none';
		}else if(ele==3){
		div1.style.display='none';
		div2.style.display='none';
		div3.style.display='';
		div4.style.display='none';
		}else if(ele==4){
		div1.style.display='none';
		div2.style.display='none';
		div3.style.display='none';
		div4.style.display='';
		}

	 }