ปุ่ม Submit ในฟอร์มถ้าเราไม่กำหนด value ของปุ่มก็จะแสดงข้อความเป็น Submit Query โอ้ยๆ ไม่ปลื้ม มาทำให้ ปลื้มกันดีกว่า

เปิดประเด็นได้ งง เช่นเคย ด้วยความบังเอิญอีกแล้ว ขณะที่ผมนั่งเขียนโค๊ด php เล่นๆ ฆ่าเวลาก่อนเลิกงาน แล้วเกิดคิดสนุกขึ้นมาได้อย่างนึง  ทุกท่านเคยลองกันไหมครับว่า ถ้าเราไม่ต้องการให้ ปุ่ม Submit ในฟอร์มของเรามันมีข้อความ  Submit หรือ ว่าถ้าเราไม่กำหนด value ของปุ่มก็จะแสดงข้อความเป็น Submit Query   โอ้ยๆ ไม่ปลื้ม หรือ
เราจะใส่รูปเข้าไปแทนเจ้าปุ่มหน้าตาเดิมๆ อันนี้ จะทำยังไง ให้ข้อความหน้าเบื่ออันนี้หายไปเสียที  ฮืม  ขยิบตา คิดๆ
แล้วก็ได้คำตอบครับ  ยิงฟันยิ้ม ก็ใช้ CSS กำหนดมันเลย ตามนี้

 

<style>
   .button_save {
         background: url(001_06.gif) no-repeat;
         border:none;
         width:24px;
         height:24px;
         cursor: pointer;
         text-indent: -999em;
         font-size: 0px;
         display: block;
         line-height: 0px;  
}
</style>

โค๊ดอันนี้เขียนแบบ บ้านๆนะครับ เพราะผมไม่ใช่โปรแกรมเมอร์อาชีพ อิอิ มาดูกันทีละบรรทัดดีกว่าว่าเขียนอะไรเข้าไปเนี่ย
ส่วนของ
      
         background: url(001_06.gif) no-repeat;
         width:24px;
         height:24px;
         border:none;

อันนี้ผมใส่รูปให้พื้นหลังปุ่ม background: url(001_06.gif)  001_06.gif คือชื่อรูป  แล้วก็สั่งว่าไม่ต้องทำซ้ำ no-repeat; และที่ขาดไม่ได้เลย คือ
border:none; นี่คือการกำหนดให้รูปภาพไม่มีเส้นขอบ แล้วก็กำหนด ขนาดกันสักหน่อยเพื่อความสมบูรณ์
 กว้างคือ width:24px;   สูงคือ height:24px;  << ตรงนี้เปลี่ยนตามขนาดของรูปที่จะเอามาทำพื้นหลังได้เลยนะครับ

ส่วนท้ายสุดและสุดท้าย คือ

         cursor: pointer;
         text-indent: -999em;
         font-size: 0px;
         display: block;
         line-height: 0px;

ส่วนนี้คือ การกำหนดให้เมื่อเอาเมาส์ไปวางอยู่เหนือปุ่มแล้วให้ เปลี่ยนตัวชี้เป็นรูปมือ เพื่อความแนว

แถมๆ ตัวอย่างแบบเต็มๆครับ ลองเอาไปใช้กันดูนะครับ




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Hidden Text Submit  Form </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="By kin at comhelp.co.cc">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
   .button_save {
         background: url(001_06.gif) no-repeat;
         border:none;
         width:24px;
         height:24px;
         cursor: pointer;
         text-indent: -999em;
         font-size: 0px;
         display: block;
         line-height: 0px;   
}
</style>
</HEAD>
<BODY>
<INPUT TYPE="submit" class="button_save">
</BODY>
</HTML>
ท้ายสุด ขอให้มีความสุขและสนุกกับสิ่งที่ท่านทำนะครับ  ยิ้มเท่ห์