| ( คำสั่งเริ่มต้น ) ( สีสรร ) ( ข้อความ ) ( รูปภาพ ) ( การเชื่อมโยง ) ( รายการ ) ( ตาราง ) ( เฟรม ) ( ฟอร์ม ) ( มัลติมีเดีย ) |
สำหรับฟอร์มใน 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 นั้นสามารถเปลี่ยนได้ตามใจเรา |
| ตัวรับข้อมูลแบบ text | |
| รูปแบบ ลักษณะ |
< INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
Registration Form |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| ช่องป้อนรหัสผ่าน | |
| รูปแบบ ลักษณะ |
< INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="..."> รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น Verified your Authentication |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| ปุ่มเลือกคลื่นวิทยุ(Radio Botton) | |
| รูปแบบ ลักษณะ |
< INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED> ปุ่มเลือก แบบนี้ สามารถเลือก ได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เรา คิดว่าผู้กรอก แบบฟอร์ม น่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว Radio Botton |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| เช็คบ็อกซ์ | |
| รูปแบบ ลักษณะ |
< INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED> ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง Checkbox Form |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| ตัวรับข้อมูลแบบ TEXTAREA | |
| รูปแบบ ลักษณะ |
< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD > .........TEXT .........TEXT </TEXTAREA> เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง
TEXTAREA Form |
ตัวอย่างของแบบฟอร์มด้านบนครับ
---------------------------------------->
| การเลือกรายการ (แบบ Drop down menu) | |
| รูปแบบ ลักษณะ |
< SELECT NAME="..." > <OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก <OPTION >คำอธิบายหัวข้อหรือตัวเลือก <OPTION >คำอธิบายหัวข้อหรือตัวเลือก </SELECT>
ส่วนเมนูแบบ Scrolling นั้น ำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่ากนัก SELECT Form Type Drop Down Menu |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| ฟอร์มแบบซ่อน | |
| รูปแบบ คำอธิบาย |
< INPUT TYPE=HIDDEN NAME="..." VALUE="..." > ฟอร์มแบบ hidden นั้นมีประโยน์หลายอย่าง ขึ้นอยู่ว่าจะเอาไปใช้อย่างไร เช่น สมมติว่าเราออกแบบสอบถาม ไปตาม ไซต์ต่าง ๆ หลายสิบแห่ง นอกจากเราต้องการความคิดเห็นของผู้กรอกแล้ว เรายังอยากรู้ว่าฟอร์มนั้นถูกส่ง มาจากไซต์ไหนบ้าง เพื่อวิเคราะห์ว่าไซต์ใดที่มีผู้กรอกแบบฟอร์มมากที่สุด เราก็ใช้ hidden เข้ามาช่วย อาจจะตั้งค่า NAME="Form site" ส่วนค่าของ VALUE ก็แตกต่างกันไปตมไซต์ต่าง ๆ เช่น VALUE="ABC Company", VALUE="CDE Company" ฉะนั้นเวลาผลลัพธ์ถูกส่งกลับมา เราก็จะรู้ได้ว่าถูกส่งมาจากไซต์ใดใน หลายสิบไซต์นั้น HIDDEN Form |
ตัวอย่างของแบบฟอร์มด้านบนครับ
| ปุ่มตกลง, ยกเลิก และ ปุ่มแบบอื่นๆ | |
| รูปแบบ ลักษณะ |
< INPUT TYPE=SUBMIT VALUE="..." > < INPUT TYPE=RESET VALUE="..." > < INPUT TYPE=BUTTON VALUE="..." >
< INPUT TYPE=IMAGE SRC="ตำแหน่งไฟล์รูปภาพ" NAME="..." > ดังตัวอย่างที่ 2 ครับ ตัวอย่าง ปุ่ม ยกเลิก และ ตกลง 1 ตัวอย่าง ปุ่ม ยกเลิก และ ตกลง 2 |