Form
Forms คือช่องกรอกแบบฟอร์มที่เราเจอตามตามเวบทั่วไป
เวบมาสเตอร์ใช้ส่วนนี้รับข้อมูลจากผู้เข้าชมเวบ ไม่ว่าจะเป็น ประวัติส่วนตัว
ผลโวตต่างๆ หรือ Search หาข้อมูลการรับข้อมูลของการกรอกแบบฟอร์ม สามารถรับได้สองทางคือ
ให้ส่งมาทางเมล์ หรือส่งเข้าโปรแกรมที่เราได้เขียนไว้ที่ Server เช่น ( perl
, CGI , java ) คุณคงได้เรียนรู้และเข้าใจวิธีการสร้างและตกแต่งหน้าเวบเพจ
รวมทั้งลูกเล่นต่าๆ ที่จะช่วยทำให้เวบเพจของคุณดูน่าสนใจมากยิ่งขึ้น แต่ข้อจำกัดของวิธีดังกล่าวคือ
การสร้างเวบเพจเพื่อนำเสนอข้อมูลและข่าวสารเพียงอย่างเดียว โดยผู้เรียกดูเวบไม่สามารถตอบโต้
หรือส่งข้อมูลข่าวสารเข้ามายังเวบไซต์ของคุณ ทำให้ไม่สามารถตอบสนองความต้องการของลูกค้าหรือผู้เรียกดูเวบไซต์ได้อย่างเต็มที่ดังนั้นเวบไซต์ส่วนใหญ่จึงนิยมสร้างเวบเพจ
ให้สามารถโต้ตอบกับผู้เรียกดูเวบหรือลูกค้าได้ ซึ่งรูปแบบต่างๆของการส่งข้อมูลจากผู้เรียกดูเวบหรือลูกค้าเข้ามายังเวบไซต์
จะขึ้นอยู่กับจุดประสงค์ของผู้สร้างขึ้นมาเพื่ออะไร แต่รูปแบบของการข้อมูลตอบโต้ที่พบกนส่วนใหญ่
มักเป็นไปเพื่อประโยชน์ดังนี้
การสั่งซื้อสินค้าและบริการ
เวบเพจประเภทนี้ได้แก่ เวบเพจของบริษัทผู้ค้าหรือร้านค้าทั่วไปที่ต้องการใช้เวบเป็นเครื่องในการซื้อขายสินค้าและบริการ
หรือที่มักเรียกกันว่า e-commerce เช่น www.amazon.com , www.dell.com ,
www.intel.com เป็นต้น
การบริการค้นหาข้อมูล
เวบเพจประเภทนี้ได้แก่ เวบเพจของเวบไซต์ที่สร้างขึ้นมาเพื่อให้บริการค้นหาข้อมูลทางอินเตอร์เน็ต
หรือที่เราเรียกว่า Search Engine เช่น www.yahoo.com , www.excite.com ,
www.lycos.com เป็นต้น
การถาม-ตอบ หรือแสดงความคิดเห็น
เวบเพจประเภทนี้ได้แก่ เวบไซต์ที่สร้างขึ้นมาเพื่อให้บริการหลังจากการขายของบริษัทขายสินค้าต่างๆ
หรืออาจเป็นเวบเพจของเวบไซต์ที่ให้ยริการฟรีเพื่อสาธารณขน เช่น www.microsoft.com
, www.hp.com , www.sanook.com , www.pantip.com เป็นต้น
การรับ - ส่งจดหมาย
เวบเพจประเภทนี้ ได้แก่ เวบเพจของเวบไซต์ที่สร้างขึ้นมาเพื่อให้บริการการดาว์นโหลดไฟล์ข้อมูล
หรือ ซอฟต์แวร์ มาใช้งานซึ่งมีทั้งแบบฟรี และ เสียค่าใช้จ่าย ได้แก่ www.download.com
, www.macafee.com , www.microsoft.com เป็นต้น
จากที่กล่าวมาทั้งหมดนี้เป้นตัวอย่างเวบไซต์
ซึ่งมีเวบเพจที่ผู้เรียกดูเวบสามารถตอบโต้ข้อมูลข่าวสารกับเวบไซต์ได้ แต่สำหรับการสร้างเวบเพจให้สามารถตอบโต้กับผู้เรียกดูเวบไซต์นั้น
ผู้สร้างและพัฒนาเวบเพจตอบอาศัยส่วนที่เรียกว่า Form เข้ามาช่วย
องค์ประกอบของการสร้างฟอร์ม
Form
ในการสร้าง ฟอร์ม เพื่อสื่อสารกับผู้เรียกดูเวบ มีส่วนประกอบที่สำคัญอยู่
2 ส่วนคือ
การสร้างฟิลด์
ช่องป้อนข้อมูล รวมทั้งปุ่มต่างๆบนฟอร์ม
ในส่วนนี้คือการสร้างองค์ประกอบที่จำเป็นเกี่ยวตอบโต้กับผู้เรียกดูเวบ ได้แก่
ช่องป้อนข้อมูลตัวเลือกในการป้อนข้อมูล หรือปุ่มที่ทำหน้าที่ต่างๆ ซึ่งในขั้นตอนนี้
สำหรับโปรแกรม Dreamweaver แล้วมีเครื่องมือที่ช่วยในการสร้าง Form ได้โดยมีเครื่องมือต่าๆซึ่งอยู่ในคำสั่งภายในวินโดว์
Objects
การสร้างสคริปต์เพื่อทำให้
Form สามารถรับส่งข้อมูลระหว่างเวบกับผู้เรียกดูเวบ
ในส่วนนี้คือการเขียนโปรแกรมด้วยภาษาสคริปต์เพื่อนำข้อมูลที่ถูกป้อนเข้ามาทางหน้าเวบเพจมาเก็บไว้ที่เวบเซิร์ฟเวอร์ซึ่งอาจจะเก็บอยู่ในรูปแบบของฐานข้อมูล
หรือไฟล์ข้อความ จากนั้นจึงนำข้อมูลดังกล่าวมาทำงานต่อไป สำหรับภาษาสคริปต์ในปัจจุบันที่ใช้กันอยู่
ได้แก่ JavaScript , VBScript , Perl Script หรืออื่นๆ โดยต้องเขียนโปรแกรม
เข้าไปเอง เนื่องจากโปรแกรม Dreamweaver นี้ยังไม่มีเครื่องมือในการสร้างสคริปต์ดังกล่าว
การสร้าง
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 ซึ่งจะเป็นการลบข้อความทั้งหมดของฟอร์ม
|