Transcript Slide 1

ทส215
การเขียนโปรแกรมบนเว็บ 1
HTML FORM
ั
อาจารย์อรรถวิท ชงคมานนท์
สาขาวิชาเทคโนโลยีสารสนเทศ
คณะวิทยาศาสตร์
www.itsci.mju.ac.th
1
[email protected]
Form
้
 ฟอร์มใชในการรั
บข ้อมูลจากผู ้ใช ้ ก่อนทีจ
่ ะสง่ ข ้อมูลนีไ
้ ปประมวลผลบนเว็บเซริ ฟ
์ เวอร์
ประกอบด ้วย Tag เบือ
้ งต ้น 3 ประเภทดังนี้
 <INPUT>
 <TEXTAREA>
 <SELECT>
2
[email protected]
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>
3
[email protected]
<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”
ปุ่ มเคลียร์ข ้อมูลในฟอร์ม
4
[email protected]
<INPUT>
คุณสมบ ัติ
ความหมาย
ื่
Id= ชอ
ื่ ทีก
ชอ
่ าหนดให ้แต่ละอินพุต
ื่
Name=ชอ
ื่ ทีก
ชอ
่ าหนดให ้แต่ละอินพุต
Value=xx
ค่าทีก
่ าหนดให ้อินพุตนั น
้ ๆ
Size=xx
กาหนดขนาดของ Textbox
MaxLength=xx
่ งใน textbox ได ้
จานวนตัวอักษรสูงสุดทีส
่ ามารถใสล
Checked
ใชก้ าหนดว่าจะเลือก radio หรือ checkbox ตัวนั น
้ ไว ้
ล่วงหน ้าหรือไม่
Etc.
5
[email protected]
Submitting Form for Processing
 เมือ
่ ต ้องการโปรเซสข ้อมูลใน form จาเป็ นจะต ้อง submit form ไปยังเซริ ฟ
์ เวอร์
และจากนั น
้ จะเป็ นการรับและโปรเซสข ้อมูลทีเ่ ซริ ฟ
์ เวอร์
 ในการ submit form เมธอด submit() ภายใน form จะต ้องถูกเรียกใชดั้ งนี้
 ใช ้ Submit button
้
 ถูกเรียกใชจากเมธอด
submit() ภายใน form
6
[email protected]
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”>
7
[email protected]
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>
8
[email protected]
Radio buttons
้
 ใชในกรณี
ทม
ี่ ท
ี างเลือกหลายทางแต่สามารถเลือกได ้เพียงทางเดียว
้
์ ต
 การใชงานสามารถท
าได ้โดยการคลิกเมาสท
ี่ าแหน่งของ radio ทีต
่ ้องการ
<input type=“radio” name=“card” value=“visa”>
ื่ เดียวกันทัง้ group
 Name จะต ้องใชช้ อ
9
[email protected]
Radio Button
<FORM NAME=“frmName”>
<b>Radio Button</b> <BR>
Do you wish to hear from us again.
<BR>
<BR>
<b>Yes</b><input type=“radio" name=“items” value=“0” >
<BR>
<b>No</b><input type=“radio” name=“items” value=“1” >
<BR>
</FORM>
10
[email protected]
Checkbox
้
 ใชในกรณี
ทต
ี่ ้องการเลือกรายการทีก
่ าหนดมากกว่าหนึง่ รายการ
ื่ เดียวกันทัง้ group
 Name จะต ้องใชช้ อ
<input type=“checkbox” value=“html” name=“pre”>
11
[email protected]
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>
12
[email protected]
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>
13
[email protected]
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>
14
[email protected]
่ และแสดงผลข้อมูล
การร ับสง
Request & Response
15
[email protected]
Client-Server Technology
HTTP Response
Web Server
Client
HTTP Request
16
[email protected]
การกาหนดคุณสมบ ัติให้ก ับ Tag Form
ื่ ทีใ่ ชในการอ
้
 Name เป็ นชอ
้างอิงถึงฟอร์มนี้
 Action = URL เป็ นตาแหน่งทีเ่ ก็บไฟล์
 Method = “Post” หรือ “Get” หมายถึงรูปแบบการสง่ ข ้อมูลจากฟอร์มไปยังเว็บเซริ ฟ
์ เวอร์
้
 Post จะใชในกรณี
ทข
ี่ ้อมูลทีเ่ ราต ้องการสง่ นั น
้ มีขนาดใหญ่กว่า 256 ไบต์ และต ้องการ
ความปลอดภัยในการสง่ เพราะจะมองไม่เห็นข ้อมูลทีส
่ ง่ ไป
 Get มักใชกั้ บข ้อมูลขนาดเล็กไม่เกิน 256 ไบต์และไม่ต ้องการปกปิ ดข ้อมูลทีจ
่ ะสง่
<form id="form1" action="product.aspx" method="get" >
……………………….
</form>
17
[email protected]
QueryString
 เป็ นการแนบข ้อมูลในฟอร์มต่อท ้าย URL ของไฟล์ ASP ทีเ่ ราต ้องการสง่ ข ้อมูลนีไ
