Tài liệu Form Liên hệ nổi lên khi trỏ dấu nháy vào Hiệu ứng đẹp cho form liên hệ . pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (51.83 KB, 2 trang )
Form Liên hệ nổi lên khi trỏ dấu nháy vào
Hiệu ứng đẹp cho form liên hệ .
Chỉ cần vài dòng CSS là ok
demo : />Bước 1 : CSS - Copy đoạn code bên dưới vào dán vào thẻ head
PHP Code:
<style type="text/css">
body{
font-family: verdana,font-size: 12px;color: #FFFFFF;background-
color:#ffffff}
.en1 {
font-size: 10px;font-family: Verdana
}
.input1{
font-family: verdana;background-color: #EEEEEE;border-
bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-
right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-
size: 12px;
}
.input1-bor {
font-family:verdana;background-color:#F0F8FF;font-size: 12px;
border: 1px solid #333333;}
</style>
<style type="text/css">
<!--
.en1 {font-size: 10px;font-family: Verdana
}
.input1 {font-family: verdana;background-color: #EEEEEE;border-
bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-
right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-
size: 12px;
}
.style2 {color: #000000}
-->
</style>
Bước 2: Chèn hiệu ứng cho text field
PHP Code:
<input size=40 name=name class="input1" onblur="this.className='inp
ut1'" onfocus="this.className='input1-bor'">
Code mẫu
PHP Code:
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><span class="style2">Lien He</span></td>
</tr>
<tr>
<td width="100"> </td>
<td width="400"><input size=40 name=name class="input1" onblu
r="this.className='input1'" onfocus="this.className='input1-
bor'"></td>
</tr>
<tr>
<td> </td>
<td><input size=40 name=name class="input1" onblur="this.clas
sName='input1'" onfocus="this.className='input1-bor'"></td>
</tr>
<tr>
<td> </td>
<td><input size=40 name=name class="input1" onblur="this.clas
sName='input1'" onfocus="this.className='input1-bor'"></td>
</tr>
<tr>
<td> </td>
<td><input size=40 name=name class="input1" onblur="this.clas
sName='input1'" onfocus="this.className='input1-bor'">
;</td>
</tr>
</table>
</form>
