สอนทำเว็บ ด้วย HTML

โดยทั่วไปบนอินเทอร์เน็ต เรามักจะพบแบบฟอร์มสอบถามแบบต่างๆ ไม่ว่าจะเป็นแบบฟอร์มสั่งซื้อของ แบบฟอร์มการจ่ายเงิน เมื่อซื้อสินค้า หรือแบบฟอร์มการสอบถามความคิดเห็น การลงทะเบียนเข้าเว็บเพจ เพื่อค้นหาข้อมูลในเว็บเพจนั้น รวมถึงแบบฟอร์มสมุดผู้เข้าเยี่ยมชมเว็บเพจต่างๆ โดยทั้วไปแบบฟอร์ม จะมีการเติมข้อความลงในช่องที่กำหนดไว้ หรือการเลือกตัวเลือกในหัวข้อต่างๆ สิ่งเหล่านี้เราจะเรียกว่า ฟอร์ม (FORM) รูปแบบฟอร์มสอบถามนั้น จะมีลักษณะการจัดเรียงข้อมูลอย่างเป็นระเบียบ

ประเภทของคำสั่งในการสร้างขอบเขตของแบบฟอร์มสอบถามแบ่งออกเป็น 3 ปรเภท

<TEXTAREA> เป็นคำสั่งที่ใช้สำหรับกรอบป้อนข้อมูล สามารถป้อนข้อมูลได้หลายบรรทัด
<SELECT> เป็นคำสั่งที่ใช้สำหรับสร้างตัวเลือกที่อยู่ในกรอบตัวเลือก
<INPUT> เป็นคำสั่งที่ใช้ในการสร้างกรอบป้อนข้อความบรรทัดเดียว ปุ่มแบบวิทยุ (Radio button) ช่องทำเครื่องหมาย (Check box) ปุ่มยืนยันข้อมูลที่ป้อน (Submit button) ปุ่มยกเลิกข้อมูลที่ป้อน (Reset button)

คำสั่งในการสร้างแบบฟอร์ม

METHOD เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบไปด้วย
- GET เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
- POST เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server
ACTION คือตำแหน่งหรือ URL ของ CGI Script ที่วางไว้ที่ Server ที่กำหนดใน Domain ต่างๆ หรือใช้ค่า mailto: ก็ได้
ถ้าเป็นฟอร์มที่มีการอัพโหลดรูปหรือไฟล์ด้วย คือมีการใช่ <input type=file> จะต้องใส่ ENCTYPE="MULTIPART/FORM-DATA" ด้วย

การสร้างกรอบป้อนข้อความแบบหลายบรรทัด

<FORM>
<TEXTAREA NAME="ชื่อของข้อมูล TEXTAREA" ROWS="ค่าตัวเลข" COLS="ค่าตัวเลข">....ข้อมูลที่ต้องการแสดงผลในกรอบป้อนข้อมูล...... </TEXTAREA>
</FORM>

คำสั่งนี้จะเป็นการกำหนดการสร้างกรอบป้อนข้อมูลแบบหลายบรรทัด โดยในที่นี้จะมีคุณสมบัติในการกำหนดความกว้าง และความสูงของกรอบป้อนข้อความคือ

ROWS เป็นการกำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูลต่าง ๆ ลงในกรอบป้อนข้อความ
COLS เป็นการกำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว ซึ่งจำนวนคอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters

ข้อสังเกต

ค่าตัวเลขของ ROWS นั้นจะเป็นการกำหนดความสูงของกรอบป้อนข้อมูล และค่าตัวเลขของ COLS นั้นและเป็นการกำหนดความกว้างของกรอบป้อนข้อมูล

การสร้างตัวเลือก

<FORM>
<SELECT NAME="ชื่อของข้อมูลที่ต้องการสร้างตัวเลือก " SIZE="ค่าตัวเลข / MULTIPLE">
<OPTION SELCETED VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง
<OPTION VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง
<OPTION VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง
</SELECT>
</FORM>

ในคำสั่งการสร้างตัวเลือกนั้น การแสดงผลตัวเลือกนั้นจะมีการกำหนดคุณสมบัติ โดยใช้คุณสมบัติ SIZE เป็นตัวกำหนดซึ่งสามารถกำหนดได้ 2 แบบคือ

