สร้างฟอร์มล้อกอินสวยๆ ด้วย CSS

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

อันที่จริงแล้วมันก็เป็นฟอร์มธรรมดานั่นแหละครับ เพียงแต่ใช้ CSS เซ็ตภาพพื้นหลังให้กับ ช่องป้อนข้อมูล แบบไม่ต้องรีพีต แล้วก็เซตให้กั้นด้านซ้ายซะหน่อย เวลาพิมพ์จะได้ไม่ทับลงบนรูป

ดูโค้ด ผมทำสีเน้นเฉพาะที่สำคัญนะครับ จะได้ดูง่าย

<style type=“text/css”>
<!–
.username {

/* เซตภาพพื้นหลังให้กับ ช่องป้อนข้อมูล*/
background-image: url(images/icons/icon_user.gif);

/*ไม่ต้องรีพีต เดี๋ยวมันเป็นภาพเรียงซ้อนกันเต็ม ช่อง*/
background-repeat: no-repeat;

/*กั้นหน้าซะหน่อย เวลาพิมพ์ ตัวหนังสือจะได้ไม่ทับลงบนภาพพื้นหลัง*/
padding-left: 20px;
}
.password {
background-image: url(images/icons/bullet_key.png);
background-repeat: no-repeat;
padding-left: 20px;

}
–>
</style>

<form id=”form1″ name=”form1″ method=”post” action=””>
<table width=”270″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#f1f1f1″>
<tr>
<td colspan=”2″><strong>Login</strong></td>
</tr>
<tr>
<td width=”33%” align=”right”>UserName : </td>
<td width=”67%”><input name=”txt_username” type=”text” class=”username” id=”txt_username” size=”20″ />
</td>
</tr>
<tr>
<td align=”right”>Password :</td>
<td><input name=”txt_password” type=”text” class=”password” id=”txt_password” size=”20″ />
</td>
</tr>
<tr>
<td align=”right”>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align=”right”>&nbsp;</td>
<td><button type=”button” name=”button” id=”button” ><img src=”images/icons/disk.png” alt=””

width=”16″ height=”16″ align=”absmiddle” /> บันทึก</button></td>
</tr>
</table>
</form>

ผลลัพก็จะออกมา ดังภาพ ด้วยประการ ฉะนี้แล ง่ายๆ แต่ได้สาระ ใช่ม้า……..

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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