สร้างปุ่มกด Submit ของ Form ด้วยรูปภาพ [Article ID : 52]

เรื่อง : การสร้างปุ่ม Submit แบบใช้รูปภาพด้วย Dreamweaver

เห็นตามเว็บบอร์ดต่าง ๆ มักมีผู้สนใจอยากจะทำปุ่ม Submit ของ Form โดยการใช้รูปภาพแทนปุ่มกดปรกติที่ Web Browser แสดงผล ทั้งนี้ก็เพื่อเพิ่มความสวยงาน และความน่าสนใจให้แก่ฟอร์มกรอกข้อมูลหน้าเว็บ

ผมก็เห็นว่าน่าสนใจดี และตัว Dreamweaver เองก็สามารถทำได้ง่าย ๆ อยู่แล้ว โดยที่เราไม่ต้องเขียน Code อะไรเลยครับ บทความนี้ก็เลยขอมาแนะนำวิธีการทำปุ่มในรูปแบบดังกล่าวกัน ด้านล่างนี้คือตัวอย่างครับ..

ขั้นตอนการสร้างปุ่ม Submit ด้วยรูปภาพ

ก่อนอื่นให้เตรียมไฟล์รูปภาพ รูปไม่ต้องใหญ่มาก ใช้รูปประเภทพวก Icon เล็ก ๆ พอ และสร้าง Form รวมถึง Input ต่าง ๆ ให้เสร็จก่อนนะครับ ดังนี้

1. ให้คุณเตรียมรูปภาพที่จะนำมาทำเป็นปุ่มกด Submit เช่น  
2. จากนั้นให้คุณทำการสร้าง Form ที่คุณต้องการให้เสร็จสิ้นเสียก่อน
3. เมื่อทำการสร้าง Form และ Input ต่าง ๆ เสร็จสิ้นแล้ว ให้ไปที่ Panel ที่ชื่อว่า Insert แล้วเลือกไปที่ TAB ที่ชื่อว่า Forms จากนั้น Click เลือกไปที่ icon ที่ชื่อว่า Image Field/Image Button (อาจแตกต่างจากในรูป ขึ้นอยู่กับเวอร์ชั่นของ Dreamweaver ที่คุณใช้งาน) ดังรูป

*สำหรับ Dreamweaver CC ใช้ Image Button ดั่งรูป

4. เมื่อเลือกที่ไอคอนดังกล่าวแล้ว จะมีหน้าต่างเปิดใหม่ออกมา ให้เราทำการเลือกไฟล์รูปภาพที่เราเตรียมไว้ในข้อที่ 1
5. เมื่อเราเลือกไฟล์รูปภาพที่เราต้องการได้เป็นที่เรียบร้อยแล้วก็กด OK เป็นอันเสร็จสิ้นการนำไฟล์รูปมาทำเป็นปุ่ม Submit แล้วครับ ง่ายไหม ?

:: การปรับแต่ง ::

หากคุณต้องการปรับแต่งคุณสมบัติของรูปภาพที่นำมาวางนั้นเพิ่มเติม ให้คุณทำการ Click ที่รูปภาพนั้น จากนั้นให้ไปที่ Properties ดังรูป

ก็เสร็จสิ้นแล้วครับ สำหรับการนำเอารูปภาพมาใช้เป็นปุ่ม Submit ของ Form เพื่อให้สวยงามดูน่าใช้มากยิ่งขึ้น แต่ทั้งนี้และทั้งนั้น...รูปที่เรานำมาใช้ ควรให้สื่อสารสักนิดนะครับว่า นี่คือปุ่มกด ไม่ใช่รูปภาพ มิฉะนั้น...คนเข้าเว็บเราอาจจะสับสนได้ครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 3 [จบ]

เรื่อง : สร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 3 [จบ] ในตอนที่ 2 ของบทความเรื่องนี้ เรา...  

วิธีการสร้างกรอบข้อความด้วย CSS (CSS Border)

เรื่อง : การใช้ CSS เพื่อสร้างกรอบข้อความ (CSS Border) เส้นกรอบ หรือ Border ที่จะพูดถึงในบทความนี้ คือ...  

การกำหนด Class ของ CSS มากกว่า 1 คลาสด้วย Apply Multiple Classes

เรื่อง : การกำหนดคลาส CSS ให้แก่ Element ที่ต้องการใช้ Class มากกว่า 1 คลาส Class Selector ของ CSS นั้น ...  

การ Export สไตล์ชีต CSS ที่อยู่ในเว็บเพจไปเป็นไฟล์ CSS (External Style Sheet)

เรื่อง : Export โค้ด CSS ไปเป็น External Style Sheet ด้วย Dreamweaver โค้ด CSS ที่ได้สร้างไว้กับไฟล์เว...