Form

งานที่เราทำบ่อยมากในการเขียน Web Application งานหนึ่งก็คือ การส่งข้อมูลโต้ตอบระหว่าง Server และ Browser โดยการรับ Input จากผู้ใช้เว็บ ซึ่งการรับ Input จากผู้ใช้ เราสามารถทำได้โดยการใช้ความสามารถของ Form ในบทนี้เราจะมาดูการสร้าง Form กัน

ในการทำงานของฟอร์มนั้นจะมีจุดหลักอยู่คือ ส่วนใหญ่แล้ว Server จะต้อง process ข้อมูลที่ได้รับมาจาก browser ไม่ว่าจะเป็นการนำเอาข้อมูลนี้ไปเป็นกฎเกณฑ์ในการค้นหาใน ฐานข้อมูลแล้ว ส่งข้อมูลเหล่านั้นกลับมาที่ browser หรือ เก็บข้อมูลไว้ หรือ ใช้สำหรับส่ง email ในเนื้อหาบทนี้ เราจะเน้นกันที่การ รับข้อมูลจาก browser เสร็จแล้วก็ส่งข้อมูลกลับไป แสดงที่ browser อีกครั้ง 

form.aspx

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<%@ Page Language="C#"%>
<HTML>
<HEAD>
<title>Form</title>
</HEAD>

<script runat="server">
	void btnOK_onclick(Sender as object, E as EventArgs){
		lblName.Text = txtName.Text;
	}
</script>

<body>
<form id="frmMyFirstForm" method="post" action="myForm.aspx" runat="server">
<asp:TextBox id="txtName" style="LEFT: 215px; POSITION: absolute; TOP:100px" runat="server" Width="279px" Height="27px"></asp:TextBox>
<asp:Label id="lblName" style="LEFT: 215px; POSITION: absolute; TOP: 140px" runat="server" Width="270px" Height="27px">test</asp:Label>
<asp:Button id="btnOK" style="LEFT: 215px; POSITION: absolute; TOP: 170px" runat="server" Width="270px" Height="27px" Text="OK" OnClick="btnOK_onclick"></asp:Button>
</form>
</body>
</HTML>

และขั้นตอนต่อไป ให้นำไฟล์นี้ไปเก็บไว้ที่ web server ซึ่งก็คือ drive:\inetpub\wwwroot เมื่อเสร็จแล้ว สามารถทดลองรันดูได้ ที่ browser โดยการเรียกไฟล์ http://servername/form.aspx อย่าลืมว่าการเรียกไฟล์ .asp หรือ .aspx จะต้องเรียกผ่าน HTTP เท่านั้น คุณไม่สามารถใช้ File/Open จาก browser ได้

รายละเอียด

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<form id="frmMyFirstForm" method="post" action="myForm.aspx" runat="server">
	...............
</form>

สิ่งแรกที่เราต้องทำก็คือการสร้าง form ขึ้นมา เราสร้าง form อย่างง่ายๆ แต่ก่อนที่ไปดูรายละเอียดใน form เรามาดูสิ่งต่างๆ ที่เราต้อง ใส่ค่าให้เจ้าตัว form กันก่อน 

สิ่งแรกเลย ก็คือ id สำหรับ id ใน form ไม่บังคับว่าต้องมี ถ้าเราไม่มีการเขียนโปรแกรมที่ต้องมีการระบุถึงฟอร์ม เราจะเว้นไว้ก็ได้ 

ถัดมาก็เป็น method ที่จะบอก HTTP ให้รู้ว่าเวลาที่ส่งข้อมูลไปจะใช้ วิธี GET หรือ POST

ค่าสุดท้ายที่เราเห็นก็คือ ค่าที่บอก ASP.NET ว่า ฟอร์มนี้จะถูก process ที่ ฝั่ง server

ในฟอร์มที่เราสร้างนี้มี textbox สำหรับให้ผู้ใช้กรอกข้อมูล ซึ่งเราก็ใช้ Web Form Controls ที่ รันบนฝั่งของ Server 

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<asp:TextBox id="txtName" style="LEFT: 215px; POSITION: absolute; TOP:100px" runat="server" Width="279px" Height="27px"></asp:TextBox>

แต่ครั้งนี้ control จะมี property เพิ่มขั้นมานั่นคือ style เจ้า style นี้เราจะใช้ในการกำหนดรูปแบบของ control ตามมาตรฐานของ Cascading Style Sheets ในตัวอย่างนี้เรากำหนดตำแหน่งให้ textbox ให้ไปอยู่ที่จุด 215 จากขอบซ้ายของ window ของ browser โดยระบบที่ใช้แสดงตำแหน่งเป็น absolute นั่นการอ้างอิงตำแหน่งของ textbox นี้จะอิงกับ ขอบ window ของ browser เท่านั้น จะไม่อิงกับ control ที่อยู่ข้างเคียง ซิ่งการอิงกับ control ข้างเคียงเป็นนั้นระบบที่ใช้แสดงตำแหน่งแบบ relative และนอกจากกำหนดตำแหน่งแล้ว ก็เป็นการกำหนด ความกว้างและความสูงของ textbox

ถัดลงมาก็เป็นการกำหนดค่าของ label ที่เราจะใช้ในการแสดงผล

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<asp:Label id="lblName" style="LEFT: 215px; POSITION: absolute; TOP: 140px" runat="server" Width="270px" Height="27px">test</asp:Label>

และ control ตัวสุดท้ายก็คือปุ่ม property ของปุ่มที่แตกต่างจาก control อี่นๆ ก็คือ OnClick ซึ่ง เราใช้ระบุว่าถ้ามี event onclick เกิดขึ้นที่ control นี้ ให้ไป รัน procedure ชื่อ btnOK_onclick ที่ <script> บล็อก

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<asp:Button id="btnOK" style="LEFT: 215px; POSITION: absolute; TOP: 170px" runat="server" Width="270px" Height="27px" Text="OK" OnClick="btnOK_onclick"></asp:Button>

นั่นก็คือรายละเอียดการสร้างฟอร์มอย่างง่ายๆ ที่เรามาดู script บ้างว่าเราต้องเตรียมอะไรไว้รับการเรียกให้ทำงาน

<%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%> <%@ Page Language="vb"%>
<script runat="server">
	void btnOK_onclick(Sender as object, E as EventArgs){
		lblname.Text = txtName.Text;
	}
</script>

จะเห็นว่า รายละเอียดของ script นั้นไม่ต่างจากโปรแกรม Hello World ซะเท่าไร มีการสร้าง procedure และ ใน procedure ก็มี code โปรแกรม ซึ่งใน code นี้เราให้ lblname รับค่าที่ผู้ใช้กรอกใส่ txtName แสดงค่า ออกทาง browser 

ในบทนี้นั้น ผู้เขียนต้องการให้ผู้อ่านเข้าใจในการสร้าง ทำงาน และ การ แสดงค่าที่ได้รับจากกลับไปแสดงที่ browser เท่านั้น