้ ป
ั ลักษณ์พเิ ศษบางอย่างเข ้าร่วมด ้วย
ประมวลผล โดยการสง่ ข ้อมูลนีจ
้ ะใชส้ ญ
?
ใชคั้ น
่ ระหว่างสว่ นของ URL กับสว่ นของข ้อมูล
&
ใชคั้ น
่ ระหว่างตัวแปรหรือ input แต่ละตัว
=
ใชคั้ น
่ ระหว่าง Input และค่าของมัน
้
่ งว่าง
+
ใชแทนช
อ
้
่ วั อักษรหรือตัวเลข
%
ใชแทนอั
กขระพิเศษทีไ่ ม่ใชต
http://localhost/Myweb/example2.aspx?fName=attawit&radio1=0&items=JAVA
18
[email protected]
Request
้
่
 เป็ น Object ทีใ่ ชในการจั
ดการเกีย
่ วกับไคลเอนต์ ทีส
่ ง่ ข ้อมูลเข ้ามายังเซริ ฟ
์ เวอร์ เชน
การเรียกใชข้ ้อมูลทีส
่ ง่ มา การตรวจสอบทีอ
่ ยูข
่ องไคลเอนต์
้
 QueryString ใชในการอ่
านข ้อมูลด ้วยเมธอด Get
้
 Form ใชในการอ่
านข ้อมูลด ้วยเมธอด Post
 ServerVariables ใชอ่้ านค่าตัวแปรบางอย่างของ เซริ ฟ
์ เวอร์
่ Request_Method เมธอดทีส
• เชน
่ ง่ ข ้อมูลเข ้ามา
Query_String ข ้อมูลทีส
่ ง่ ด ้วยเมธอด get
ื่ เว็บเซริ ฟ
Server_Name ชอ
์ เวอร์
้ อ
ื่ มต่ออินเทอร์เน็ ต
Server_Port พอร์ตทีใ่ ชเช
Remote_Addr หมายเลข IP ของเครือ
่ งทีส
่ ง่ ข ้อมูลมา
19
[email protected]
QueryString ด้วยเมธอด Get
 จะทางานผ่าน Object Request
ื่ ของ Input”]
Request.QueryString[“ชอ
่ Request.QueryString[“text1”]
 เชน
20
[email protected]
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>
21
[email protected]
index.aspx
22
[email protected]
page2.aspx
<HTML>
<BODY>
<%
Response.Write("name:" + Request.QueryString["fName"]);
Response.Write("<br>");
Response.Write("lname:" + Request.QueryString["lName"]);
Response.Write("<br>");
Response.Write("addr:" + Request.QueryString["addr"]);
Response.Write("<br>");
if (Request.QueryString["radio1"].Equals("0"))
Response.Write("I like computer");
else
Response.Write("I dislike computer");
Response.Write("<br>");
Response.Write("prog:" + Request.QueryString["items"]);
Response.Write("<br>");
Response.Write("city:" + Request.QueryString["select1"]);
%>
</BODY>
</HTML>
[email protected]
23
page2.aspx
http://localhost:1033/WebSite1/page2.aspx?fName=attawit&lName=chang
&addr=IT+MJU.&radio1=0&items=HTML&items=JAVA&select1=THA
24
[email protected]
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>
[email protected]
25
การเรียกข้อมูลออกจาก Form ด้วยเมธอด Post
่ เดียวกับเมธอด Get
 จะทางานผ่าน Object Request เชน
ื่ ของ Input”]
Request.Form[“ชอ
่ Request.Form[“text1”]
 เชน
26
[email protected]
example4.aspx
<HTML>
<BODY>
<%
Response.Write("name:" + Request.Form["fName"]);
Response.Write("<br>");
Response.Write("lname:" + Request.Form["lName"]);
Response.Write("<br>");
Response.Write("addr:" + Request.Form["addr"]);
Response.Write("<br>");
if (Request.Form["radio1"].Equals("0"))
Response.Write("I like computer");
else
Response.Write("I dislike computer");
Response.Write("<br>");
Response.Write("prog:" + Request.Form["items"]);
Response.Write("<br>");
Response.Write("city:" + Request.Form["select1"]);
%>
</BODY>
[email protected]
</HTML>
27
การแยกข้อมูลจาก Input Checkbox
string[] strItems = Request.Form["items"].Split(',');
for (int counter = 0; counter < strItems.Length; counter++) {
Response.Write(strItems[counter]);
}
28
[email protected]
การแทรกบล็อก <% %>
 เป็ นการแทรกโค ้ด บางสว่ นลงในหน ้าจอ HTML ซงึ่ แบ่งได ้
2 ประเภทคือ
<% … %> เป็ นการแทรกคาสงั่ โดยทั่วไป
<% = … %> เป็ นการแทรกเพือ
่ แสดงค่าตัวแปรนั น
้ ๆ
29
[email protected]
การแทรกบล็อก <% %>
่
 เชน
<%@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>
30
[email protected]
31
[email protected]