| การสร้างฟอร์ม (Form) ใน Dreamweaver | |
| บทความนี้เราจะมาเริ่มต้นสร้างฟอร์มกันค่ะ สำหรับใช้เพื่อต่อยอดในการโปรแกรมภาษา PHP ต่อไป ซึ่งเราสามารถสร้าง Form ในโปรแกรม Dreamweawer ได้ง่าย ๆ ดังนี้ |
| | | |
| | สำหรับฟอร์มเพื่อน ๆ ทุก ๆคนคงจะเห็นกันมาบ้างแล้วในเว็บไซต์ต่าง ๆ ซึ่งโดยปกติแล้ว หากเราทำเว็บแบบ Static Page ธรรมดา ๆ คนทำเว็บก็แค่ทำเว็บ และคนเข้าเยี่ยมชมก็จะเห็นข้อมูล แต่จะไม่สามารถตอบสนองกลับไปได้ แต่การนำฟอร์มเข้ามาใช้ร่วมกับ การโปรแกรม จะทำให้ผู้เยี่ยมชมเว็บ สามารถส่งข้อความหรือข้อมูลกลับไปยังเจ้าของเว็บไซต์ได้ ซึ่งเราจะเห็นฟอร์มอยู่บ่อย ๆ ในเว็บไซต์ต่าง ๆ เช่นในส่วนของ การสั่งซื้อสินค้าและบริการ การสืบค้นข้อมูล การถามตอบ และการส่งอีเมล์ เป็นต้น ซึ่งจะมีอีกหลาย ๆ รูปแบบที่เรานำฟอร์มไปใช้ ซึ่งก็ขึ้นอยู่กับจุดประสงค์ของผู้สร้างเว็บไซต์นั่น ๆ
เอาล่ะ!! เราก็ได้เกริ่นถึงฟอร์มกันไปบ้างแล้ว ทีนี้ก็มาถึงการเริ่มต้นสร้างฟอร์มกันค่ะ เริ่มแรกเลยก็คือให้เปิดโปรแกรม Dreamweaver ขึ้นมา โดยไปที่ File ---> New ...
| |
| | |
| | 
| |
| | | |
เมื่อสร้างไฟล์ใหม่แล้ว เราก็จะมาเริ่มสร้าง Form ตามขึ้นตอนดังนี้
1. คลิกที่คำสั่ง Insert--->Form จากเมนูบาร์ ขึ้นตอนนี้คุณจะสังเกตได้ว่าจะมีเส้นปะกรอบสีแดง ๆ เกิดขึ้น ให้สังเกตดูในส่วนของ Properties ที่บริเวณด้านล่าง จะมีส่วนของ Form Name ให้ทำการตั้งชื่อฟอร์มตามวัตถุประสงของการสร้างฟอร์ม ในที่นี้เราจะสร้างฟอร์มเตรียมไว้สำหรับกรอกข้อมูลนักศึกษา จึงขอตั้งชื่อว่า student
2. หลังจากตั้งชื่อฟอร์มเสร็จแล้ว เราจะมาสร้างตาราง (Table) เพื่อเตรียมพื้นที่ในการวางข้อมูล โดยสร้างตารางดังรูปลงในฟอร์ม (สังเกตุ ต้องสร้างข้างในกรอบเส้นปะสีแดงเท่านั้น) พร้อมกับเขียนข้อความตามรภาพที่ 1 ซึ่งฟอร์มที่เราจะสร้างนี้ จะเก็บข้อมูลของนักเรียน ในส่วนของรหัสประจำตัวนักเรียน พร้อมทั้งชื่อและนามสกุลของนักเรียน
|
| | 
| |
| | | |
3. เราจะสร้าง Input Form สำหรับกรอกข้อมูล ซึ่งสามารถสร้างได้โดยใช้คำสั่ง Insert--->Form Objects---> Text Field จากเมนูบาร์ โดยสร้างทั้งหมด 3 ฟิลด์ ตามตัวอย่างดังภาพที่ 2 จากนั้นเราจะมากำหนดค่าต่าง ๆ ที่จำเป็นให้กับ Text Field แต่ละอัน ตามรายละเอียดดังนี้
Text Field เป็นการกำหนดชื่อฟิลด์ ให้ตั้งชื่อให้สื่อความหมายในที่นี้ขอตั้งชื่อเป็น id, name, surname ตามลำดับ
Char Width เป็นการกำหนดขนาดความกว้างของฟิลด์ในที่นี้ขอตั้งเป็น 20, 35, 35 ตามลำดับ จริง ๆ แล้วในส่วนนี้ก็แล้วแต่จะกำหนด ในการใช้งานจริงก็ขึ้นอยู่กับความกว้างของพื้นที่ ๆ ต้องการแสดงผลเป็นหลัก
Max Chars เป็นการกำหนดจำนวนอักขระที่สามารถใส่ได้ในฟิลด์ ซึ่งกำหนดได้ตามความเหมาะสม เช่น หากเป็นรหัสนักเรียนที่ความเป็นจริงมีแค่ 10 หลัก ในช่องนี้เราก็กำหนดค่า Max Chars เท่ากับ 10
Single line เป็นการกำหนดให้ฟิลด์มีแค่แถวเดียว
|
| | 
| |
| | | |
4. เราจะสร้าง Form Object อีกแบบนั้นก็คือแบบ ปุ่ม โดยให้เราเพื่อแถวขึ้นมาอีกแถว ดังภาพที่ 4 จากนั้นให้ใช้คำสั่ง Insert--->Form Objects--->ฺีButton จะได้ปุ่มดังรูปที่ 4 จากนั้นเราสามารถเปลี่ยนชื่อปุ่ม เปลี่ยนชื่อข้อความบนปุ่ม และเลือกประเภทการทำงานของปุ่ม ตามภาพที่ 5
การสร้าง Form ก็เสร็จแล้วค่ะ ซึ่งเราจะสามารถนำฟอร์มนี้ไปโปรแกรม เพื่อให้สามารถใช้งานตามวัตถุประสงค์ที่ต้องการได้ สำหรับหน้าตาผลลัพธ์ ก็สามารถดูได้โดยการกดปุ่ม F12 ซึ่งจะได้ผลลัพตามภาสุดท้าย .... แล้วอย่าลืม Save เก็บไว้ด้วยนะค่ะ เดียวเราจะเอาฟอร์มนี้ไปใช้ในการเขียนภาษา PHP เพื่อเก็บข้อมูลลงดาต้าเบสต่อ ติดตามได้ในบทความในส่วนของ PHP & MySQL เร็ว ๆ นี้ค่ะ
|
ขอบคุณ Web
http://www.thainextstep.com/dreamweaver/dream_article.php?articlecat=1&articleid=95
ไม่มีความคิดเห็น:
แสดงความคิดเห็น