ดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูล ไม่มีอะไรมากครับเพียงใช้ CSS เข้าช่วย เอาล่ะฝอยมากไปแล้วดูตัวอย่างเลยดีว่า

CSS

<STYLE>.search-box{background-image:url('images/zoom.gif');

background-repeat:no-repeat;

padding-left:20px;

}

.mail-box{

background-image:url('images/mail.gif');

background-repeat:no-repeat;

padding-left:20px;

}

</STYLE>

Body

<input type="text" name="search" class="search-box"><br/>

<input type="text" name="search" class="mail-box">

มาดูความหมายของแต่ล่ะบรรทัดของ CSS กันครับ

background-image:url('images/zoom.gif');

บรรทัดนี้เรียก รูป background มาแหม่ะ!กับ TextInput เรา

background-repeat:no-repeat;

บรรทัดนี้สั่งให้ background คงที่ไม่แสดงซ้ำ

padding-left:20px;

บรรทัดนี้สั่งให้ ดันพื้นที่ทางด้านซ้ายขยับไป 20 px จะได้ไม่ไปบัง background icon ที่เราแป่ะไว้ นั่นเอง

คลิกที่นี่ เพื่อดูไฟล์ที่ผมทดสอบดูครับ