Form 表單:一個頁面只能有一個
runat=“server”不是必須的,加上後,會在輸出的源代碼裏多了一行<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGR/8ZxOm5Tn0sfHNJaqE12hKqqJTQ==" />
嘿,這不就是傳說中的viewstate嗎。原來這就是.net中的FORM跟HTML中FORM的區別。
viewstate是通過HTML控件的name屬性來跟蹤HTML控件中的數據,這就是爲什麼在HTML控件中輸入數據時也能顯示以前曾經輸入過的數據。
假如FORM沒有加runat="server"屬性的話,HTML控件就不會有這樣的效果了。如果FORM加了runat屬性,則它的action屬性便會失效,或者說action屬性值永遠爲本頁。 【action屬性】的默認值應該是本頁 【method】默認的值是get
html Form 表單:一個頁面可以有多個 【action屬性】的默認值應該是submit按鈕觸發到action的指向頁面
表單的動作屬性(Action)和確認按鈕當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。 【method】Method的默認值爲Get
在客戶端,Get方式在通過URL提交數據;而Post提交後地欄不變。
在服務器端只能用Request.QueryString來獲取Get方式提交來的數據,用Post方式提交的數據只能用Request.Form來獲取。
特別說明
一般來說,儘量避免使用Get方式提交表單,因爲有可能會導致安全問題。比如說在登陸表單中用Get方式,用戶輸入的用戶名和密碼將在地址欄中暴露無遺。不過在分頁程序中,用Get方式就比用Post好。
Get把參數添加到action屬性指定的地址中,並以錨方式打開。
Post通過HTTP post處理髮送數據。
HTML Form的表單取值:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="htmlInput.aspx.cs" Inherits="htmlInput" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>html標籤演示</title>
<script type="text/javascript">
function getValue()
{
var obj = document.getElementsByName("textName");//使用文本框的name屬性
var obj2 = document.getElementById("password1").value;//使用密碼框的id屬性
var obj3 = document.getElementById("textarea1").value;//name名稱:不區分大小寫
alert(obj[0].value + "/r" + obj2 + "/r" + obj3);
//alert("換/r行") confirm("abcdef/u000d123456")
//單選框
var oSex = document.getElementsByName("sex");//獲取的是一個集合
var ssex = "";
for (var i=0;i<oSex.length;i++)
{
if (oSex[i].checked)
{
ssex = oSex[i].value;
break;
}
}
if (ssex == "")
alert("Please choose a Sex!!");
else
alert("Your Sex is: " + ssex);
//多選框
var oLike = document.getElementsByName("Like");//獲取的是一個集合
var slike = "";
for (var i=0;i<oLike.length;i++)
{
if (oLike[i].checked)
{
slike += oLike[i].value + ",";
}
}
if (slike == "")
alert("Please choose a Like!!");
else
alert("Your Like is: " + slike);- }
function getValue2()
{
var obj = document.getElementById("File1").value;//文件上傳路徑,FF 3上可能會有問題
var obj2 = document.getElementById("select1").value;//下拉框
alert(obj + "/r" + obj2);
}
</script> - </head>
<body>
<form id="form1" action="getValue.aspx" method="post">
<div>
<ul>
HTML控件:
<li>文本框:
<input id="Text1" name="textName" /></li><!--type="text"可以不寫,默認值-->
<li>密碼框:
<input id="Password1" type="password" name="pwd" /></li>
<li>隱藏框:
<input id="Hidden1" type="hidden" name="hidden" value="abcde" /></li>
<li>單選框:
<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</li>
<li>複選框:
<input id="Checkbox1" type="checkbox" name="like" value="1" />足球<input id="Checkbox2"
type="checkbox" name="like" value="2" />籃球<input id="Checkbox3" type="checkbox" name="like"
value="3" />排球<input id="Checkbox4" type="checkbox" name="like" value="4" />檯球</li>
<li>多行文本框:
<textarea id="TextArea1" cols="20" rows="2" name="txtArea"></textarea></li>
<li>普通按鈕:
<input id="Button1" type="button" value="button" name="btn" οnclick="getValue()" /></li>
<li>提交按鈕:
<input id="Submit1" type="submit" value="submit" name="btnSubmit" /></li>
<li>清空按鈕:
<input id="Reset1" type="reset" value="reset" name="btnCancel" /></li>
</ul>
</div>
<hr />
<div>
<ul>
<li>
文件上傳:<input id="File1" type="file" name="file" /></li>
<li>下拉框:
<select id="Select1" name="select">
<option value="1北京">北京</option>
<option value="2上海">上海</option>
<option value="3山東">山東</option>
</select>
</li>
<li>
<img src="image/logo-yy.gif" alt="aaa" title="baidu" /></li>
<li>
<input id="Button2" type="button" value="button" name="btn2" οnclick="getValue2()" /></li>
<li>
<span id="test">aaaaaaa</span>
</li>
</ul>
</div>
</form>
</body>
</html>