สร้างปุ่มกด 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

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

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

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

ใส่สีสันให้ input สำหรับกรอกข้อมูลของ Form ด้วย CSS

เรื่อง : ใส่สีสันให้ Input กรอกข้อมูลด้วย CSS หลายท่านคงจะเคยเห็น input สำหรับกรอกข้อมูลนะครับ หลายท่านอาจจะพบว่า เอ...ท...  

วิธีการทำรูปพื้นหลัง (Background Image) ของเว็บเพจไม่ให้กระทำซ้ำ

เรื่อง : การทำรูปภาพ Background ไม่ให้กระทำซ้ำ (Background No Repeat) บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป...  

สร้างระยะเยื้องให้บรรทัดแรกของข้อความย่อหน้า (text-indent)

เรื่อง : สร้างระยะเยื้องให้บรรทัดแรกของย่อหน้าด้วย Dreamweaver หลายท่านคงมีปัญหา เมื่อทำการพิมพ์ข้อความที่เป็นเนื้อหาของห...