SIZE="ค่าตัวเลข" เป็นการกำหนดการแสดงผลตัวเลือกตามค่าตัวเลขที่ได้ระบุไป
SIZE="MULTIPLE" เป็นการกำหนดการแสดงผลตัวเลือกทั้งหมดที่มีอยู่ โดยจะแสดงเรียงต่อกันตามบรรทัดในแต่ละตัวเลือก <OPTION>

การกำหนดกรอบป้อนข้อมูลแบบ TEXT BOX

SIZE เป็นการกำหนดความกว้างของ Textbox
MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox
คำสั่งการแสดงผลนั้นจะมีลักษณะการแสดงผลแบบบรรทัดเดียว เพื่อให้ป้อนข้อมูลที่เป็นเลข หรือตัวอักษร

การแสดงผลแบบ PASSWORD

คำสั่งการแสดงผลแบบ PASSWORD จะเป็นคำสั่งที่ใช้ในการรักษาความปลอดภัยของข้อมูล โดยการแสดงผลจะเหมือนกับการแสดงผลแบบ TEXTBOX คือจะเป็นคำสั่งที่มีลักษณะการแสดงผลแบบบรรทัดเดียว แต่จะแตกต่างตรงที่การป้อนข้อมูล ถ้าเป็นการแสดงผลแบบ Textbox นั้นจะเป็นตัวอักษร แต่ถ้าเป็นการแสดงผลแบบ PASSWORD จะเป็นดอกจัน (*)

SIZE เป็นการกำหนดความกว้างของ Textbox
MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox

การแสดงผลแบบ CHECKBOX

ในการกำหนดการแสดงผลแบบ CHECKBOX จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก เพื่อให้คลิกตัวเลือกที่ต้องการในการแสดงผลแบบ CHECKBOX จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่ามาตรฐานในการแสดงผลที่มีลักษณะการแสดงผลเป็นเครื่องหมายถูกในช่องสี่เหลี่ยมที่เป็นตัวเลือก ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป

การแสดงผลแบบ RADIO

ในการกำหนดการแสดงผลแบบ RADIO จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายเป็นรูปวงกลม ในการแสดงผลแบบ RADIO จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่ามาตรฐานในการแสดงผล ที่มีลักษณะการแสดงผลเป็นเครื่องหมายถูก ในช่องสี่เหลี่ยมที่เป็นตัวเลือก ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป

ข้อสังเกต

การกำหนดค่า VALUE และ NAME ในการแสดงตัวเลือกแบบ CHECKBOX และการแสดงตัวเลือกแบบ RADIO นั้นมีข้อสังเกตได้ว่า ถ้าเป็นการตัวเลือกแบบ CHECKBOX นั้น VALUE จะกำหนดค่าเท่ากัน แต่ NAME จะกำหนดค่าต่างกัน ในทางกับกันการแสดงตัวเลือกแบบ RADIO นั้นจะกำหนดค่า VALUE ให้มีค่าต่างกันส่วนค่าของ NAME นั้นจะกำหนดค่าให้เท่ากัน

การส่งแบบฟอร์มแบบ SUBMIT

คำสั่งนี้จะทำหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของเราเพื่อทำการประมวลผลข้อมูล การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE

การส่งแบบฟอร์มแบบ RESET

คำสั่งจะทำหน้าที่ในการยกเลิกข้อมูลต่าว ๆ ที่ทำการป้อนลงในแบบฟอร์ม คือ เป็นคำสั่งที่ใช้ในการลบข้อมูลในแบบฟอร์มทั้งหมด เพื่อทำการป้อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE

การจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม

คำสั่งนี้ใช้ในการจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์มที่มีใจความและการใช้งานที่สัมพันธ์กัน ช่วยให้แบบฟอร์มมีความเป็นระเบียบเรียบร้อย ผู้ใช้สามารถทำความเข้าใจ และสามารถป้อนข้อมูลได้สะดวกมากยิ่งขึ้น

<FIELDSET> เป็นการกำหนดการจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม
<LEGEND> เป็นการแสดงคำอธิบายกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม