หน้าเว็บ

วันพฤหัสบดีที่ 27 พฤษภาคม พ.ศ. 2553

การใช้งานอ็อบเจ็คต์ของฟอร์มชนิดต่างๆ ใน Dreamweaver

     อ็อบเจ็คต์ คือส่วนของฟอร์มที่ใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะแทรกอ็อบเจ็คต์ลงบนเว็บเพจ ต้องมีการสร้างหรือแทรกฟอร์มลงในเว็บเพจก่อนเสมอ หากมีการแทรกอ็อบเจ็คต์ลงในส่วนที่ไม่มีฟอร์ม Dreamweaver จะถามโดยปรากฏไดอะล็อก “Add form tags?” ให้เลือก Yes เพื่อให้ Dreamweaver สร้างแท็กฟอร์มสำหรับอ็อบเจ็คต์นั้น

การใช้งานอ็อบเจ็คต์ Text Field

อ็อบเจ็คต์ชนิด Text Field จะมีหน้าที่ในการรับค่าข้อมูล เพื่อใช้ในการจัดเก็บข้อมูลหรือส่งค่าบางอย่างที่ต้องการค้นหา เช่น ใช้ในการค้นหาข้อมูล (Search Engine) เป็นต้น

วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Text Field เสร็จแล้วให้กำหนดคุณสมบัติของ Text Field โดยให้คลิกเลือกที่ Text Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Text Field แสดงในไดอะล็อก Properties

 

คุณสมบัติของอ็อบเจ็คต์ Text Field:


• TextField กำหนดชื่อของอ็อบเจ็คต์ Text Field

• Char Width กำหนดความกว้างของ Text Field

• Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Text Field

• Type กำหนดชนิดของ Text Field มี 3 ลักษณะ คือ

o Single Line กำหนดให้แสดงเป็นแบบบรรทัด (Textarea)

o Multi Line กำหนดให้แสดงเป็นแบบหลายบรรทัด

o Password กำหนดให้แสดงแบบรหัสผ่าน

• Init Val กำหนดค่าเริ่มต้น

การใช้งานอ็อบเจ็คต์ Textarea


อ็อบเจ็คต์ชนิด Textarea จะมีหน้าที่ในการรับค่าข้อมูลที่มีขนาดใหญ่ เช่น ที่อยู่ เป็นต้น

วิธีการสร้าง Text Field ทำได้โดยการคลิกเมนู Insert > Form > Textarea เสร็จแล้วให้กำหนดคุณสมบัติของ Textarea โดยให้คลิกเลือกที่ Textarea ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Textarea แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Textarea:


• TextField กำหนดชื่อของอ็อบเจ็คต์ Textarea

• Char Width กำหนดความกว้างของ Textarea

• Max Chars กำหนดจำนวนตัวอักษรสูงสุดที่กรอกข้อมูลได้ของ Textarea

• Type กำหนดชนิดของ Textarea คือ Multi Line

• Init Val กำหนดค่าเริ่มต้น
 
 

การใช้งานอ็อบเจ็คต์ Button


อ็อบเจ็คต์ชนิด Button มักถูกนำมาใช้เพื่อทำหน้าที่ในการยืนยันการเพิ่มข้อมูล แก้ไขข้อมูล การลบข้อมูล หรือยกเลิกการใช้งาน

วิธีการสร้าง Button ทำได้โดยการคลิกเมนู Insert > Form > Button เสร็จแล้วให้กำหนดคุณสมบัติของ Button โดยให้คลิกเลือกที่ Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Button แสดงในไดอะล็อก Properties



คุณสมบัติของอ็อบเจ็คต์ Button:


• Button name กำหนดชื่อของอ็อบเจ็คต์ Button

• Label กำหนดข้อความที่จะแสดงบนปุ่ม Button

• Action กำหนดชนิดของ Action มี 3 ลักษณะ คือ

o Submit Form กำหนดให้ใช้สำหรับส่งฟอร์มไปประมวลผล

o Reset Form กำหนดให้ใช้สำหรับยกเลิกการกรอกข้อมูลในฟอร์ม

o None กำหนดให้เป็นปุ่มที่คลิกแล้วไม่ทำงานใดๆ
 
การใช้งานอ็อบเจ็คต์ Check Box


อ็อบเจ็คต์ชนิด Check Box ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้มากกว่า 1 ตัวเลือก

วิธีการสร้าง Check Box ทำได้โดยการคลิกเมนู Insert > Form > Check Box เสร็จแล้วให้กำหนดคุณสมบัติของ Check Box โดยให้คลิกเลือกที่ Check Box ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Check Box แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Check Box:


• CheckBox กำหนดชื่อของอ็อบเจ็คต์ Check Box

• Checked Value กำหนดค่าให้ Check Box

• Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ

o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้

o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
 
การใช้งานอ็อบเจ็คต์ Radio Button


อ็อบเจ็คต์ชนิด Radio Button ทำหน้าที่เพื่อแสดงตัวเลือกให้ผู้ใช้ได้เลือกตัวเลือกที่กำหนดให้ ซึ่งสามารถเลือกได้เพียง 1 ตัวเลือกเท่านั้น เช่น การเลือกระบุเพศ ชาย หรือ หญิง จะเป็นการเลือกเพศใดเพศหนึ่งเพียงเพศเดียวเท่านั้น

วิธีการสร้าง Radio Button ทำได้โดยการคลิกเมนู Insert > Form > Radio Button เสร็จแล้วให้กำหนดคุณสมบัติของ Radio Button โดยให้คลิกเลือกที่ Radio Button ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Radio Button แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ Radio Button:


