ฟอร์ม (Form) ตอนที่ 1

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 ซึ่งจะเป็นการลบข้อความทั้งหมดของฟอร์ม


<< [ BACK ] [ NEXT ] >>

Copy Right © 2002"JesuswOrK" , All rights reserved.
These web sites are best viewed with an 800 x 600 screen resolution.
Web site designed by webmaster
  tel : (054) - 312281
1 1