|
บทที่ 14
ฟอร์ม (Form) ตอนที่ 1
Form
Forms คือช่องกรอกแบบฟอร์มที่เราเจอตามตามเวบทั่วไป
เวบมาสเตอร์ใช้ส่วนนี้รับข้อมูลจากผู้เข้าชมเวบ ไม่ว่าจะเป็น ประวัติส่วนตัว
ผลโวตต่างๆ หรือ Search หาข้อมูลการรับข้อมูลของการกรอกแบบฟอร์ม
สามารถรับได้สองทางคือ ให้ส่งมาทางเมล์ หรือส่งเข้าโปรแกรมที่เราได้เขียนไว้ที่
Server เช่น ( perl , CGI , java )
การสร้าง Form
ใน Object palette ให้คลิกสามเหลี่ยมด้านซ้ายบนค้างไว้แล้วเลือก
Form
ใน Form panel ให้กดปุ่ม Insert Form ดังรูป
จากนั้นภายในหน้า 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
Add
object to form
Text filds
คลิกที่ Insert text filds จะมีช่องสำหรับกรอกข้อความ
ให้มาที่ Properties inspector สามารถกำหนดค่าต่างได้ดังนี้
Type : Single line เป็นค่าที่โปรแกรมเลือกให้อยู่แล้ว เป็นแบบใส่ข้อความได้แถวเดียวสามารถกำหนดความกว้างของช่องได้
ตามจำนวนตัวอักษรในช่อง Char
Width และยังสามารถกำหนดตัวอักษรให้พิมพ์ได้ไม่เกินตามที่เรากำหนด
Type : Multiline เป็นการกำหนดให้กรอกข้อความได้หลายบรรทัดดังรูปด้านบน
เราสามารถกำหนดความกว้างได้ที่ Num Line ในตัวอย่างระบุ
10 บรรทัด ส่วน Char Width กำหนดเป็น 20 ตัวอักษรต่อแถว ในช่อง Wrap
ให้กำหนดเป็น Defaul จะเป็น การตัดบรรทัดให้ถ้าครบจำนวน
20 ตัวอักษร
Type : Password เป็นการกำหนดให้กรอกเป็นรหัส ไม่ว่าจะพิมพ์อะไรลงไปจะแสดงออกมาเป็นเครื่องหมาย
******* ตลอด สามารถกำหนดจำนวนตัวอักษรได้เหมือน
Single line
Button
มีอยู่สองแบบคือ ส่งและลบข้อความทั้งหมด ( Submi / Reset
) หรือ Send / Clear เราสามารถตั้งชื่อเป็นชื่ออะไรก็ได้ตามต้องการ
คลิก Button ใน Form Object
ในตัวอย่างเป็นการใช้ปุ่ม Submit ซึ่งเป็นค่าที่ทางโปรแกรมได้กำหนดให้
เราสามารถเปลี่ยนชื่อได้ในช่อง Label ส่วนในช่อง Action
ถ้ากำหนดให้ปุ่มนี้เป็นปุ่มส่งข้อความให้เลือก Submit Form
ตัวอย่างต่อไปเป็นการใช้ปุ่มลบข้อความทั้งหมดที่ได้กรอกในแบบฟอร์ม
ในช่อง Label กำหนดชื่อเป็น Clear ส่วนช่อง Action ให้กำหนดเป็น
Reset form ซึ่งจะเป็นการลบข้อความทั้งหมดของฟอร์ม
|
