ทส215 การเขียนโปรแกรมบนเว็บ 1 ทส215  การเขียนโปรแกรมบนเว็บ 1 HTML FORM อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th

Form ฟอร์มใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะส่งข้อมูลนี้ไปประมวลผลบนเว็บเซิร์ฟเวอร์ ประกอบด้วย Tag เบื้องต้น 3 ประเภทดังนี้ <INPUT> <TEXTAREA> <SELECT>

Form Elements Example <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"> </FORM>

<INPUT> ใช้ในการรับข้อมูล ข้อความ ตัวเลือก ปุ่มสำหรับยืนยันและยกเลิกรายการ ประกอบด้วยรายละเอียดดังนี้ คุณสมบัติ ความหมาย Type = “text” เป็น Textbox สำหรับรับข้อความ Type = “password” เป็นช่องสำหรับใส่ password Type = “radio” เป็นตัวเลือก (เลือกได้ 1 รายการ) Type = “checkbox” เป็นตัวเลือก (มากกว่า 1 รายการ) Type = “button” ปุ่มสำหรับการเขียน script ในการทำงานอื่นๆ Type = “file” สำหรับเลือก File ที่อยู่ในเครื่อง Type = “image” สำหรับกรณีที่ใช้รูปภาพแทนปุ่มปกติ Type = “hidden” สำหรับใช้ในการซ้อนค่าตัวแปรในการเขียนโปรแกรม Type = “submit” ปุ่มส่งข้อมูลไปยัง server Type = “reset” ปุ่มเคลียร์ข้อมูลในฟอร์ม

<INPUT> คุณสมบัติ ความหมาย Id= ชื่อ ชื่อที่กำหนดให้แต่ละอินพุต Name=ชื่อ Value=xx ค่าที่กำหนดให้อินพุตนั้น ๆ Size=xx กำหนดขนาดของ Textbox MaxLength=xx จำนวนตัวอักษรสูงสุดที่สามารถใส่ลงใน textbox ได้ Checked ใช้กำหนดว่าจะเลือก radio หรือ checkbox ตัวนั้นไว้ล่วงหน้าหรือไม่ Etc.

Submitting Form for Processing เมื่อต้องการโปรเซสข้อมูลใน form จำเป็นจะต้อง submit form ไปยังเซิร์ฟเวอร์ และจากนั้นจะเป็นการรับและโปรเซสข้อมูลที่เซิร์ฟเวอร์ ในการ submit form เมธอด submit() ภายใน form จะต้องถูกเรียกใช้ดังนี้ ใช้ Submit button ถูกเรียกใช้จากเมธอด submit() ภายใน form

Submit + Reset รูปแบบของ submit จะมีดังนี้ <input type=“submit” value=“Let’s go”> เมื่อ submit ถูก pressed คอมโพเนนท์ทางด้าน server mกำหนดไว้ใน action attribute ของ <form> จะถูกเรียกใช้ ส่วน reset จะใช้สำหรับการเคลียร์ค่าภายใน form โดยมีรูปแบบดังนี้ <input type=“reset” value=“Clear Form”>

Using Submit Button <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Clear"> </FORM>

Radio buttons ใช้ในกรณีที่มีทางเลือกหลายทางแต่สามารถเลือกได้เพียงทางเดียว การใช้งานสามารถทำได้โดยการคลิกเมาส์ที่ตำแหน่งของ radio ที่ต้องการ <input type=“radio” name=“card” value=“visa”> Name จะต้องใช้ชื่อเดียวกันทั้ง group

Radio Button <FORM NAME=“frmName”> <b>Radio Button</b> <BR> Do you wish to hear from us again. <BR> <b>Yes</b><input type=“radio" name=“items” value=“0” > <b>No</b><input type=“radio” name=“items” value=“1” > </FORM>

Checkbox ใช้ในกรณีที่ต้องการเลือกรายการที่กำหนดมากกว่าหนึ่งรายการ Name จะต้องใช้ชื่อเดียวกันทั้ง group <input type=“checkbox” value=“html” name=“pre”>

