数据的输入_动网_社区论坛·开发者网络源动力

还记得我们第三章教大家上传数据的方法：

网址?参数名称=值
第三章所使用的这种用法只不过先配合程序范例来输入数据，实际不可能让使用者这样输入。要让使用者输入数据，还是要用如按钮、文字输入盒以及选单等比较友善的视觉接口，所以接下来我们就要介绍这些数据输入的控件。

htmlform 控件
htmlform（窗体）控件是设计动态网页一个相当重要的组件，它可以让我们将client 端的数据传送至server 端作处理。在窗体内的确认按钮被按下去后，只要被form 控件所包起来的数据输入控件都会被一并送到server 端，这个动作称为回贴（post back）。这时server 端收到这些数据及onserverclick 事件后会执行指定的事件程序，并且将执行结果重新下载到client 端浏览器，如下图所示：

其使用语法为：

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"> 
<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 事件程序中撰写我们所要执行的程序代码。其使用语法为：

使用范例：
下列范例在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 是密码输入的文字输入盒，输入的字符会以「*」来显示。其使用语法为：

使用范例：
下列程序代码利用文字输入盒取得使用者的身分验证信息，使用者可以按下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。其使用语法为：

使用范例：
下列程序代码利用收音机按钮取得使用者的性别信息，使用者可以选择「男」或是选择「女」，按下按钮后可以显示使用者所选择的内容：

<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。其使用语法为：

使用范例：
下列程序代码利用利用检核盒控件取得使用者的专长信息，使用者可以从多个选项中复选，按下按钮后可以显示使用者所选择的内容：

<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 隐藏输入控件
当我们要在使用者传送所输入的数据时，顺便传送不需要使用者输入的数据时，可以使用隐藏输入控件。其使用语法为：

使用范例：
下列程序可以记载使用者开始填写表格的时间：

<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 属性传回。以下为语法：

使用范例：
以下范例配置了两个选项控件，分别为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>