• RadioButton กำหนดชื่อของอ็อบเจ็คต์ Radio Button หากเป็นการเลือกอย่างใดอย่างหนึ่ง จากตัวเลือกตั้งแต่ 2 ตัวขึ้นไป จะต้องกำหนดชื่อของ Radio Button ทุกตัวให้ชื่อเหมือนกัน มิฉะนั้น การทำงานของ Radio Button จะไม่ถูกต้อง

• Checked Value กำหนดค่าให้ Radio Button

• Initial State กำหนดสถานะเริ่มต้นเมื่อแสดงบนเว็บเพจ มี 2 ลักษณะ คือ

o Checked กำหนดให้เริ่มต้นโดยให้สถานะเป็นถูกเลือกไว้

o Unchecked กำหนดให้เริ่มต้นโดยสถานะไม่ให้ถูกเลือก
 
การใช้งานอ็อบเจ็คต์ List/Menu


อ็อบเจ็คต์ชนิด List/Menu ทำหน้าที่เพื่อกำหนดค่าโดยที่ใช้ไม่ต้องพิมพ์ตัวเลือกที่ต้องการลงไป เพียงแค่คลิกเลือกรายการต่างๆ ที่ไดกำหนดไว้ให้แล้วเท่านั้น สามารถเลือกได้เพียง 1 ตัวเท่านั้น

วิธีการสร้าง List/Menu ทำได้โดยการคลิกเมนู Insert > Form > List/Menu เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ List/Menu ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ List/Menu แสดงในไดอะล็อก Properties
 
 

คุณสมบัติของอ็อบเจ็คต์ List/Menu:


• List/Menu กำหนดชื่อของอ็อบเจ็คต์ List/Menu

• Type เลือกการทำงานเป็นแบบ Menu หรือ List

• Initially Selected แสดงค่าตัวเลือกที่กำหนดมาจาก List Values

การใช้งานอ็อบเจ็คต์ File Field

อ็อบเจ็คต์ชนิด File Field นี้ ทำหน้าที่ในการแสดงรายชื่อไฟล์ต่างๆ เพื่อให้ผู้ใช้เว็บไซต์สามารถเลือกไฟล์เหล่านั้นขึ้นมาใช้งาน เช่น การอัปโหลดไฟล์ เป็นต้น
วิธีการสร้าง File Field ทำได้โดยการคลิกเมนู Insert > Form > File Field เสร็จแล้วให้กำหนดคุณสมบัติของ File Field โดยให้คลิกเลือกที่ File Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ File Field แสดงในไดอะล็อก Properties


คุณสมบัติของอ็อบเจ็คต์ File Field:


• FileField กำหนดชื่อของอ็อบเจ็คต์ File Field

• Char Width กำหนดความกว้างของ File Field

• Max Chars กำหนดจำนวนตัวอักษรสูงสุด
 
การใช้งานอ็อบเจ็คต์ Hidden Field


อ็อบเจ็คต์ชนิด Hidden Field นี้ จะทำงานในลักษณะล่องหน กล่าวคือ มีจุดประสงค์เพื่อใช้ในการประมวลผลข้อมูล ที่ได้รับจากการใช้งานฟอร์มต่างๆ ซึ่งฟิลด์แบบ Hidden Field นี้ จะไม่มีการติดต่อสื่อสารกับผู้ใช้งานฟอร์ม แต่อย่างใด รวมทั้งไม่มีการแสดงผลบนหน้าเว็บเพจด้วย

วิธีการสร้าง Hidden Field ทำได้โดยการคลิกเมนู Insert > Form > Hidden Field เสร็จแล้วให้กำหนดคุณสมบัติของ Hidden Field โดยให้คลิกเลือกที่ Hidden Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Hidden Field แสดงในไดอะล็อก Hidden Field
 
 

คุณสมบัติของอ็อบเจ็คต์ Hidden Field:


• HiddenField กำหนดชื่อของอ็อบเจ็คต์ Hidden Field

• Value กำหนดค่าเริ่มต้นสำหรับ Hidden Field
 
การใช้งานอ็อบเจ็คต์ Image Field


อ็อบเจ็คต์ชนิด Image Field นี้ เราสามารถใส่รูปลงในฟอร์มเพื่อทำให้เว็บเพจนั้นดูมีสีสันดูสวยงามขึ้นยิ่งขึ้น หรืออาจใช้ประโยชน์ในการใช้แทนปุ่ม Button ก็ได้

วิธีการสร้าง Image Field ทำได้โดยการคลิกเมนู Insert > Form > Image Field เสร็จแล้วให้กำหนดคุณสมบัติของ List/Menu โดยให้คลิกเลือกที่ Image Field ในเว็บเพจ หลังจากนั้นให้ไปที่เมนู Window > Properties จะปรากฏคุณสมบัติของ Image Field แสดงในไดอะล็อก Image Field
 
 
คุณสมบัติของอ็อบเจ็คต์ Image Field:


• ImageField กำหนดชื่อของอ็อบเจ็คต์ Image Field

• W กำหนดค่าความกว้างของ Image Field ที่แสดง

• H กำหนดค่าความสูงของ Image Field ที่แสดง

• Src ชื่อไฟล์รูปภาพของ Image Field ที่แสดง

• Alt กำหนดข้อควาที่จะใช้แสดงแทน ในกรณีที่ไม่พบไฟล์รูปภาพ

• Align กำหนดตำแหน่งการแสดง Image Field

1 ความคิดเห็น:

  1. มีประโยชน์มากๆเลยครับ ขอบคุณนะครับ

    ตอบลบ