Check Box <FORM NAME=“frmName” METHOD=“GET”> <b>CHECKBOXES</b> <BR> List your preferences<BR> Tick all that apply)<BR><BR> HTML <input type=“checkBox” name=“items” value=“0”> <BR> JAVA <input type=“checkBox” name=“items” value=“1”> <BR> MySql <input type=“checkBox” name=“items” value=“2”><BR> JDBC <input type=“checkBox” name=“items” value=“3”> </FORM>

Select Used for drop down lists <select name=“s1”> <option value=“1”>Dublin South</option> <option value=“2”>Dublin North</option> <option value=“3”>Co. Dublin</option> <option value=“4”>Culchie</option> </select>

Text Area <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address : <TEXTAREA COLS=“80” ROWS=“5” NAME=“Addr”> </TEXTAREA><br> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Clear"> </FORM>

การรับส่งและแสดงผลข้อมูล Request & Response

Client-Server Technology HTTP Response Web Server Client HTTP Request

การกำหนดคุณสมบัติให้กับ Tag Form Name เป็นชื่อที่ใช้ในการอ้างอิงถึงฟอร์มนี้ Action = URL เป็นตำแหน่งที่เก็บไฟล์ Method = “Post” หรือ “Get” หมายถึงรูปแบบการส่งข้อมูลจากฟอร์มไปยังเว็บเซิร์ฟเวอร์ Post จะใช้ในกรณีที่ข้อมูลที่เราต้องการส่งนั้นมีขนาดใหญ่กว่า 256 ไบต์ และต้องการความปลอดภัยในการส่งเพราะจะมองไม่เห็นข้อมูลที่ส่งไป Get มักใช้กับข้อมูลขนาดเล็กไม่เกิน 256 ไบต์และไม่ต้องการปกปิดข้อมูลที่จะส่ง <form id="form1" action="product.aspx" method="get" > ………………………. </form>

QueryString เป็นการแนบข้อมูลในฟอร์มต่อท้าย URL ของไฟล์ ASP ที่เราต้องการส่งข้อมูลนี้ไปประมวลผล โดยการส่งข้อมูลนี้จะใช้สัญลักษณ์พิเศษบางอย่างเข้าร่วมด้วย ? ใช้คั่นระหว่างส่วนของ URL กับส่วนของข้อมูล & ใช้คั่นระหว่างตัวแปรหรือ input แต่ละตัว = ใช้คั่นระหว่าง Input และค่าของมัน + ใช้แทนช่องว่าง % ใช้แทนอักขระพิเศษที่ไม่ใช่ตัวอักษรหรือตัวเลข http://localhost/Myweb/example2.aspx?fName=attawit&radio1=0&items=JAVA

Request เป็น Object ที่ใช้ในการจัดการเกี่ยวกับไคลเอนต์ ที่ส่งข้อมูลเข้ามายังเซิร์ฟเวอร์ เช่น การเรียกใช้ข้อมูลที่ส่งมา การตรวจสอบที่อยู่ของไคลเอนต์ QueryString ใช้ในการอ่านข้อมูลด้วยเมธอด Get Form ใช้ในการอ่านข้อมูลด้วยเมธอด Post ServerVariables ใช้อ่านค่าตัวแปรบางอย่างของ เซิร์ฟเวอร์ เช่น Request_Method เมธอดที่ส่งข้อมูลเข้ามา Query_String ข้อมูลที่ส่งด้วยเมธอด get Server_Name ชื่อเว็บเซิร์ฟเวอร์ Server_Port พอร์ตที่ใช้เชื่อมต่ออินเทอร์เน็ต Remote_Addr หมายเลข IP ของเครื่องที่ส่งข้อมูลมา

QueryString ด้วยเมธอด Get จะทำงานผ่าน Object Request Request.QueryString[“ชื่อของ Input”] เช่น Request.QueryString[“text1”]

