还记得我们第三章教大家上传数据的方法:
网址?参数名称=值 第三章所使用的这种用法只不过先配合程序范例来输入数据,实际不可能让使用者这样输入。要让使用者输入数据,还是要用如按钮、文字输入盒以及选单等比较友善的视觉接口,所以接下来我们就要介绍这些数据输入的控件。
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>
|