Un title page
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
Un title page
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
Un title page
สอน Dreamweaver
  ทำความรู้จัก Dreamweaver
  การสร้าง Site
  การกำหนดคุณสมบัติพื้นฐาน
  การสร้าง CSS Style
  การเรียกใช้งาน CSS Style
  การใส่สี Background
  การใส่ลิงค์ข้อความและรูป
  การสร้างตาราง
  การปรับแต่งตาราง
  การใส่คำอธิบายให้รูปภาพ
  การเพิ่มอักขระพิเศษ
  การทำภาพ Swap Image
 


  การสร้างฟอร์ม (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 เร็ว ๆ นี้ค่ะ

 
 
     

   
   
วันที่บทความ : 16 พ.ค. 2552              ที่มา : Webmaster

สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::