PHP与javaScript与web表单交互

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<form name="form1" method = "post" action="">
	<span class="style2">你喜爱的图书：</span>
	<input type="checkbox" name="radio" value="入门类" onClick="check(this.value);">入门类
	<input type="checkbox" name="radio" value="案例类" onClick="check(this.value);">案例类
	<input type="checkbox" name="radio" value="讲解类" onClick="check(this.value);">讲解类
	<input type="checkbox" name="radio" value="实力类" onClick="check(this.value);">实力类	
</form>
<script language="javascript">
 function check(books){
	 switch(books){
		case "入门类":
			 alert("你喜爱的图书1："+books);
			 break;
		case "案例类":
			 alert("你喜爱的图书1："+books);
			 break;
		case "讲解类":
			 alert("你喜爱的图书1："+books);
			 break;
		case "实力类":
			 alert("你喜爱的图书1："+books);
			 break;
	 }
 }
</script>

<body>
</body>
</html>

应用js脚本检测文本域是否为空

<form name="myform" method="post" action="">
	<table width="2500" height="1000" align="center"  cellpadding="0" cellspacing="0" bgcolor="#CCFF66" background="images/2.jpg">
		<tr><td height="71" colspan="2" align="center"> </td></tr>
		<tr>
			<td width="281" align="left">
			 用户名：<input name="user" type="text" id="user" size="20"><br><br>
			 密  码:<input name="pwd" type="password" id="pwd" size="20">
 			</td>
		</tr>
		<tr>
		  <td height="43" align="center">
		  	<input type="submit" name="submit" onClick="return mycheck();" value="登陆"> 
		  	<input type="reset" name="submit2" value="重置">
		  </td>
		</tr>
	</table>
</form>
<script language="javascript">
 function mycheck(){
	 if(myform.user.value==""){
		 alert("用户名不可以为空");
		 myform.user.focus();
		 return false;
	 }
	 if(myform.pwd.value==""){
		 alert("密码不可以为空");
		 myform.pwd.focus();
		 return false;
	 }
 }
</script>                                                                                                                                                                                                                                                                                                                                                                                                <

应用js脚本制作二级导航

<table width="761" height="20" border="0" cellpadding="0" cellspacing="0">
	<Tr>
		<td width="67" align="center"><a href="">首  页</a></td>
		<td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新品上架</a></td>
		<td width="75" align="center"><a href="#" onMouseMove="Lmenu('购物')">购物车</a></td>
		<td width="75" align="center"><a href="#" onMouseMove="Lmenu('会员')">会员中心</a></td>
		<td width="61" align="center"><a href="">在线帮助</a></td>
	</Tr>
</table>
<div id="submenu" class="word_yellow"> </div>
<script language="javascript">
function Lmenu(value){
	switch(value){
		case "新品":
			submenu.innerHTML="<a href='#'>商品展示</a>|<a href = '#'>销售排行榜</a>|<a href ='#'>商品查询</a>";
			break;
		case "购物":
			submenu.innerHTML="<a href='#'>添加商品</a>|<a href = '#'>移出指定商品</a>|<a href ='#'>清空购物车</a>|<a href='#'>查询购物车</a>|<a href = '#'>填写订单信息</a>";
			break;
		case "会员":
			submenu.innerHTML="<a href='#'>注册会员</a>|<a href = '#'>修改会员</a>|<a href ='#'>账户查询</a>";
			break;
	}
}
</script>

1.align：align 属性规定 div 元素中的内容的水平对齐方式。

2.<a href="#">是链接到本页

<a> 标签的 href 属性用于指定超链接目标的 URL。

3.onmousemove 事件属性当鼠标指针移动到图像上时执行一段 JavaScript：

4.submenu.innerHTML将后面的内容赋给submenu（innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；）

5.<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。可以对同一个 <div> 标签同时应用 class 或 id 属性，但通常情况下我们偏向于只使用其中一种。

应用js脚本控制文本域和复选框

<form method="post" name="form1" id="form1" aciton="">
	<table width="547" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF"  bgcoloer="#FBA720"> 
		<tr>
			<td height="35" colspan="5" bgcolor="#FFFFFF"><span class="style1">订单管理</span>
			</td>
			<td width="77" align="right" bgcolor="#FFFFFF">说明:</td>
			<td width="389"> <textarea name="readme" cois="50" rows="10" id="readme"></textarea></td
			<td width="63" height="33" bgcolor="#FFFFFF" class="style2">
				<a href="#" onClick="javascript:document.getElementByld('readme').value="";return false;">
					<img src="images/1.jpg" width="60" height="25" border="0"/> </a>
			</td>
		</tr>
		<tr>
			 <td rowspan="6" align="right" bgcolor="#FFFFFF">操作</td>
			 <td height="30" colspan="2" align="left" bgcolor="#FFFFFF"><input name="C++"
			 type="checkbox" id="C++" value="C++"/>C++编程词典
			 </td>
			  <td height="30" colspan="2" align="left" bgcolor="#FFFFFF"><input name="PHP4"
			 type="checkbox" id="PHP4" value="PHP"/>PHP编程词典
			 </td>
		</tr>
		<tr>
		<td colspan="5" align="center" bgcolor="#FFFFFF">
			<img src="images/2.jpg" onClick="checkAll(form1,status)" width="60" height="25"/><!--全选按钮图片-->
			<img src="images/3.jpg" onClick="switchAll(form1,status)" width="60" height="25"/><!--反选按钮图片-->
			<img src="images/4.jpg" width="60" height="25" onClick="uncheckAll(form1,status)"/><!--不选按钮图片-->
		</td>
		</tr>
	</table>
</form>

<script language="javascript">
function checkAll(form1,status){
	var elements = form1.getElementsByTagName("input");
	for(var i=0; i<elements.length;i++){
		if(elements[i].type=='checkbox'){
			if(elements[i].checked==false){
				elements[i].checked=true;
			}
		}
	}
}
function switchAll(form1,status){
	var elements = form1.getElementsByTagName("input");
	for(var i=0; i<elements.length;i++){
		if(elements[i].type=='checkbox'){
			if(elements[i].checked==false){
				elements[i].checked=true;
			}
			else if(elements[i].checked==true){
				elements[i].checked=false;
			}	
		}
	}
}
function uncheckAll(form1,status){
	var elements = form1.getElementsByTagName("input");
	for(var i=0; i<elements.length;i++){
		if(elements[i].type=='checkbox'){
			 if(elements[i].checked==true){
				elements[i].checked=false;
			}	
		}	
     }
}
</script>

colspan表格单元横跨两列的表格：

bgcolor 属性为文档规定背景颜色

border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。

cellpadding 属性规定单元边沿与其内容之间的空白。

cellspacing 属性规定单元格之间的空间。

PHP与javaScript与web表单交互

猜你喜欢