การสร้างแบบฟอร์ม

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

1. เข้ารูปแบบการทำงานของฟอร์มและ CGI

CGI คืออะไร

CGI ย่อมาจาก Common Gateway Interfaces คือ โปรโตคอลที่ใช้ในการติดต่อระหว่าง browser กับ server เจ้า CGI นี้เป็นตัวกลางคอยประสานงานระหว่าง server และ โปรแกรม  gateway หรือที่เรียกกันว่า CGI script ภายใน server CGI จะเป็นตัวกำหนดว่าข้อมูลจะส่งไปยัง โปรแกรม gateway ยังไง และ ข้อมูลจะถูกส่งกลับมาโดยโปรแกรม gateway อย่างไร ภายใน server และกลับไปยัง browser ปกติการเรียกบริการผ่าน WWW นั้นข้อมูลจะถูกเก็บในรูปแบบของเอกสาร HTML เมื่อเซิร์ฟเวอร์ได้รับการร้องข้อจาก   ไคล์เอนต์ เว็บเซิร์ฟเวอร์ก็จะทำการค้นหาและส่งไฟล์ที่ไคล์เอนต์ต้องการกลับไปให้ ซึ่งข้อมูลที่เก็บอยู่ในรูปของแบบของ HTML จะเป็นรูปแบบที่ ตายตัว (static) การแก้ไขข้อมูลจะเป็นงานที่ยุ่งยากและเสียเวลาเป็นอย่างมาก ถ้ามีข้อมูลมาก การจัดเก็บแบ่งออกเป็นไฟล์ ๆ ยิ่งจะทำให้การแก้ไขยากขึ้นมากเท่านั้น

CGI program จำเป็นจะต้องถูกติดตั้งไว้ใน directory เพื่อให้ Web server รู้ว่าควรจะต้อง execute โปรแกรมแทนการแสดงข้อมูลไปยัง browser เท่านั้น ซึ่ง directory ที่กล่าวถึงนี้ขึ้นอยู่ภายใต้การควบคุมของ web master เพื่อเป็นการป้องกันบุคคลทั่วไปสามารถสร้าง CGI program ได้

ส่วนประกอบของ CGI

การสร้างนั้นจะประกอบด้วยสองส่วนคือ

1. การสร้างแบบฟอร์มการรับข้อมูลจากผู้ใช้โดยการใช้ tag ของ HTML สำหรับการสร้างแบบฟอร์มและปุ่มควบคุมการตอบรับ (submit) เมื่อป้อนข้อมูลเสร็จ
2. การเขียน CGI Script เก็บไว้ที่เครื่องเซิร์ฟเวอร์

ชื่อของ CGI Script จะถูกเก็บไว้ในเอกสาร HTML ที่มีการสร้างแบบฟอร์มไว้ตามข้อ 1 ดังนั้นเมื่อผู้ใช้กดปุ่มตอบรับ CGI Script จะเริ่มทำงานโดยจะทำหน้าที่รวบรวมข้อมูลจากแบบฟอร์มส่งให้กับเซอร์ฟเวอร์ เพื่อทำการประมวณผล รวมไปถึงการแสดงและสร้างผลลัพธ์ที่อยู่ในรูปแบบของ Dynamic HTML กลับไปยังเว็ปเบราเซอร์ของผู้ใช้ด้วย

รูปแบบการร้องขอไฟล์ HTML    

          1. รูปแบบการ้องข้อไฟล์เอกสาร HTML จากเซิร์ฟเวอร์

การใช้ CGI เป็นการทำให้เอกสาร HTML ที่ผู้ใช้ร้องขอเข้ามามีความ ยืดหยุ่นเรียกว่าเป็นแบบ dynamic วิธีการทำให้เอกสาร HTML มีความยืดหยุ่น คือ แทนที่จะเป็นข้อมูลแยกเป็นไฟล์ HTML หลาย ๆ ไฟล์ เราก็อาจจะเก็บข้อมูลทั้งหมดไว้ใน ไฟล์เดียว เมื่อผู้ใช้ต้องการข้อมูล ผู้ใช้ก็เพียงแต่กำหนดเงื่อนไขให้แก่ CGI หลังจากนั้น CGI จะไปทำการนำข้อมูล ที่ได้ส่งกลับไปให้ไคล์เอนต์ที่อยู่ในรูปเอกสารแบบ HTML ข้อมูลที่จะมีความแตกต่างกันออกไป แล้วแต่เงื่อนไขที่เรากำหนด ในกรณีนี้ CGI จะทำหน้าที่เป็น ประตู หรือ Gateway ระหว่างเซิร์ฟเวอร์กับ ฐานข้อมูลที่เรามีอยู่

