2013-10-06 21:26:15Morris
[Javascript] 縮放表單
試寫一個點選會將表單收起，另一個則是將表單放出。
其核心在於 JQuery 的 hide(), show() 這兩個函數操作。
至於送出的 ActionEvent 還沒做。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("table").hide(1000);
});
$("#show").click(function(){
$("table").show(1000);
});
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<form method="get" action="hw1resultShow.php">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#000000">
<tr>
<td bgcolor="#FAFAFA" width="80">E-mail</td>
<td colspan="3"><input type="text" name="email"></td>
</tr>
<tr rowspan="3">
<td bgcolor="#FAFAFA" width="80">Comment</td>
<td colspan="3"><textarea name="comment"></textarea></td>
</tr>
<tr>
<td bgcolor="#FAFAFA" width="80">password</td>
<td width="720"><input type="password" name="pwsd"></td>
<td>delete post used.</td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="送出表單" />
<input type="reset" value="重置表單" />
</td>
</tr>
</table>
</form>
<!--
<p>附加圖檔<input type="file" />(.jpg, .jpeg)</p>
<fieldset>
核取方塊為覆選<br />
<input type="checkbox" value="A" />核取方塊A
<input type="checkbox" value="B" checked="checked" />核取方塊B
<input type="checkbox" value="C" />核取方塊C
<br />
選項按鈕為單選，相同name的選項會被視為一個group。<br />
<input type="radio" value="A1" name="A" id="A" />選項按鈕A-1
<input type="radio" value="A2" name="A" id="A" checked="checked" />選項按鈕A-2
<input type="radio" value="B1" name="B" id="B" checked="checked" />選項按鈕B-1
<input type="radio" value="B2" name="B" id="B" />選項按鈕B-2
</fieldset>
<fieldset>
按鈕的效果與button標籤相同。<br />
<input type="image" src="http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwRvVCHPAI/AAAAAAAABV4/nz6nIc3Tt1E/omew_logo.gif" />
<input type="submit" value="送出表單" />
<input type="reset" value="重置表單" />
<input type="button" value="一般按鈕" />
</fieldset>
-->
</body>
</html>