| 1.
การเริ่มต้นสร้าง Form เพื่อรับข้อมูล |
เว็บเพจเป็นสื่อที่ต่างจากเอกสารธรรมดา
เพราะเป็นสื่อสองทางที่ผู้ใช้สามารถสื่อสารกับเจ้าของเว็บเพจได้ ปัจจุบันมีการใช้แบบฟอร์มในเว็บเพจเพื่อเก็บข้อมูล
ตั้งแต่รายละเอียดของผู้เข้ามาเยี่ยมชมเว็บเพจ การสั่งซื้อสินค้า ไปจนถึงการรวบรวมความคิดเห็นเกี่ยวกับเรื่องต่างๆ
ที่กำลังอยู่ในความสนใจ เช่น การเลือกตั้ง การลงคะแนนความคิดเห็น เป็นต้น
Forms คือช่องกรอกแบบฟอร์มที่เราเจอตามตามเวบทั่วไป เวบมาสเตอร์ใช้ส่วนนี้รับข้อมูลจากผู้เข้าชมเวบ
ไม่ว่าจะเป็นประวัติส่วนตัว ผลโวตต่างๆ หรือ Search หาข้อมูล
การรับข้อมูลของการกรอกแบบฟอร์ม
สามารถรับได้สองทางคือให้ส่งมาทางเมล์หรือส่งเข้าโปรแกรมที่เราได้เขียนไว้ที่
Server เช่น ( perl , C , java )
|
| เริ่มต้นกับเครื่องมือสร้างฟอร์ม |
| เครื่องมือของอ็อบเจ็กต์ฟอร์มเลือกได้จากแท็บ
Forms |
|
สำหรับแต่ละส่วนประกอบย่อยของฟอร์มเรียกว่าฟิลด์
โดยจะมีอยู่หลายแบบ ซึ่งเราสามารถนำมา
ใช้งานได้อย่างเหมาะสม
|
| Filed |
ชื่อฟิลด์ |
การใช้งาน |
|
Insert
Form |
สร้างฟอร์ม |
|
Text
Field |
ฟิลด์กรอกข้อความ |
|
Hidden
Field |
ฟิลด์ซ่อน |
|
Textarea |
ฟิลด์กรอกข้อความแบบหลายบรรทัด |
|
Check
box |
เช็คบ็อกซ์ |
|
Radio
Button |
ตัวเลือก |
|
Radio
Group |
กลุ่มตัวเลือก |
|
List/Menu |
ลิสต์รายการ |
|
Jump
menu |
รายการเชื่อมโยง |
|
Image
Field |
ฟิลด์รูปภาพ |
|
File
Field |
กรอบสำหรับเลือกไฟล์ |
|
Button |
ปุ่มกด |
|
Label |
ฟิลด์แถบข้อความ |
|
Fieldset |
ฟิลด์จัดกลุ่มฟอร์ม |
|
| |
| การสร้างฟอร์ม |
เริ่มแรกเราต้องกำหนดขอบเขตของฟอร์มบนหน้าเว็บเพจก่อน
โดยเลือก  ที่แท็บออบเจ็กต์จะเกิดเส้นประสีแดงล้อมรอบพื้นที่ที่เรากำหนดให้เป็นฟอร์ม
จากนั้นให้เราปรับขนาดพื้นที่ฟอร์มตามต้องการและเพิ่มออบเจกต์ต่างๆ ของฟอร์มเข้าไปในพื้นที่นั้น
|
| จากนั้นภายในหน้า
Document จะมีเส้นประแสดงขอบเขตของ Form คือไม่ว่าจะเป็น Text Field
Checkbox Radio Button ต้องสร้างไว้ภายในเส้นประสีแดงนี้เท่านั้นเพราะจะมีผลในตอนใส่
Action ไปที่ Server |
|
| เราจะได้
Form area มาเป็นกรอบเส้นประสีแดง Form Object ที่เหลือในเส้นประนี้
(สำหรับคนที่มองไม่เห็นให้กำหนด View > Visual Aida > invisible
element ก็จะเห็นได้) |
การสร้างฟอร์มใดๆ
จำเป็นจะต้องสร้างในกรอบสีแดงนี้เท่านั้น เมื่อดูใน Browser ถึงจะ
แสดงเป็นรูปฟอร์มให้กรอกขึ้นมา ถ้าเห็นว่าช่องเล็กไปให้คลิกในกรอบสีแดง
จากนั้นให้กด Enter เพื่อขยายกรอบให้มีหลายบรรทัดก็ได้
|
| Form
properties |
|
Form
Name : ชื่ออ้างอิงของ Form จำเป็นมาก มีประโยชน์ในการเขียนโปรแกรม
ปกติโปรแกรมจะตั้งไว้ให้คือ Form1
Action : เรียกไฟล์จะมาจัดเก็บข้อมูลให้กับ Form ซึ่งอาจจะเป็น
ไฟล์ Java หรือที่เขียนจาก Perl
Method : ลักษณะการส่งข้อมูลมีอยู่สองแบบคือ Get ,
Post
Get : การส่งข้อมูลแบบ get จะรวมข้อมูลเป็น URL ส่งไปที่
Server ข้อมูลจะได้ไม่เกิน 8192 ตัวอักษร ดังนั้นไม่ควรใช้กับฟอร์มยาวๆ
(นิยมใช้กับ search engine )
Post : การส่งข้อมูลแบบ post ส่งแบบฟอร์มโดยรวมมาเป็น
massage
ค่า defaule จะตั้งค่าเป็นแบบ get
|
|
