制作符合用戶體驗的漂亮的input輸入框_表單特效

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:38:32

制作符合用戶體驗的漂亮的input輸入框_表單特效

制作符合用戶體驗的漂亮的input輸入框_表單特效:今天來說說鄙人對input輸入框在處理上的細節(jié)處理和心得，其實制作一個符合CSS標準、FF/IE7/IE6等主流瀏覽器全兼容、符合用戶體驗的input其實并不難。先點擊看看下面的效果先！腳本之家-www.gxlcms.com表單效果 *{ margin:0; paddi

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀制作符合用戶體驗的漂亮的input輸入框_表單特效:今天來說說鄙人對input輸入框在處理上的細節(jié)處理和心得，其實制作一個符合CSS標準、FF/IE7/IE6等主流瀏覽器全兼容、符合用戶體驗的input其實并不難。先點擊看看下面的效果先！腳本之家-www.gxlcms.com表單效果 *{ margin:0; paddi

今天來說說鄙人對input輸入框在處理上的細節(jié)處理和心得，其實制作一個符合CSS標準、FF/IE7/IE6等主流瀏覽器全兼容、符合用戶體驗的input其實并不難。先點擊看看下面的效果先！

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>腳本之家-www.gxlcms.com表單效果</title> 
<style type="text/css"> 
*{ 
 margin:0; 
 padding:0; 
} 
body{ 
 font-size:63%; 
 color:#000; 
} 
/*input*/ 
.input_on{ 
 padding:2px 8px 0pt 3px; 
 height:18px; 
 border:1px solid #999; 
 background-color:#FFFFCC; 
} 
.input_off{ 
 padding:2px 8px 0pt 3px; 
 height:18px; 
 border:1px solid #CCC; 
 background-color:#FFF; 
} 
.input_move{ 
 padding:2px 8px 0pt 3px; 
 height:18px; 
 border:1px solid #999; 
 background-color:#FFFFCC; 
} 
.input_out{ 
 /*height:16px;默認高度*/ 
 padding:2px 8px 0pt 3px; 
 height:18px; 
 border:1px solid #CCC; 
 background-color:#FFF; 
} 
/*form*/ 
ul.input_test{ 
 margin:20px auto 0 auto; 
 width:500px; 
 list-style-type:none; 
} 
ul.input_test li{ 
 width:500px; 
 height:22px; 
 margin-bottom:10px; 
} 
.input_test label{ 
 float:left; 
 padding-right:10px; 
 width:100px; 
 line-height:22px; 
 text-align:right; 
 font-size:1.4em; 
} 
.input_test p{ 
 float:left; 
 _margin-top:-1px; 
} 
.input_test span{ 
 float:left; 
 padding-left:10px; 
 line-height:22px; 
 text-align:left; 
 font-size:1.2em; 
 color:#999; 
} 
</style> 
</head> 
<body> 
  
 <li> 
  <label for="inp_name">姓名：</label> 
  <p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p><script type="text/javascript" src="https://jss.51dongshi.com/pcwz/wenzhong.js"></script> 
  請輸入您的姓名 
 </li> 
 <li> 
  <label for="inp_email">Email：</label> 
  <p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> 
  請輸入您的Email 
 </li> 
 <li> 
  <label for="inp_web">網(wǎng)站：</label> 
  <p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p> 
  請輸入您的網(wǎng)站 
 </li> 
  
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
鼠標經(jīng)過input時的顏色會發(fā)生變化，此外當點擊標題處（的作用）或者輸入框時，光標停留所在的input的顏色也和其他input輸入框有所不同，這是中JS的作用。在用戶體驗上告訴的用戶什么是可以輸入以及當前在什么輸入位置。此外通過鍵盤上Tab鍵的切換，輸入完當前內(nèi)容移動到下一個輸入框變得更方便了，這是CSS合理布局結(jié)構(gòu)的作用。

整體的結(jié)構(gòu)通過和

來組織，每個

顯示一行內(nèi)容。標簽顯示標題，

input控制輸入框，顯示備注信息。這里要特別說一下在各個瀏覽器下不同的表現(xiàn)，對設(shè)置line-height對FF是不起作用的，所以建議用padding來控制文本在輸入框的位置。在瀏覽器下的默認高度和字體一樣是16px，加上下邊框就是18px。特別是在需要將變大的情況下，用padding來控制比較好。

再來說說JS部分，這里用到onblur（光標離開）、onfocus（光標停留）、onmousemove（鼠標停留）、onmouseout（鼠標離開）這4個屬性來控制鼠標的動作。不會JS也沒關(guān)系，只要定義其所對應(yīng)的CSS樣式就可以了。在這里要特別感謝經(jīng)典論壇中WellFrog給與我JS上的幫助。

精通一樣?xùn)|西比學(xué)會一樣?xùn)|西所付出的精力和時間要多得多，這年頭最值錢的東西就是堅持。制作一個符合CSS標準、FF/IE7/IE6等主流瀏覽器全兼容、符合用戶體驗的東西出來其實也可以很簡單的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

制作符合用戶體驗的漂亮的input輸入框_表單特效

推薦度：

點擊下載本文 文檔為doc格式

標簽：制作特效表單

熱門焦點

制作符合用戶體驗的漂亮的input輸入框_表單特效

制作符合用戶體驗的漂亮的input輸入框_表單特效

制作符合用戶體驗的漂亮的input輸入框_表單特效

最新推薦

猜你喜歡

熱門推薦