การสร้าง Form ในภาษา HTML
HTML Form ถูกใช้เมื่อต้องการเก็บข้อมูลอะไรบางอย่าง จากผู้เข้าชมเว็บไซต์ เช่น ข้อมูลประจำตัว ข้อมลการเยี่ยมชมต่าง ๆ และอื่น ๆ อีกมาก



การทำงานของ HTML Form จะเริ่มต้นโดย การรับ input จากผู้เข้าชมเว็บไซต์ แล้วจะส่งข้อมูลเหล่านั้น ไปที่เซิฟเวอร์ แล้วทำการประมวลผลต่อไป ส่วนการประมาลผลจะเป็นแบบใดนั้น ก็อยู่ที่เรากำหนดมัน



องค์ประกอบของ Form ใน HTML นั้น อาจจะประกอบไปด้วย ช่องกรอบช้อความ ปุ่มต่าง ๆ ตัวเลือกต่าง ๆ เพื่อใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่เราจะศึกษาเรื่ององค์ประกอบของฟอร์มนั้น เรามาดู Syntax ของ Form กันก่อนดีกว่าครับ form ใน HTML นั้น จะขึ้นต้นแท็กด้วย <form> และจะปิดท้ายด้วยแท็ก </form> ซึ่งก็มีรูปแบบตามด้านล่างครับ



    form elements


action คือหน้าที่เราต้องการส่งข้อมูลไปเพื่อจัดการกับข้อมูล

method คือรูปแบบของการส่งข้อมูล มีแบบ get กับ post

form elements คือองค์ประกอบของ form ต่าง ๆ เช่น textarea, text, checkbox และอื่น ๆ


ตัวอย่างการใช้งาน form ในภาษา HTML

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


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


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


Input type="text"
เป็นช่องให้กรอกข้อความ ดูตัวอย่างโค้ด


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


Input type="password"
เป็นช่องให้กรอกข้อความ ข้อความที่กรอก จะเป็นจุด ๆ ทำให้อ่านไม่ออก ดูตัวอย่างโค้ด


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


Input type="radio"
เป็นช่องวงกลมให้ติ๊ก สามารถจัดเป็นกลุ่ม เลือกได้อันหนึ่งอันใดในกลุ่ม



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



Input type="checkbox"
เป็นช่องสี่เหลี่ยมให้ติ๊ก เลือกกี่อันก็ได้



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



Input type="reset"
เป็นปุ่มสำหรับให้ลบ reset ค่าเป็นค่าเริ่มต้นทั้งหมด ที่อยู่ในฟอร์ม






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







Input type="button"
เป็นปุ่มธรรมดา ส่วนมาก จะใส่โค้ด javascript เพื่อให้ปุ่มทำงานตาม event ต่าง ๆ 


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


Input type="submit"
เป็นปุ่มซึ่งเมื่อกดแล้ว หมายถึงการยืนยันข้อมูล แล้วส่งข้อมูลไปทำการตรวจสอบทันที


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


Input type="image"
มีการทำงานเหมือน submit แต่เปลี่ยนจากปุ่ม เป็นรูปภาพแทน


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


Input type="file"
ลักษณะจะแตกต่างกันตามบาวเซอร์ ใช้เพื่อเป็นการ import file จากในเครื่อง ซึ่งในการใช้ type=file จะต้องใส่ enctype="multipart/form-data" ไว้ที่แท็ก form ด้วย




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


Input type="hidden"
เป็นข้อมูล ที่ถูกซ่อนไว้ จะไม่สามารถมองเห็น ส่วนมากใช้ส่งข้อมูล ที่ไม่ต้องการให้ผู้เยี่ยมชมเว็บไซต์เห็นข้อมูลดังกล่าว


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


Select Option ใน HTML
เป็นช่องสี่เหลี่ยมมีข้อมูลอยู่ข้างในเพื่อให้เลือก จำนวนของการแสดงผล เท่ากับจำนวนของแท็ก option

	Ex1
	Ex2
	Ex2


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

	Ex1
	Ex2
	Ex2


Textarea ใน HTML
มีลักษณะเป็นพื้นที่ให้ใส่ข้อมูล มีหลายแถว หลายคอลัมน์


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





ตัวอย่าง การส่งคำค้นหาไปค้นหาใน google

ค้นหาคำใน google  



ค้นหาคำใน google