ASP.NET的Form表单

最新推荐文章于 2021-11-03 11:45:43 发布

最新推荐文章于 2021-11-03 11:45:43 发布 · 208 阅读

文章标签：

#ASP.net #.net #ASP #HTML #JavaScript #ViewUI

本文深入解析HTML表单与Form的区别，详细解释了action属性、method属性的作用，以及如何在HTML控件中实现数据跟踪。同时，介绍了如何在网页中创建和使用多个表单，包括HTMLForm表单的取值方法、表单元素如文本框、密码框、单选框、复选框、多行文本框等的使用技巧，以及文件上传、下拉框、按钮等元素的应用。

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>

//单选框
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>
<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>