form 表單
<form id="識別碼" name="元件名稱" method="post/get" action="">
</form>
id jquery DOM
name javascript, 伺服語言(php, jsp asp.net)
ex:
<form id="f1" name="f1" method="get">
姓名：
<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="確定" >
<P>
婚姻：
<input type="radio" id="rd1" name="rd" value="已婚" />已婚
<input type="radio" id="rd2" name="rd" value="未婚" />未婚
<p>
興趣：
<input type="checkbox" id="ck1" name="ck1" value="旅行" />旅行
<input type="checkbox" id="ck2" name="ck2" value="爬山" />爬山
<input type="checkbox" id="ck3" name="ck3" value="音樂" />音樂
<input type="checkbox" id="ck4" name="ck4" value="讀書" />讀書
<input type="checkbox" id="ck5" name="ck5" value="大自然" />大自然
<p>
學歷：
<select id="sel" name="sel" style="width:120px">
<option value="中學">中學 </option>
<option value="專科">專科 </option>
<option value="大學">大學 </option>
<option value="研究所">研究所 </option>
<option value="其他">其他</option>
</select>
<p>
備忘框：<br/>
<textarea id="text" name="text" cols="40" rows="8" ></textarea>
<p>
密碼攔：<br/>
<input type="password" id="p1" name="p1" size="" />
<p>
<input type="submit" id="s1" name="s1" value="確定" />
<input type="reset" id="r1" name="r1" value="清除"
</form>
============================
<!doctype html>
<head>
<meta charset="utf-8">
<title>appform2</title>
</head>
<style type="text/css">
#dv1 { display:none;}
#s1 { cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script language="javascript">
function fun1() {
if ($("#dv1").is(":visible"))
{$("#dv1").css('display','none'); $("#s1").html("開啟");}
else {$("#dv1").css('display','block');$("#s1").html("關閉");}
}
</script>
<body>
<h3><span id="s1" name="s1" style="border:2px solid darkred;" onclick="fun1();" >開啟</span></h3>
<form id="f1" name="f1" method="post">
<div id="dv1" name="dv1" style="width:700px;height:500px;background-color:yellow;border:2px solid darkred; " >
<table border="2" id="tbl1" name="tbl1" width="700">
<tr><td colspan="6">個人基本資料</td></tr>
<tr><td >編號</td>
<td width="25%"><input type="text" id="t1" name="t1" size="20" /></td>
<td>姓名</td>
<td width="25%"><input type="text" id="t2" name="t2" size="20"></td>
<td>生日</td>
<td width="25%"><input type="text" id="t3" name="t3" size="20"></td>
</tr>
<tr><td>血型</td>
<td>
<select id="sel1" name="sel1" style="width:20">
<option value="O" >O
<option value="A" >A
<option value="B" >B
<option value="AB" >AB
</select>
</td>
<td>學歷</td>
<td>
<select id="sel2" name="sel2" style="width:20">
<option value="中學" >中學
<option value="專科" >專科
<option value="大學" >大學
<option value="" >研究所
</select>
</td>
<td>性別</td>
<td>
<select id="sel3" name="sel3" style="width:20">
<option value="男" >男
<option value="女" >女
</select>
</td>
</tr>
<tr>
<td>婚姻</td>
<td><input type="radio" name="marrige" value="已婚" />已婚
<input type="radio" name="marrige" value="未婚" />未婚
</td>
<td>興趣</td>
<td colspan="3">
<input type="checkbox" name="habby" value="爬山" />爬山
<input type="checkbox" name="habby" value="讀書" />讀書
<input type="checkbox" name="habby" value="打球" />打球
<input type="checkbox" name="habby" value="大自然" />大自然
</td>
</tr>
<tr><td colspan="6">專長</td></tr>
<tr>
<td colspan="6">
<textarea id="te1" name="te1" cols="90" rows="7"></textarea>
</td>
</tr>
<tr>
<td colspan="6">
<table width="100%">
<tr>
<td>
<input type="submit" id="s1" name="s1" value="傳送" />
</td>
<td align="right">
<input type="reset" id="r1" name="r1" value="清除" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
======================================
沒有留言:
張貼留言