การส่งค่าและการเก็บค่า (ต่อ... ) ASP [# 5] การส่งค่าและการเก็บค่า (ต่อ... )
การใช้ Objects ของ Form เพื่อส่งค่าต่าง ๆ การใช้งาน Object อื่น ๆ ของ Form Form Button submit Button reset Text Filed Textarea Filed Check Box Radio Button List Menu Hidden Filed
1. Form กำหนดกรอบของ Form ที่จะมีการส่งข้อมูล การแทรก Element ของ Form อื่น ๆ ที่ต้องการส่งข้อมูลต้องกำหนดในช่วงกรอบนี้ รูปแบบ <form name="[form-name]" method="[post/get]" action="[file-name]"> </form> ตัวอย่าง <form name="form1" method="post" action="sample.asp"> <input type="text" name="name"> <input type="text" name="email"> </form>
2. Button submit กำหนดส่งค่าจากส่วนประกอบต่างๆ ใน Form (Element) ไปยัง Web Server เพื่อทำการประมวลผล เราจะใช้งานร่วมกับ Form รูปแบบ <input type="submit" value="[comment]"> ตัวอย่าง <form name="form1" method="post" action="sample.asp"> <input type="text" name="name"> <input type="text" name="email"> <input type="submit" value="submit"> </form> เพิ่มเติมครับการสร้างปุ่ม Submit แบบรูปภาพ <input type="image" name="submit" value="submit" src="image-name">
3. Button reset กำหนด Clear ส่วนข้อมูลที่ได้ทำการใส่เข้าไปใน Textbox โดยจะทำการ Clear ข้อความใดๆ รูปแบบ <input type="reset" value="[comment]"> ตัวอย่าง <form name="form1" method="post" action="sample.asp"> <input type="text" name="name"> <input type="text" name="email"> <br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> เพิ่มเติมครับการสร้างปุ่ม Reset แบบรูปภาพ <input type="image" name="reset" value="reset" src="image-name">
4. Text Filed กำหนดช่องรับข้อมูลจะทำงานร่วมกับ Form โดยจะต้องแทรกใว้ในกรอบของ Form การอ่านค่าจาก Element ของ Text Filed <% var-name = Request.Form("data-name") %> หากต้องการแสดงค่าออกมา <% =Request.Form("data-name") %> รูปแบบ <input type="text" name="data-name"> เช่น <form name="form1" method="post" action="sample.asp"> <input type="text" name="name"> <input type="text" name="email"> <br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form>
Sam5-1.asp ตัวอย่าง <html> <head> <form name="form1" method="post" action="sam5-2.asp"> ชื่อ <input type="text" name="name"> <br> นามสกุล <input type="text" name="surname"> <br> <br> <input type="submit" value="Submit"> <input type="reset"value="Reset"> </form> </body> </html>
5.Textarea Filed เป็นเหมือนกับ Text Filed แต่จะมีช่องกรอกข้อมูลที่ใหญ่ขึ้น การแทรกจะแทรกใว้ในกรอบของ Form เหมือนกับ Text Filed การอ่านค่าจาก Element ของ Textarea Filed <% var-name = Request.Form("data-name") %> หากต้องการแสดงค่าออกมาเลย <% =Request.Form("data-name")%> รูปแบบ <textarea name="data-name" cols="50" rows="3"></textarea> เมื่อ Cols=จำนวน ความกว้างของช่องกรอกข้อมูล Roes = จำนวนความสูงของช่องกรอกข้อมูล
ตัวอย่าง Sam5-4.asp <html> <body> ข้อความคือ : <% =request.form("comment") %> </body> </html> Sam5-3.asp <html> <body> <form name="form1" method="post" action="sam5-4.asp"> กรอกข้อมูล<br> <textarea name="comment" cols="50" rows="3"></textarea> <br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </body> </html>
6. Check Box ใช้กำหนดว่ามีการเลือกหรือไม่ รูปแบบ กำหนดได้ 2 วิธีคือ 1.ให้ค่าว่างเปล่าโดยยังไม่มีการเลือก <input type="checkbox" name="data-name" value="[value]"> 2.ให้ค่ามีการเลือกใว้แล้ว <input type="checkbox" name="data-name" value="[value]" checked>
7. Radio Button ใช้กำหนด ให้มีการเลือกอย่างใดอย่างหนึ่ง การอ่านค่าจาก Element ของ Radio button <% var-name = Request.Form("data-name") %> หากต้องการแสดงค่าออกมาเลย <% =Request.Form("data-name") %>
1.ให้ค่าว่างเปล่ายังไม่มีการเลือก 2.ให้เลือกใว้แล้ว รูปแบบ กำหนดได้ 2 แบบ 1.ให้ค่าว่างเปล่ายังไม่มีการเลือก <input type="radio" name="data-name" value="[value]"> 2.ให้เลือกใว้แล้ว <input type="radio" name="data-name" value="[value]" checked>
ตัวอย่าง Sam5-5.asp <html> <body> <form name="form1" method="post" action="sam5-6.asp"> <p>เลือกอายุ</p> <p> <input type="radio" name="old" value="1-5"> 1-5<br> <input type="radio" name="old" value="6-20"> 6-10<br> <input type="radio" name="old" value="11-15"> 11-15 <br> <input type="radio" name="old" value="16-20"> 16-20 <br> <input type="radio" name="old" value="21 ขึ้นไป"> 21 ขึ้นไป<br> <br> <input type="submit" name="Submit" value="Submit"> </p> </form> </body> </html>
<html> <body> <%=request <html> <body> <%=request.form("old") %> </body> </html> Sam5-6.asp
8.List Menu ใช้กำหนดให้มีการเลือกอย่างใดอย่างหนึ่ง เหมือนกับ Radio Button ที่จะดูเรียบง่าย และประหยัดเนื้อที่มากกว่า Radio Button การอ่านค่าจาก Element ของ List Menu <% var-name = Request.Form("data-name") %> หากต้องการแสดงค่าออกมาเลย <% =Request.Form("data-name") %>
รูปแบบ <select name="data-name” size=“1”> <option value="value1">ข้อความ1</option> <option value="value2">ข้อความ2</option> <option value="value3">ข้อความ3</option> . . . <option value="valueสุดท้าย">ข้อความสุดท้าย</option> </select>
<html> <body> <form name="form1" method="post" action="sample2.asp"> <select name="old"> <option value="1-5">1-5</option> <option value="6-10">6-10</option> <option value="11-15">11-15</option> <option value="16-20">16-20</option> <option value="21 ขึ้นไป">21 ขึ้นไป</option> </select> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html> Sam5-7.asp
9.Hidden Field เป็นการนำค่ากำหนดโดยการซ่อนค่าและตัวแปร การอ่านค่าจาก Element ของ Hidden Filed <% var-name = Request.Form("data-name") %> หากต้องการแสดงค่าออกมาเลย <% =Request.Form("data-name") %> รูปแบบ <input type="hidden" name="data-name" value="[value]">
ตัวอย่าง Sam5-8.asp <html> <body> <form name="form1" method="post" action="sample2.asp"> <input type="hidden" name="I_name" value="นายวีระชัย นุกิจรัมย์"> <br> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html>
<html> <body> <% =request <html> <body> <% =request.form("I_name") %> </body> </html> การนำค่า Hidden Filed จากค่าตัวแปร ก็สามารถทำได้แบบง่าย ๆ ครับ <% name="นายวีระชัย นุกิจรัมย์“ %> <input type="hidden" name="I_name" value="<%=name%>"> Sam5-9.asp
แบบฝึกหัดที่ 1 กรุณาป้อนชื่อ :: น้ำหนัก (ก.ก.) :: ความสูง (ซ.ม.) :: Hidden Field การวัดความสมบูรณ์ ผู้ชาย ผลต่างฯ = ความสูง-100 ผู้หญิง ผลต่างฯ = ความสูง -110 ถ้าน้ำหนักตัวมีค่าอยู่ในช่วงของผลต่าง บวก ลบ 5 แสดงว่า “ปกติ” ถ้าน้ำหนักตัวมีค่าน้อยกว่าในช่วงของผลต่าง บวก ลบ 5 แสดงว่า “ผอม” ถ้าน้ำหนักตัวมีค่ามากกว่าในช่วงของผลต่าง บวก ลบ 5 แสดงว่า “อ้วน” นิสิต ม.นเรศวร กรุณาป้อนชื่อ :: น้ำหนัก (ก.ก.) :: ความสูง (ซ.ม.) :: เพศ :: ชาย หญิง ช่วงอายุ :: OK Cancel ชื่อ :: สมชาย เป็น :: นิสิต ม.นเรศวร น้ำหนัก :: 70 ความสูง :: 171 อายุ :: 21-25 ผลการตรวจสอบ : ปกติ 11-20 21-25 26-30 31-35
แบบฝึกหัดที่ 2 Google Text Search :: Nu.ac.th ให้เขียนหน้าจอเพื่อสั่งค้นหาข้อมูลผ่านเว็บ Google.com โดยใช้ URL เช่น http://www.google.com/search?q=nokair หรือ http://www.google.com/custom?hl=th&domains=nu.ac.th&sitesearch=nu.ac.th&q=csit