2. รูปแบบการร้องข้อเอกสาร HTML ที่ผ่าน CGI

การทำงานของ CGI อาศัยหลักการพื้นฐานของ ไคลเอ็นต์-เซิร์ฟเวอร์ โดยเว็บเซิร์ฟเวอร์จะเป็นผู้ติดต่อขอใช้บริการและรอรับผลลัพธ์ของ CGI กลับมา แล้วส่งต่อให้กับยูสเซอร์ที่ใช้งาน  เจ้า CGI นี้ถูกสร้างขึ้นมาเนื่องจากโปรโตคอลพื้นฐานของเว็บคือ HTTP ไม่เปิดโอกาสให้เว็บไคลเอนต์และเว็บเซิร์ฟเวอร์โต้ตอบกันในลักษณะ 2 ทิศทางได้  จึงถือได้ว่า CGI เป็นการเพิ่มเติมความสามารถของโปรโตคอล HTTP

การนำเอา CGI มาใช้งาน จะช่วยเพิ่มความแปลกใหม่ต่าง ๆ ลงบนหน้าเว็บเพจได้ เช่นการทำตัวนับ ที่จะเพิ่มตัวเลข เมื่อมีผู้เข้าชมเว็บเพจนั้น ตัวเลขบอกจำนวน จะเปลี่ยนไปเรื่อย ๆ หรือยกตัวอย่าง การทำเป็น กระดานสนทนาหรือเว็บบอร์ด ก็จะช่วยให้ผู้เข้าชมเว็บไซต์ รู้สึกว่าข้อมูลต่าง ๆ มีการอัพเดท เปลี่ยนแปลงได้อยู่เสมอ ๆ ทั้งนี้ ขึ้นอยู่กับโปรแกรมหรือสคริปต์ ต่าง ๆ ที่จะทำการติดตั้งใส่เข้าไป

2. การสร้างแบบฟอร์ม <form>

เราสามารถใช้แท็ก form เพื่อสร้างแบบฟอร์มในเว็บเพจ ซึ่งมีรูปแบบดังนี้

รูปแบบของแท็ก            
<form method=”วิธีส่งข้อมูล” action=”ตำแหน่งโปรแกรม”>..</form>

ค่าที่กำหนดให้ใช้ 

method คือ วิธีการส่งข้อมูลของ CGI มี 2 รูปแบบ

1. post คือ การส่งข้อมูลภายในฟอร์มทีละบรรทัด
2. get คือ การส่งข้อมูลภายในฟอร์มต่อกันเป็นประโยคเดียว

action คือ ตำแหน่งของโปรแกรม CGI เรีกยขึ้นมาทำงาน

3. การรับข้อมูล <input>

รูปแบบของแท็ก

<input type=”ชนิดอุปกรณ์” name=”ชื่อของอุปกรณ์” />

ค่าที่กำหนดให้ใช้  

ชนิดของอุปกรณ์ เช่น button, checkbox, file, hidden, image,   password, radio, reset, submit, text

ชื่อของอุปกรณ์ คือ ชื่อที่ใช้เรียกอุปกรณ์นั้น

ช่องรับข้อความแถวเดียว (text)

 

          ในการสร้างช่องรับข้อความแถวเดียว เราจะกำหนด text=”text” ดังนี้

ตัวอย่างการสร้างช่องรับข้อความแถวเดียว

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form>

<input type=”text” name=”text1″ />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

การปรับขนาดช่องรับข้อความแถวเดียว

          ข้อมูลที่เราใช้กรอกไปนั้นอาจยาวไม่เท่ากัน เราสามารถปรับขนาดของช่องให้เหมาะสมกับเนื้อหา ได้ดังนี้

รูปแบบของแท็ก     
< input type=”text” size=”20″ name=”text1″ />

ค่าที่กำหนดให้ใช้

ขนาดจำนวน เช่น 20 คือ 20 ตัวอักษร

ตัวอย่างการปรับขนาดช่องรับข้อความแถวเดียว

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form>

<input type=”text” size=”20″ name=”text1″/>

</form>

</body>

</html>

ผลลัพธ์ที่ได้

การกำหนดจำนวนตัวอักษรให้พิมพ์ลงไปได้

          เราสามารถกำหนดขนาดตัวอักษรที่พิมพ์เข้ามา เช่น กำหนดให้พิมพ์เพียง 5 ตัวอักษรเท่านั้น

