在之前的一篇文章我們提到按鈕的實現，今天我們來說一下同樣很常用的文本框<input>的用途，在網頁中我們經常會看到文本輸入框，結合上一篇的按鈕實現，那麼文本框和按鈕的結合我們可以用來做什麼呢？
1.首先我們可以想到登錄框的實現，一個登錄框通常包括文本輸入框、登錄/註冊按鈕、選擇是否下次登錄，選項框我們會在下一篇文章詳細介紹，首先我們來實現一個簡單的登錄窗口，效果圖如下：
廢話不多說，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>文本框切圖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.login{
width: 300px;
padding: 30px;
border-radius: 4px;
border:1px solid #ccc;
font-family:"微軟雅黑";
}
.login span{display: block;margin-bottom: 20px;}
.login input{
width: 220px;
border: 1px solid #ccc;
border-radius: 4px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
margin-bottom: 20px;
color: #999;
}
.user_mes{background: url('images/user_icon.png') 12px center no-repeat;}
.psw_mes{background: url('images/pass_icon.png') 12px center no-repeat;}
.login_btn{
display: block;
text-align: center;
text-decoration: none;
color: #fff;
width: 220px;
padding: 10px 20px;
background-color: #63b7ff;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- 常見登錄輸入框形式 -->
<div class="login">
<span>登錄</span>
<input class="user_mes" type="text" value="" placeholder="請輸入賬號" />
<input class="psw_mes" type="password" placeholder="請輸入密碼" />
<a class="login_btn" href="">登錄</a>
</div>
</body>
</html>
相信大家看了這兩篇文章後都能做出來，我們做的是另外一種，效果如下：
由於搜索圖標是可點擊的，所以不能將圖標做成文本框的背景，通常的做法是將文本框和搜索按鈕獨立成兩個部分，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#search_meg{
width: 220px;height: 28px;
border: 1px solid #ccc;
color: #ccc;
border-radius: 4px 0 0 4px;
border-right: none;
float: left;
outline: none;
padding-left: 8px;
}
.search_btn{
display: inline-block;
width: 28px;
height: 30px;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
border-left: none;
background: url('images/search.png') no-repeat center center;
float: left;
}
</style>
</head>
<body>
<!--將搜索框分成文本框和鏈接的形式-->
<input type="text" name="search" value="請輸入搜索信息" id="search_meg"></input>
<a href="#" class="search_btn"></a>
</body>
<script type="text/javascript">
var obj=document.getElementById('search_meg');
obj.οnfοcus=function(){
if (obj['value']='請輸入搜索信息') {
obj['value']='';
obj.style['color']='#333';
}
}
obj.οnblur=function(){
if (this['value']==''|| this['value']=='請輸入搜索信息') {
this['value']='請輸入搜索信息';
this.style['color']='#ccc';
}
}
</script>
</html>Author：事始
Sign：只要你還在嘗試，就不算失敗。