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

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

การลบ Tag/Code ของ HTML ที่ไม่จำเป็นออก (Clean up HTML)

เรื่อง: ลบ Tag/Code ของ HTML ที่ไม่จำเป็นออกจาก Source Code บางครั้งการสร้าง Web Page โดยใช้โปรแกรม Dreamweaver ตัวโปรแ...  

ตรวจสอบโค้ด HTML ว่าได้มาตรฐานหรือไม่

เรื่อง : ตรวจสอบมาตรฐานของ HTML Code ด้วย Dreamweaver โค้ด HTML ที่ใช้ในการพัฒนาเว็บ...  

การแปลง CSS ในแบบ Inline Style Sheet ให้เป็น Internal หรือ External Style Sheet

เรื่อง : การใช้ Convert Inline CSS to Rule เปลี่ยน CSS การเขียน CSS เพื่อทำการตบแต่งเว็บเพจ บางครั้งนักพัฒนาเว็บชอบที่จ...  

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

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