รูปแบบของแท็ก          
< input type=”text” maxlength =”5″ name=”text1″ />

ค่าที่กำหนดให้ใช้         

จำนวนตัวอักษร คือ ใส่ได้ 5 ตัวอักษร

ตัวอย่างการกำหนดขนาดตัวอักษรที่พิมพ์

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form>

<input type=”text” maxlength=”5″ name=”text1″/>

</form>

</body>

</html>

ผลลัพธ์ที่ได้

ช่องรับข้อความแถวเดียวแบบรหัสผ่าน (Password)

          ทำหน้าที่เช่นเดียวกับช่องรับข้อความ แต่ตัวอักษรที่พิมพ์ไปจะแสดงด้วยเครื่องหมาย * หรือ . แทน

ตัวอย่างการรับข้อความแบบรหัสผ่าน

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form>

<input type=”password” maxlength=”5″ name=”pass1″/>

</form>

</body>

</html>

ผลลัพธ์ที่ได้

การสร้างปุ่ม

          ในฟอร์มปกติจะต้องมีปุ่มให้กด ซึ่งปุ่มในฟอร์ม html จะมี 3 ลักษณะ คือ

• ปุ่ม submit เมื่อกดปุ่มนี้ ข้อมูลในฟอร์มทั้งหมดจะถูกส่งไปให้ CGI Script หรือ CGI Program ที่เรากำหนดไว้ในแอตทริบิวต์ action ของแท็ก form
• ปุ่ม reset เมื่อกดปุ่มนี้อุปกรณ์ในฟอร์มทั้งหมดจะกลับคืนค่าเริ่มต้น ก่อนที่จะพิมพ์ข้อมูลใด  ลงฟอร์ม
• ปุ่ม button เป็นปุ่มที่สร้างขึ้นมาเพื่อทำงานใด ๆ โดยไปเรียก JavaScript หรือ VBScript ขึ้นมาทำงาน

รูปแบบของแท็ก    
< input type=”อุปกรณ์” value=”ค่าใด ๆ” />

ค่าที่กำหนดให้ใช้         

กำหนดค่าให้กับอุปกรณ์ใด ๆ

ถ้าเรากำหนดแอตทริบิวต์ในช่องข้อความ เมื่อเราเปิดเว็บเพจเราจะเห็นคำที่ระบุในแอตทริบิวต์ value ปรากฏขึ้นมาในช่องรับข้อความทันที และเราสามารถแก้ไขค่าเริ่มต้นนี้ได้ แต่ถ้าเราคลิกปุ่ม reset ช่องรับข้อความจะกลับไปแสดงค่าที่ระบุไว้ในแอตทริบิวต์ value อีกครั้ง

แต่ถ้าเรากำหนดแอตทริบิวต์ value ให้กับปุ่มใด ๆ (<input type=”submit, reset, button”>) ค่าในแอตทริบิวต์ value จะใช้เป็นชื่อของปุ่มนั้น เช่น OK, ปุ่ม Clear

ตัวอย่างการสร้างปุ่ม

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post”#”>

Login : <input type=”text” name=”login” /><br />

Password : <input type=”password” maxlength=”5″ name=”password” /><br />

<input type=”submit” value=”OK” />

<input type=”reset” value=”Clear” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

ช่องรับข้อมูลประเภทไฟล์

ตัวอย่างการสร้างช่องรับข้อมูลประเภทไฟล์

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#” enctype=”multipart/form-data”>

<input type=”file” name=”upload” /><br />

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

ตัวเลือกแบบให้เลือกหลายข้อ (checkbok)

          เซ็กบ็อกซ์ จะเป็นอุปกรณ์ที่มีลักษณะ 2 สถานะ คือ ใช่หรือไม่ เลือกหรือไม่เลือก เราสามารถใช้งานเซ็กบ็อกซ์ในกรณีที่ต้องการให้ผู้กรอกฟอร์มเลือกได้หลาย ๆ ตัวเลือกพร้อมกัน เช่น ประเภทกิจกรรมที่ชอบ

ตัวอย่างการสร้างตัวเลือกแบบให้เลือกหลายข้อ (checkbok)

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<h3>คุณชอบหนังสือประเภทไหน</h3>

<form method=”post” action=”#”>

<input type=”checkbox” value=”catoon” />หนังสือการ์ตูน<br />

<input type=”checkbox” value=”navaniyay” />หนังสือนวนิยาย<br />

