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

หลังจากที่ได้เรียนรู้เกี่ยวกับวิธีการสร้างแบบสอบถาม <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="ข้อความ"                เป็นการกำหนดข้อความที่ใช้แสดงบนปุ่มทั้งสอง

วิธีการ ส่งข้อมูลที่ได้จากแบบสอบถาม มาให้คุณทางอีเมล์โดย ไม่จำเป็นต้องใช้ CGI Script แต่อย่างใด เพียงให้คุณเพิ่ม element METHOD="POS"   ACTION="mailto:your@email" และ ENCTYPE="text/plain" เข้าไปในแท็ก <FORM> เท่านั้น ซึ่งในตัวอย่างนี้ข้อมูลจะถูกส่งออกไปทางอีเมล์ มาที่ นายทะเบียน ดังนั้นเวลาคุณจะนำไปใช้ จะต้องเปลี่ยน your@email ให้เป็นที่อยู่อีเมล์ของคุณด้วย มิฉะนั้น คุณก็จะไม่ได้รับข้อมูลใด ๆ จากแบบสอบถามนี้
________________________________________

<FORM METHOD="POST" ACTION="mailto:your@email" ENCTYPE="text/plain">
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 : ที่อยู่อีเมล์ของคุณ

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

อธิบายคำสั่ง
METHOD="POST"                             กำหนดให้ Server นำข้อมูลที่ได้รับจากแบบสอบถามไปประมวลผลทีละบรรทัด
ACTION="mailto:your@email"              จากนั้นให้ส่งข้อมูลที่ผ่านการประมวลผลแล้ว ไปยังอีเมล์ที่กำหนด
ENCTYPE="text/plain"                       โดยส่งไปในรูปแบบของตัวอักษรที่สามารถเปิดอ่านได้ทันที

วิธีการทำแบบสอบถามที่มีการตรวจสอบข้อมูลในช่อง "Name", "Email" และ "Comment" ก่อนทำการส่ง ข้อมูล หากข้อมูลทั้ง 3 ช่องดังกล่าวไม่มีการกรอกข้อมูล หรือกรอกข้อมูลไม่ถูกต้อง ก็จะมีคำเตือนขึ้นมาแจ้งให้ทราบ ตัวอย่างที่นำมาแสดง คุณสามารถนำไปใช้งานจริงได้ทันที กับทุก Server เพราะ แบบสอบถามนี้ไม่ได้ใช้ CGI Script ครับ ใช้เพียง HTML ธรรมดาร่วมกับ JavaScript เล็กน้อย สำหรับการทดสอบ ให้คุณลองคลิ๊กที่ปุ่ม "ส่งคำแนะนำ" โดยไม่ต้องกรอกข้อมูลใด ๆ จะพบว่ามีคำเตือนขึ้นมาทันที