|
还记得我们第三章教大家上传数据的方法：
网址?参数名称=值
第三章所使用的这种用法只不过先配合程序范例来输入数据，实际不可能让使用者这样输入。要让使用者输入数据，还是要用如按钮、文字输入盒以及选单等比较友善的视觉接口，所以接下来我们就要介绍这些数据输入的控件。
HtmlForm 控件
HtmlForm（窗体）控件是设计动态网页一个相当重要的组件，它可以让我们将Client 端的数据传送至Server 端作处理。在窗体内的确认按钮被按下去后，只要被Form 控件所包起来的数据输入控件都会被一并送到Server 端，这个动作称为回贴（Post Back）。这时Server 端收到这些数据及OnServerClick 事件后会执行指定的事件程序，并且将执行结果重新下载到Client 端浏览器，如下图所示：
其使用语法为：
<Form
Id="被程序代码所控制的名称"
Runat="Server"
Method="Post | Get"
Action="要执行程序的地址"
>
其它控件
</Form>
HtmlForm 控件有两个主要的属性：
如果Method 属性为Post（默认值）则表示由Server 端来抓取资料，如为Get 则表示由浏览器主动上传资料至Server 端。其中的差别为Get 是立即传送，其执行效率较快，不过所传送的数据不能太大；而Post 则表示等待Server 来抓取数据，数据的传送虽然不是那么立即，不过可传送的数据量则没什么限制。而Action 属性则表示数据要送至哪个网址，预设是自己。假设Button触发OnServerClick 事件时所呼叫的程序是Button1_Click 事件程序，所以如果触发OnServerClick 事件时，预设会呼叫自己所在网页的Button1_Click 事件程序。有一点要特别注意，那就是窗体中的按钮被按下时，会呼叫原网页中的Button1_Click 事件，此时原网页会重新被加载，所以先触发Page_Load 事件后才会再触发Button1_Click 事件。
使用范例：
下列范例在Form 控件中配置了一个Button 对象，并指定按下按钮时所要呼叫的事件程序为Button_Click 事件：
<Html>
<Form Runat="Server"> <!--其Method 属性预设为Post, Action 预设是自己-->
<Button Id="Button1" Runat="Server" OnServerClick="Button1_Click"
InnerText="请按这里"/>
</Form>
<Script Language="VB" Runat="Server">
Sub Page_Load(Sender As Object ,e As EventArgs)
Response.Write("这是Page_Load 事件<br>")
End Sub
Sub Button1_Click(Sender As Object, e As EventArgs)
Button1.Style("BackGround-Color")="Blue"
Response.Write("这是Button1_Click 事件")
End Sub
</Script>
</Html>
上述程序执行的结果，先触发Page_Load 事件，如下所示：
使用者按下按钮后：
观察上面的执行结果，我们看到Page_Load 事件先发生后才触发Button1_Click 事件。倘若Action 所指到的地址是其它的网页或档案，则呼叫其它网页；此时原网页的Button1_Click 事件程序便不触发，直接会将所指定的网页加载。另外一个网页中只允许有一个窗体控件存在。
HtmlInput 控件
要让使用者输入数据，则使用HtmlInput 控件。而要让程序抓到这些数据，则必需利用HtmlForm控件将这个输入控件包围起来。HtmlInput 控件会因为Type 属性的设定而产生不同种类的控件：
上述的种类都是使用者输入数据的基本元素，另外要注意HtmlInput 控件不需要相对应的结束
结构，也就是只需要撰写<Input 属性="设定值"> 即可，不需要相对应的</Input> 或是以
<Input 属性="设定值"/> 的方式来写作。以下我们来对各个输入的种类说明。
HtmlInputButton 按钮控件
按钮最主要的功用为执行一个指令或动作。对于窗体来说是将填好的数据传送出去。它的Type属性有三种型态：当为Submit 时是传送数据，等于Button 时可以用来触发事件程序，而Reset是用来重置窗体成为初始状态；指定Type="Reset" 时，并不需要指定任何程序代码就可以重设窗体内的输入控件。在ASP.NET 里我们大多使用Type=Button，因为我们可以利用OnServerClick 事件程序中撰写我们所要执行的程序代码。其使用语法为：
<Input
Id="被程序代码所控制的名称"
Runat="Server"
Type="Button | Submit | Reset"
OnServerClick="事件程序名"
>
使用范例：
下列范例在Form 控件中配置了三种型态的HTMLInputButton 控件，并指定按下按钮时所要呼叫的事件程序。当按下Button 或Submit 时，会显示按了哪个按钮；而Reset 按钮可以将文字输入盒内的文字重设回原值：
<Html>
<Form Runat="Server">
<Input Type="Text" Id="Text1" Runat="Server" Value="这是文字输入盒">
<Input Type="Button" Id="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="这是
按钮">
<Input Type="Submit" Id="Submit1" Runat="Server"
OnServerClick="Submit1_Click" Value="这是
确定">
<Input Type="Reset" Runat="Server" Value="这是重置">
</Form>
<Span ID="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Sub Button1_Click(Sender As Object, e As EventArgs)
Sp1.InnerText="您按了Button"
End Sub
Sub Submit1_Click(Sender As Object, e As EventArgs)
Sp1.InnerText="您按了Submit"
End Sub
</Script>
</Html>
HtmlInputText 文字输入盒
文字输入盒就是让使用者输入数据的地方。它有两种型态：当为Text 时是输入的一般数据，所输入的字符串会显示在文字输入盒内；而Password 是密码输入的文字输入盒，输入的字符会以「*」来显示。其使用语法为：
<Input
Id="被程序代码所控制的名称"
Runat="Server"
Type="Text | Password"
MaxLength="可接受的字符串长度"
Size="文字输入盒的宽度"
Value="显示在文字输入盒的默认值"
>
使用范例：
下列程序代码利用文字输入盒取得使用者的身分验证信息，使用者可以按下Button 或是Submit来确定资料的输入，Reset 则可以重设文字输入盒的内容：
<Html>
<Form Runat="Server">
姓名: <Input Type="Text" Id="Text1" Runat="Server"><br>
密码: <Input Type="Password" Id="Text2" Runat="Server"><br>
<Input Type="Button" Id="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="执行
程序">
<Input Type="Submit" Id="Submit1" Runat="Server"
OnServerClick="Submit1_Click" Value="确定
">
<Input Type="Reset" Runat="Server" Value="重置">
</Form>
<Script Language="VB" Runat="Server">
Sub Button1_Click(Sender As Object, e As EventArgs)
IDPWDchk()
End Sub
Sub Submit1_Click(Sender As Object, e As EventArgs)
IDPWDchk()
End Sub
Sub IDPWDchk()
If Text1.Value="Charles" And Text2.Value="Pass" Then
Response.Write("使用者名称及密码正确, 你好!")
Else
Response.Write("使用者名称及密码错误, 请重新输入!")
Text1.Value=""
Text2.Value=""
End If
End Sub
</Script>
</Html>
使用者在文字输入盒中所输入的数据会被存在Value 属性里面，使用者输入完数据后，按下Button 或是Submit 则会触发相对应的OnServerClick 事件程序。我们在事件程序中呼叫了检查使用者名称及密码是否正确的子程序IDPWDchk()，如果使用者输入正确的使用者名称及密码，则会出现输入正确的讯息，如下图所示：
倘若输入错误的使用者名称或密码，则会显示输入错误，并将使用者所输入的使用者名称及密码清除，如下图所示：
HtmlInputRadio 收音机按钮控件
当我们要限制使用者的选择为单选，并只能够在我们所提供的项目中选择一个答案时，可以使用HtmlInputRadio。以输入使用者性别数据为例，我们提供使用者「男」及「女」的选项让使用者选择，利用收音机按钮可以限制他只能选择一个答案。其中HtmlInputRadio 控件最重要的属性为Name 属性，用来设定收音机按钮的群组。收音机按钮有一个规则，那就是同一个群组的收音机按钮同一时间内只能有一个按钮被选择，所以它可以用在单选的选项上。此时被选取的收音机按钮其Checked 属性则为True，没有被选取则为False。其使用语法为：
<Input
Id="被程序代码所控制的名称"
Runat="Server"
Type="Radio"
Checked="True | False"
Name="收音机按钮所属群组"
>
使用范例：
下列程序代码利用收音机按钮取得使用者的性别信息，使用者可以选择「男」或是选择「女」，按下按钮后可以显示使用者所选择的内容：
<Html>
<Form Runat="Server">
<Input Type="Radio" Id="Radio1" Name="G1" Runat="Server"
Checked="True">男<br>
<Input Type="Radio" Id="Radio2" Name="G1" Runat="Server">女<br>
<Input Type="Button" ID="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="确定">
</Form>
<Span ID="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Sub Button1_Click(Sender As Object, e As EventArgs)
Dim strMsg As String="您的性别为: "
IF Radio1.Checked=True Then
strMsg+="男"
Else
strMsg+="女"
End If
Sp1.InnerText=strMsg
End Sub
</Script>
</Html>
HtmlInputCheckBox 检核盒控件
当我们要让使用者可以复选多个项目，不过只能够在我们所提供的项目中选择答案时，可以使用HtmlInputCheckBox。以输入使用者专长数据为例，我们提供使用者多种专长的选项让使用者选择，利用检核盒控件可以提供多种选项让使用者选取。如果检核盒被使用者选取，其Checked属性则为True，没有被选取则为False。其使用语法为：
<Input
Id="被程序代码所控制的名称"
Runat="Server"
Type="CheckBox"
Checked="True | False"
>
使用范例：
下列程序代码利用利用检核盒控件取得使用者的专长信息，使用者可以从多个选项中复选，按下按钮后可以显示使用者所选择的内容：
<Html>
<Form Runat="Server">
请选择您的专长:<br>
<Input Type="CheckBox" Id="Check1" Runat="Server">ASP.Net<br>
<Input Type="CheckBox" Id="Check2" Runat="Server">C#<br>
<Input Type="CheckBox" Id="Check3" Runat="Server">MS SQL Server<br>
<Input Type="CheckBox" Id="Check4" Runat="Server">VB.Net<br>
<Input Type="Button" ID="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="确定">
</Form>
<Span ID="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Sub Button1_Click(Sender As Object, e As EventArgs)
Dim strMsg As String="您的专长为: "
If Check1.Checked Then strMsg+="ASP.Net "
If Check2.Checked Then strMsg+="C# "
If Check3.Checked Then strMsg+="MS SQL Server "
If Check4.Checked Then strMsg+="VB.Net"
Sp1.InnerText=strMsg
End Sub
</Script>
</Html>
HTMLInputHidden 隐藏输入控件
当我们要在使用者传送所输入的数据时，顺便传送不需要使用者输入的数据时，可以使用隐藏输入控件。其使用语法为：
<Input
Id="被程序代码所控制的名称"
Runat="Server"
Type="Hidden"
Value="所要传送的数据"
>
使用范例：
下列程序可以记载使用者开始填写表格的时间：
<Html>
<Form Runat="Server" ID=Form1></head>
请输入您的住址:
<Input Type="Text" Id="Text1" Runat="Server">
<Input Type="Hidden" Id=Hidden1 Runat="Server">
<Input Type="button" ID="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="确定">
</FORM>
<Span ID="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server" ID=Script1>
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False then
Hidden1.Value=CStr(DateTime.Now())
End If
End Sub
Sub Button1_Click(Sender As Object, e As EventArgs)
Sp1.InnerHtml="现在系统时间:" & CStr(DateTime.Now()) & _
"<br>开始输入时间:" & CStr(Hidden1.Value)
End Sub
</SCRIPT>
</Html>
若使用者是第一次浏览这个网页，那么网页第一次被加载的时间会存入Hidden1 这个隐藏字段的Value 属性中。要得知网页是否为第一次加载，可以使用Page 对象的IsPostBack 属性。如网页是第一次加载，那么IsPostBack 属性为False；若使用者是因为触发OnServerClick 事件而让网页重新加载执行，那么IsPostBack 属性则为True。这样一来我们就可以利用IsPostBack属性来保留最初网页被加载时的时间。
HtmlTextArea 文字输入区控件
HtmlTextArea 控件的功能和前述的Text 对象类似，只是HtmlTextArea 控件可以多设定长度和高度，可以用来输入一小段文字；网站上讨论区的内容都是利用HtmlTextArea 输入的，使用者输入的内容会存在Value 属性中。HtmlTextArea 的写法和Input 对象不同，必须要加上</TextArea> 结束结构或以<TextArea .../> 的风格来撰写，以下是TextArea 的使用语法：
<TextArea
Id="被程序代码所控制的名称"
Runat="Server"
Cols="单行的长度"
Rows="文字输入区的列数"
>
文字区内容
</TextArea>
使用范例：
下列范例利用HtmlTextArea 控件输入使用者的建议，然后使用Span 控件显示出来。以下为范例码：
<Html>
<Form Runat="Server" ID=Form1></head>
请输入你的建议:<br>
<TextArea Id="TextArea1" Runat="Server" Cols="20" Rows="4">文字输入区
</TextArea>
<Input Type="button" ID="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="确定
">
</FORM>
<Span ID="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server" ID=Script1>
Sub Button1_Click(Sender As Object, e As EventArgs)
Sp1.InnerHtml="您输入的内容是:<br>" & _
Replace(TextArea1.Value,Chr(13),"<br>")
End Sub
</SCRIPT>
</Html>
由于Chr(13) 换行字符在HTML 中没有作用，所以我们利用Replace 函式将换行字符转换成<br> 标注，其语法如下：
Replace("字符串", "原数据中的字符串或字符", "取代的字符串或字符")
HtmlSelect 选项控件
HtmlSelect 控件就是选单。选单控件有两种风格，一种是下拉式选单，另一种是清单：
要决定选项的风格是选单还是清单，由Size 属性决定。倘若有指定Size 属性，则出现固定大小之清单；若没有指定Size 属性，则为下拉式选单。另外选项可以动态的加入项目，只要利用Items集合的Add 方法即可；如果要取得使用者选择哪个项目，可以使用Value 属性传回。以下为语法：
<Select
Id="被程序代码所控制的名称"
Runat="Server"
Items="选项集合"
Size="选单长度"
>
<Option>选项</Option>
<Option>选项...</Option>
</Select>
使用范例：
以下范例配置了两个选项控件，分别为Select1 以及Select2。Select1 利用指定Option 标注的方式将项目配置好，注意Select1 的结束结构</Select>；而Select2 则是利用Items 集合的Add方法在Page_Load 事件中动态的加入项目。为了不让项目重复被加入，所以我们检查Page 对象的IsPostBack 属性是否为False，是第一次加载才加入项目；这样才不会加入重复的选项。以下为范例码：
<Html>
<Form Runat="Server" ID=Form1></head>
血型:<Select ID="Select1" Runat="Server">
<Option>A</Option>
<Option>B</Option>
<Option>O</Option>
<Option>AB</Option>
</Select>
性别:<Select ID="Select2" Runat="Server" Size="2"/>
<Input Type="button" ID="Button1" Runat="Server"
OnServerClick="Button1_Click" Value="确定
">
</Form>
<Span Id="Sp1" Runat="Server"/>
<Script Language="VB" Runat="Server" ID=Script1>
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False then
Select2.Items.Add("男")
Select2.Items.Add("女")
End If
End Sub
Sub Button1_Click(Sender As Object, e As EventArgs)
Sp1.InnerText= "您的血型是: " & Select1.Value & _
", 性别是: " & Select2.Value
End Sub
</SCRIPT>
</Html> 
|
