Form 表单：一个页面只能有一个
<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属性值永远为本页。
-
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" onclick="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" onclick="getValue2()" /></li>
<li>
<span id="test">aaaaaaa</span>
</li>
</ul>
</div>
</form>
</body>
</html>
网站开发中常用js表单取值方法
一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的)
1.form1.TextBox1.value
2.var txt = document.all.TextBox1;
txt.value
3.var txt = document.all["TextBox1"];
txt.value
4.document.getElementById(”TextBox1″);
二.
1.html复选框(name相同)
表单： <input id=”Checkbox1″ type=”checkbox” name=”chk” value=”123″ />sss
<input id=”Checkbox2″ type=”checkbox” name=”chk” value=”456″/>aaa
<input id=”Checkbox3″ type=”checkbox” name=”chk” value=”789″/>bbb
实现功能：遍历html复选框，得到所选中项
var oChks = document.all.chk;
for(var i=0; i<oChks.length; i++)
{
if(oChks[i].checked)
alert(oChks[i].value);
}
2.html单选框(name相同)
表单： <input id=”Radio1″ type=”radio” name=”rad” value=”123″/>123
<input id=”Radio2″ type=”radio” name=”rad” value=”456″/>456
实现功能：遍历html复选框，得到所选中项
代码同html复选框
3.html下拉列表框
表单：<select id=”Select1″ multiple>
<option value=1>1</option>
<option value=2>2</option>
</select>
实现功能：
3.1得到所选中项的text和value值(选择一项)
var selDrp = document.all.Select1;
alert(selDrp.options[selDrp.selectedIndex].text);
alert(selDrp.options[selDrp.selectedIndex].value);
3.2得到所选中项的text和value值(选择多项)
for(var j=0;j<selDrp.options.length;j++)
{
if(selDrp.options[j].selected)
{
alert(selDrp.options[j].value);
}
}
4.DropDownList控件与ListBox控件
实现功能：得到所选中项的text和value值
代码同html下拉列表框
5.CheckBoxList控件
实现功能：得到所选中项的text
代码：
var chklist = document.all(”CheckBoxList1″);
var i = 0;
for(i=0;i<chklist.rows.length;i++)
{
var name = ”CheckBoxList1_” + i;
var tmpChecked = document.all[name].checked;
if(tmpChecked)
{
alert(document.all[name].parentElement.innerText);
}
}