index.aspx <HTML><BODY> <FORM NAME="frmName" Method="Get" Action=“page2.aspx"> First Name:<INPUT TYPE="TEXT" NAME="fName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address:<textarea name="addr" cols="50" rows="5"></textarea> <br> Do you like computer ?.<BR> <input type="radio" name="radio1" value="0"><b>Yes</b><BR> <input type="radio" name="radio1" value="1" ><b>No</b><BR> You can program : <BR> <input type="checkBox" name="items" value="HTML">HTML<BR> <input type="checkBox" name="items" value="JAVA">JAVA<BR> <input type="checkBox" name="items" value="ASP">ASP<BR> <input type="checkBox" name="items" value="VB">VB<BR> City : <select name="select1"> <option value="USA">America</option> <option value="ENG">England</option> <option value="THA">Thailand</option> </select><BR><BR> <INPUT TYPE=SUBMIT VALUE=" OK "> <INPUT TYPE=RESET VALUE=" Clear "> </FORM></BODY></HTML>

index.aspx

page2.aspx <HTML> <BODY> <% Response.Write("name:" + Request.QueryString["fName"]); Response.Write("<br>"); Response.Write("lname:" + Request.QueryString["lName"]); Response.Write("addr:" + Request.QueryString["addr"]); if (Request.QueryString["radio1"].Equals("0")) Response.Write("I like computer"); else Response.Write("I dislike computer"); Response.Write("prog:" + Request.QueryString["items"]); Response.Write("city:" + Request.QueryString["select1"]); %> </BODY> </HTML>

page2.aspx http://localhost:1033/WebSite1/page2.aspx?fName=attawit&lName=chang &addr=IT+MJU.&radio1=0&items=HTML&items=JAVA&select1=THA

example3.aspx <HTML><BODY> <FORM NAME="frmName" Method=“Post" Action="example4.aspx"> First Name:<INPUT TYPE="TEXT" NAME="fName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address:<TEXTAREA COLS="30" ROWS="5" NAME="Addr"> </TEXTAREA><br> Do you like computer ?.<BR> <input type="radio" name="radio1" value="0"><b>Yes</b><BR> <input type="radio" name="radio1" value="1" ><b>No</b><BR> You can program : <BR> <input type="checkBox" name="items" value="HTML">HTML<BR> <input type="checkBox" name="items" value="JAVA">JAVA<BR> <input type="checkBox" name="items" value="ASP">ASP<BR> <input type="checkBox" name="items" value="VB">VB<BR> City : <select name="select1"> <option value="USA">America</option> <option value="ENG">England</option> <option value="THA">Thailand</option> </select><BR><BR> <INPUT TYPE=SUBMIT VALUE=" OK "> <INPUT TYPE=RESET VALUE=" Clear "> </FORM></BODY></HTML>

การเรียกข้อมูลออกจาก Form ด้วยเมธอด Post จะทำงานผ่าน Object Request เช่นเดียวกับเมธอด Get Request.Form[“ชื่อของ Input”] เช่น Request.Form[“text1”]

example4.aspx <HTML> <BODY> <% Response.Write("name:" + Request.Form["fName"]); Response.Write("<br>"); Response.Write("lname:" + Request.Form["lName"]); Response.Write("addr:" + Request.Form["addr"]); if (Request.Form["radio1"].Equals("0")) Response.Write("I like computer"); else Response.Write("I dislike computer"); Response.Write("prog:" + Request.Form["items"]); Response.Write("city:" + Request.Form["select1"]); %> </BODY> </HTML>

การแยกข้อมูลจาก Input Checkbox string[] strItems = Request.Form["items"].Split(','); for (int counter = 0; counter < strItems.Length; counter++) {        Response.Write(strItems[counter]); }

การแทรกบล็อก <% %> การแทรกบล็อก <% %> เป็นการแทรกโค้ด บางส่วนลงในหน้าจอ HTML ซึ่งแบ่งได้ 2 ประเภทคือ <% … %> เป็นการแทรกคำสั่งโดยทั่วไป <% = … %> เป็นการแทรกเพื่อแสดงค่าตัวแปรนั้น ๆ

การแทรกบล็อก <% %> การแทรกบล็อก <% %> เช่น <%@Page language=“C#"%> <html> <body> <% int i,sum; sum = 0; for (i = 1 ; i < 11 ; i++) { Response.Write(i + " : " + "<br>") ; sum += i; } %> Total = <%= sum%> </body> </html>

Q&A