<input type=”checkbox” value=”other” />หนังสืออื่น ๆ<br />

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

ตัวเลือกแบบให้เลือกข้อเดียว (radio button)

จะตรงข้ามกับเซ็กบ็อกซ์ เพราะเรดิโอบัตทอน (radio button) จะให้ผู้ใช้เลือกเพียงข้อเดียวจากตัวเลือกทั้งหมด

ตัวเลือกประเภทนี้ เรามักจะเห็นในการใช้งานทำแบบทดสอบ หรือแบบประเมินผลสิ่งใดสิ่งหนึ่ง

ตัวอย่างการสร้างตัวเลือกแบบให้เลือกข้อเดียว (radio button)

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<h3>โปรดระบุช่วงอายุ</h3>

<input type=”radio” name=”age” value=”15″ />0 – 15 ปี<br />

<input type=”radio” name=”age” value=”30″ />16 – 30 ปี<br />

<input type=”radio” name=”age” value=”45″ />31- 45 ปี<br />

<input type=”radio” name=”age” value=”50″ />50 ปี ขึ้นไป<br />

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

อุปกรณ์เก็บข้อมูลแบบซ่อน (hidden)

          เป็นอุปกรณ์ที่เราใช้สำหรับเก็บค่าใด ที่เราต้องการส่งไปพร้อมกับข้อมูลที่กรอกลงฟอร์ม เมื่อเราคลิกปุ่ม submit เช่น วันเวลาที่กรอกข้อมูล

อุปกรณ์ hidden จะไม่มีหน้าตาเมื่อแสดงบนเว็บบราวเซอร์ แต่เมื่อกดปุ่ม submit ค่าในอุปกรณ์ hidden จะถูกส่งไปที่เซิร์ฟเวอร์พร้อม ๆ กับค่าที่อุปกรณ์ตัวอื่น ๆ ในฟอร์ม

ตัวอย่างการสร้างอุปกรณ์เก็บข้อมูลแบบซ่อน (hidden)

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<h3>การใช้ค่าซ่อนในฟอร์ม</h3>

<input type=”hidden” name=”ID” value=”46131440122″ />

<input type=”hidden” name=”USER” value=”piyadanai” />

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

4. ช่องรับข้อความแบบหลายบรรทัด <textarea>

ในกรณีที่มีข้อมูลที่ต้องป้อนในฟอร์มมากกว่า 1 บรรทัด เราไม่สามารถใช้แท็ก  textarea ได้โดยแท็กที่ใช้มีรูปแบบ ดังนี้

รูปแบบของแท็ก
<textarea cols=”จำนวนตัวอักษรใน 1 แถว” rows=”จำนวนแถว”>

…

</textarea>

ค่าที่กำหนดให้ใช้

ตัวเลขจำนวนเต็มบวก

ตัวอย่างการสร้างช่องรับข้อความแบบหลายบรรทัด

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<textarea cols=”30″ rows=”5″>

…ข้อความเริ่มต้น…

</textarea>

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

กำหนดการตัดคำ

          ปกติเราพิมพ์ประโยคยาว ๆ แท็ก textarea จะตัดคำขึ้นบรรทัดใหม่ให้เราเราเอง  แต่ถ้าเราไม่ต้องการให้มีการตัดคำ หรือต้องการตัดคำเองตามตำแหน่งที่เราต้องการ เราสามารถทำได้โดยใช้แอตทริบิวต์ wrap

ตัวอย่างการกำหนดให้ไม่มีการตัดคำ

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<textarea cols=”30″ rows=”5″>

…ข้อความเริ่มต้น…

</textarea>

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

5. ตัวเลือกรายการ <select>,<option>

          ตัวเลือกรายการ หรือการใช้ select เป็นอุปกรณ์ที่ใช้แสดงข้อมูลให้ผู้ใช้เลือกเพียง 1 ข้อมูลจากข้อมูลทั้งหมด คล้ายเรดิโอบัตทอนแต่จะประหยัดพื้นที่ในการแสดงผลมากกว่า

รูปแบบของแท็ก

                             <select name=”ชื่ออุปกรณ์”>            
<option value=”ค่าตัวเลือกที่ 1″>ชื่อตัวเลือก1</option>

<option value=”ค่าตัวเลือกที่ 2″>ชื่อตัวเลือก2</option>

…

</select>

ค่าที่กำหนดให้ใช้ 

ค่าตัวเลือก คือ ค่าที่จะถูกส่งไปให้เซิร์ฟเวอร์ เมื่อคลิกปุ่ม
ชื่อตัวเลือก คือ ชื่อที่จะแสดงผลเป็นตัวเลือกในฟอร์ม html

