การสร้าง Form ในภาษา HTML
การสร้าง Form ในภาษา HTML
HTML Form ถูกใช้เมื่อต้องการเก็บข้อมูลอะไรบางอย่าง จากผู้เข้าชมเว็บไซต์ เช่น ข้อมูลประจำตัว ข้อมลการเยี่ยมชมต่าง ๆ และอื่น ๆ อีกมากการทำงานของ HTML Form จะเริ่มต้นโดย การรับ input จากผู้เข้าชมเว็บไซต์ แล้วจะส่งข้อมูลเหล่านั้น ไปที่เซิฟเวอร์ แล้วทำการประมวลผลต่อไป ส่วนการประมาลผลจะเป็นแบบใดนั้น ก็อยู่ที่เรากำหนดมัน
องค์ประกอบของ Form ใน HTML นั้น อาจจะประกอบไปด้วย ช่องกรอบช้อความ ปุ่มต่าง ๆ ตัวเลือกต่าง ๆ เพื่อใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่เราจะศึกษาเรื่ององค์ประกอบของฟอร์มนั้น เรามาดู Syntax ของ Form กันก่อนดีกว่าครับ form ใน HTML นั้น จะขึ้นต้นแท็กด้วย ซึ่งก็มีรูปแบบตามด้านล่างครับ
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ผลลัพธ์ที่ได้
Textarea ใน HTML
มีลักษณะเป็นพื้นที่ให้ใส่ข้อมูล มีหลายแถว หลายคอลัมน์ผลลัพธ์ที่ได้