การสร้างปุ่ม ส่งข้อมูล และ ปุ่ม ลบพิมพ์ใหม่

หลังจากที่ได้เรียนรู้เกี่ยวกับวิธีการสร้างแบบสอบถาม <FORM> และการใช้ช่องรับข้อมูล <TYPE> แบบต่างๆ เรียบร้อยแล้ว บทนี้เราจะมาเรียนรู้ถึงวิธีการสร้างปุ่ม ส่งข้อมูล (ส่งข้อมูลในแบบสอบถามไปยัง Server เพื่อทำการประมวลผล โดยโปรแกรม CGI หรือ ส่งข้อมูลในแบบสอบถามมาให้เราทางอีเมล์ เป็นต้น) และ ปุ่ม ลบพิมพ์ใหม่ โดยในตัวอย่างต่อไปนี้ จะยังไม่มีการส่งข้อมูล ออกไปจริง ๆ เพียง แต่เป็นการสาธิตให้เห็นถึงวิธีการสร้างปุ่มเท่านั้น แต่อย่างไรก็ตามคุณสามารถทดสอบการทำงานของปุ่มทั้งสองนี้ได้ครับ ส่วนผลลัพธ์ก็คือ ถ้าคุณคลิ๊กที่ปุ่ม ส่งข้อมูล Browser จะทำการ Refresh/Reload เว็บเพจหน้านี้ ใหม่ (เพื่อแสดงให้ทราบว่าข้อมูลถูกส่งไปแล้ว - ส่งปลอม ๆ) และถ้าคุณคลิ๊กที่ปุ่ม ลบพิมพ์ใหม่ ข้อมูลที่คุณพิมพ์ไว้ในแบบสอบถามจะถูกลบออกไปครับ


<FORM>
      Name: ชื่อ-นามสกุล<BR> <INPUT TYPE="text" NAME="name" SIZE="30"><BR>
      E-mail: ที่อยู่อีเมล์ของคุณ<BR> <INPUT TYPE="text" NAME="email" SIZE="30"><BR>
      คำแนะนำ/เสนอแนะ/ติชม: (เพื่อการปรับปรุงเว็บไซท์ครั้งต่อไป)<BR>
      <TEXTAREA NAME="comment" COLS="50" ROWS="5" WRAP="virtual"></textarea><P>
      <INPUT TYPE="submit" VALUE="ส่งข้อมูล">
      <INPUT TYPE="reset" VALUE="ลบพิมพ์ใหม่">
</FORM>

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

Name : ชื่อ-นามสกุล

E-mail : ที่อยู่อีเมล์ของคุณ

คำแนะนำ/เสนอแนะ/ติชม: (เพื่อการปรับปรุงเว็บไซท์ครั้งต่อไป)

อธิบายคำสั่ง

<INPUT TYPE="submit"> เป็นการกำหนดให้ Browser ส่งข้อมูลในแบบสอบถามไปยัง Server
<INPUT TYPE="reset"> เป็นการกำหนดให้ Browser ลบข้อมูลที่พิมพ์ไว้ออกไป
VALUE="ข้อความ" เป็นการกำหนดข้อความที่ใช้แสดงบนปุ่มทั้งสอง