ตัวอย่างการใช้ select

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<h3>กรุณาเลือกสีที่ชอบ</h3>

<select name=”color”>

<option value=”FF0000″>แดง</option>

<option value=”0000FF”>น้ำเงิน</option>

<option value=”FF3300″>ส้ม</option>

</select>

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธที่ได้

6. ตัวเลือกรายการแบบจัดกลุ่ม <optgroup>

          ในกรณีที่มีตัวเลือกจำนวนมาก เราสามารถแบ่งกลุ่มให้ตัวเลือกจะช่วยให้เราไม่สับสนในการเลือกข้อมูล และทำให้มีความเป็นระเบียบเรียบร้อยอีกด้วย

รูปแบบของแท็ก

                             <select name=”ชื่ออุปกรณ์”>            
<optgroup label=”ชื่อกลุ่มที่ 1″> <option>…</optgroup>

<optgroup label=”ชื่อกลุ่มที่ 2″> <option>…</optgroup>

…

</select>

ค่าที่กำหนดให้ใช้

ชื่อกลุ่ม คือ ชื่อที่จะเป็นชื่อกลุ่มของรายการ

ตัวอย่างการใช้ตัวเลือกรายการแบบจัดกลุ่ม

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<h3>กรุณาเลือกสาขาวิชา</h3>

<select name=”department”>

<optgroup label=”คณะวิทยาศาสตร์”>

<option value=”sci1″>สาขาวิชาเคมี</option>

<option value=”sci2″>สาขาวิชาวิทยาศาสตร์</option>

<option value=”sci3″>สาขาวิชาชีววิทยา</option>

</optgroup>

<optgroup label=”คณะเทคโนโลยีสารสนเทศ”>

<option value=”tec1″>สาขาวิชาวิทยาการคอมพิวเตอร์</option>

<option value=”tec2″>สาขาวิชาเทคโนโลยีสารสนเทศ</option>

</optgroup>

</select>

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

7. ตัวเลือกรายการแบบหลายบรรทัด

          เราสามารถสร้างตัวเลือกรายการแบบบรรทัดเดียวซึ่งประหยัดเนื้อที่ แต่ถ้าเราต้องการสร้างตัวเลือกรายการแบบหลายบรรทัด ที่มีการแสดงรายการมากกว่า 1 รายการในคราวเดียว เราะใช้แอตทริบิวต์ size ช่วย

ตัวอย่างการใช้ตัวเลือกรายการแบบหลายบรรทัด

<!DOCTYPE html>

<html>

<head>

<title>การสร้างฟอร์ม</title>

</head>

<body>

<form method=”post” action=”#”>

<h3>กรุณาเลือกสาขาวิชา</h3>

<select name=”department” size=”6″>

<optgroup label=”คณะวิทยาศาสตร์”>

<option value=”sci1″>สาขาวิชาเคมี</option>

<option value=”sci2″>สาขาวิชาวิทยาศาสตร์</option>

<option value=”sci3″>สาขาวิชาชีววิทยา</option>

</optgroup>

<optgroup label=”คณะเทคโนโลยีสารสนเทศ”>

<option value=”tec1″>สาขาวิชาวิทยาการคอมพิวเตอร์</option>

<option value=”tec2″>สาขาวิชาเทคโนโลยีสารสนเทศ</option>

</optgroup>

</select>

<input type=”submit” value=”OK” />

<input type=”reset” value=”Cancel” />

</form>

</body>

</html>

ผลลัพธ์ที่ได้

นอกจากนี้เรายังสามารถกำหนดให้เลือกมากกว่า 1 ค่า โดยใช้แอตทริบิวต์ multiple

รูปแบบของแท็ก
<select size=”จำนวนแถว” multiple=” multiple”>

<option>…</select>

ค่าที่กำหนดให้ใช้

มีคำเดียว คือ “multiple” กำหนดให้เลือกรายการได้หลายรายการพร้อมกันโดยการกดคีย์ <Ctrl> ค้างแล้วคลิกเลือกหลาย ๆ รายการตามที่เราต้องการ

 

ข้อมูลอ้างอิง

http://www.cs.buu.ac.th
http://cs.udru.ac.th
http://tutor.dserver.org
http://piemee.blogspot.com/p/html_12.html
http://www.hellomyweb.com/index.php/main/content/19
http://www.siaminterhost.com/kb/index.php?mod_id=2&id=57