HTML

ลำดับตอนที่ #6 : การสร้างแบบฟอร์ม

สำหรับฟอร์มใน HTML ถือว่าเป็น สิ่งที่โต้ตอบกับผู้ใช้ ในแบบ interactive คือ เราสามารถ ใช้ฟอร์ม ในการตอบโต้ กับผู้อ่านไซต์ ของเราได้ ทันที เมื่อพูดถึง ฟอร์มก็คง ต้องพูด ถึงคำว่า CGI (Common Gateway Interface) ซึ่งก็คือ โปรแกรม หรือ สคริปท์ตัวหนึ่ง ที่คอยตรวจสอบ และจัดการ กับแบบฟอร์ม รวมทั้ง การประมวลผล ตาม แบบที่เจ้าของ ไซต์ต้องการ โดยมากมัก เขียนขึ้นด้วยภาษา C หรือ Perl แต่ในการใช้ CGI นี้ เป็นเรื่องที่ยุ่งยาก กล่าวคือ ถ้าเราไม่ใช่ ผู้ดูแลระบบ แล้วถือว่ าไม่มีสิทธิ์ ซึ่งก็หมาย ความว่า เราต้อง ตัดคุณสมบัติ แบบ Interactive ออกไป แล้วเรา หันมาใช้ Mailto: แทน ซึ่งเราก็ยัง สามารถที่ จะสร้างฟอร์ม ได้เช่นเดิม หรือไม่ ก็ใช้ภาษ าจาวาสคริปท์ มาช่วย โดยเรา ต้องเขียน สคริปท์ขึ้นมา แล้วปะติด ไปกับไฟล์ HTML การประมวลผล ต่าง ๆ ไม่จำเป็น ต้องส่งไปที่ เซิร์ฟเวอร์ แต่สามารถ ประมวลผล บนเครื่อง ของผู้ชม ไซต์ได้ ทันที แต่ในที่นี้ ผมจะขอกล่าว ในส่วน ของการใช้ mailto:

รูปแบบของฟอร์ม
รูปแบบ < FORM METHOD="..." ACTION="..." ENCTYPE"..."></FORM>
METHOD=GET/POST โดย GET จะส่งได้ไม่เกิน 255 ตัวอักษร ส่วนใหญ่ใช้ส่งค่าตัวแปรและ URL และ POST จะส่งข้อความไปได้ไม่จำกัด ซึ่งนิยมใช้มากกว่า GET
ACTION="mailto:myaddress@mysite.co.th" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเรา
ENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น
<FORM METHOD=POST ACTION="mailto:info@np.a-net.net.th" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>

Tip ถ้าผู้กรอกแบบฟอร์มใช้บราวเซอร์จาก Netscape หัวข้อหรือ Subject ของเมล์ที่ส่งมายัง เมล์บ็อกซ์นั้นจะมีหัวข้อว่า"Form posted from Mozilla" แต่ถ้าเป็นตัวอื่นจะเป็น "Form Response" ถ้าคุณไม่ชอบก็สามารถเปลี่ยนได้ในส่วนของ ACTION ดังนี้
<FORM METHOD=POST ACTION="mailto:email@myaddress.com?subject="Answer from Product Questonaire"> โดยในส่วนของ Subject นั้นสามารถเปลี่ยนได้ตามใจเรา

การสร้างแบบฟอร์ม
รูปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
• TYPE=TEXT เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT
• NAME="..." ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร
• SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร
• MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ
• VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ

Registration Form
First name :
Last name :
Address :
Tel :
Country :

ช่องป้อนรหัสผ่าน
รูปแบบ < INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น
Password :

ปุ่ม Radio Botton
รูปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>
ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว
ชาย
หญิง


เช็คบ็อกซ์
รูปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED>
ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง
คณิตศาสตร์
ฟิสิกส์
ชีววิทยา
เคมี


ตัวรับข้อมูลแบบ TEXTAREA
รูปแบบ
< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD >
.........TEXT
.........TEXT
</TEXTAREA>
เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง

• ROWS=n n หมายถึง จำนวนบรรทัดที่ต้องการ
• COLS=n n หมายถึง จำนวนความกว้างของกรอบรับข้อความ มีหน่วยเป็น 50 ตัวอักษร
• รูปแบบการปัดคำ(Wrap) ปกติไม่ได้ตั้งไว้เราสามารถกำหนดได้ 3 วิธี คือ

1. WRAP=OFF ค่าปกติ ไม่มีการปัดคำขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ จนกว่าผู้กรอกจะกด Enter
2. WRAP=VITUAL หรือ WRAP=SOFT ปัดคำเมื่อสิ้นสุดกรอบข้อความ แต่เป็นการปัดคำแบบหลอก ๆ เฉพาะต่อหน้าผู้กรอกเท่านั้น
3. WRAP=PHYSICAL หรอื WRAP=HARD ปักคำเมื่อสิ้นสุดกรอบรับข้อความ ซึ่งเป็นการปัดจริง ๆ

การใช้งานเบราเซอร์บางรุ่นไม่สนับสนุน VITUAL และ PHYSICAL ฉะนั้นทางแก้คือให้ใช้ SOFT และ HARD จะดีกว่า

การเลือกรายการ (แบบ Drop down menu)
รูปแบบ
< SELECT NAME="..." >
<OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
</SELECT>

• SELECT เป็นค่าปกติที่ใช้
• OPTION เป็นตัวเลือกที่เราต้องการให้ปรากฎ
• SELECTED เป็นตัวเลือกที่ถูกกำหนดเลือกไว้ก่อน มีได้เพียงตัวเดียว
ส่วนเมนูแบบ Scrolling นั้น ำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่มากนัก

มะม่วง องุ่น มังคุด ผรั่ง

ปุ่มยกเลิก และ ตกลง
รูปแบบ
< INPUT TYPE=SUBMIT VALUE="..." >
< INPUT TYPE=RESET VALUE="..." >

• Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม
• Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก
• Vaule เป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้