พื้นฐาน HTML

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

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

เว็บไซต์นั้นต่างจากเอกสารธรรมดา ตรงที่สามารถตอบโต้กับผู้ใช้งานได้ เช่นการใช้ search (ค้นหา) ในเว็บไซต์ hellomyweb.com ช่องรับค่าของ search นั้นก็คือแบบฟอร์มใน html นั่นเอง

เมื่อได้รับค่าจากแบบฟอร์ม search แล้วที่ฝั่ง server จะนำไปประมวลผลต่อโดยจะมีโปรแกรม (CGI Program) ที่ใช้สำหรับประมวลผล CGI Program จะเขียนโดยใช้ภาษา PHP , ASP , Python และอื่นๆอีกมากมาย CGI Program ที่เราเขียนไว้จะรับค่าจาก search แล้วนำไปประมวลผลหาบทความที่ใกล้เคียงกับค่าที่รับไป

ในบทความนี้เราจะมาศึกษาในเรื่องฟอร์ม ของ HTML แต่จะไม่ลงลึกไปถึงการเขียน CGI Program ซึ่งหาท่านสนใจ CGI Program ก็ให้หาอ่านจากหัวข้อของ PHP ในเว็บไซต์ของเราได้

รูปแบบของ form

<form>
    ชนิดของค่าที่รับเช่น text , password 
</form>


1. แบบฟอร์มรับค่าตัวอักษร
ในตัวอย่างเป็นการเขียน Text form ผู้ใช้งานสามารถกรอกข้อมูลที่เป็นตัวอักษรลงไปได้ จะสังเกตุว่า ใน input tag จะมี Attibute name อยู่ซึ่งเราจะใช้ในการอ้างอิงเมื่อเขียน CGI Program เราสามารถกำหนดขนาดของ text form ได้โดย ใช้ Attibute คำสั่ง size="ขนาดที่ต้องการ"

คลิกเพื่อทดลองเขียนด้วยตัวเอง


2. แบบฟอร์มรับค่า password
ในตัวอย่างเป็นการเขียน Password form เมื่อผู้ใช้กรอกข้อมูลลงไปในฟอร์มจะแสดงสัญลักษณ์ " ? " เพื่อไม่ให้คนอื่นเห็น password ที่เรากรอก

คลิกเพื่อทดลองเขียนด้วยตัวเอง


3. ratio form
ratio form เป็นฟอร์มที่ให้เลือกผลลัพธ์เพียงค่าเดียวเท่านั้น

คลิกเพื่อทดลองเขียนด้วยตัวเอง



4. Checkbox form
Checkbox เป็นฟอร์มที่ให้เลือกผลลัพธ์ได้หลายค่า

คลิกเพื่อทดลองเขียนด้วยตัวเอง


5. สร้างปุ่มยืนยันรับค่า
สังเกตุที่ search เป็นปุ่ม ปุ่มหนึ่งที่ใช้ในการยืนยันว่าเราพิมพ์ข้อมูลเสร็จแล้วหรือเลือกเสร็จแล้วเราต้องการให้ส่งค่านี้ไปให้ CGI program ประมวลผล ปุ่มยืนยันจะใช้ในทุกฟอร์มของ html ซึ่งการส่งค่าไปประมวลผลจะมีด้วยการ 2 method คือ get , post ซึ่งเราจะพูดกันในหัวข้อของ PHP

คลิกเพื่อทดลองเขียนด้วยตัวเอง



6. drop down box
drop down เมนูในการเลือกข้อมูลแบบหนึ่ง ที่ให้คุณเลือกข้อมูลได้ข้อมูลเดียว เหมาะกับการใช้กับข้อมูลที่มากๆ เช่น กรอกข้อมูลที่อยู่ โดยใช้ dropdown ให้เลือกจังหวัด

คลิกเพื่อทดลองเขียนด้วยตัวเอง



7. text area
text area เหมาะสำหรับแบบฟอร์มที่ต้องกรอกข้อมูลจำนวนมากๆเช่น ที่อยู่

คลิกเพื่อทดลองเขียนด้วยตัวเอง



8. Fieldset
fieldset จะสร้างขอบให้ข้อมูลของคุณและมีหัวข้อให้ทำให้อ่าข้อมูลได้ง่ายขึ้น

คลิกเพื่อทดลองเขียนด้วยตัวเอง



เลื่อนขึ้นด้านบน