Home >Web Front-end >CSS Tutorial >Some good example codes for form effects on the website
Some good example codes for form effects on the website
- 伊谢尔伦Original
- 2017-06-16 10:44:491056browse
Today, let’s talk about the detailed processing and experience of the input input box. In fact, it is not difficult to make an input that is fully compatible with mainstream browsers such as CSS standards, FF/IE7/IE6, etc. and meets the user experience. Click first to see the effect below!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单效果</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>
<ul class="input_test">
<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>
<span>请输入您的姓名</span>
</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>
<span>请输入您的Email</span>
</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>
<span>请输入您的网站</span>
</li>
</ul>
</body>
</html>The color of the input will change when the mouse passes over it. In addition, when you click on the title (the role of 2e1cf0710519d5598b1f0f14c36ba674) or the input box, the color of the input where the cursor stays is also different from other input boxes. Different, this is the role of JS in d5fd7aea971a85678ba271703566ebfd. The user experience tells the user what can be input and where the input is currently. In addition, by switching the Tab key on the keyboard, it becomes more convenient to move to the next input box after entering the current content. This is the role of CSS's reasonable layout structure.
The overall structure is organized through ff6d136ddc5fdfeffaf53ff6ee95f185 and 25edfb22a4f469ecb59f1190150159c6, each 25edfb22a4f469ecb59f1190150159c6 displays one line of content. The 2e1cf0710519d5598b1f0f14c36ba674 label displays the title, e388a4556c0f65e1904146cc1a846beeinput controls the input box, and 45a2772a6b6107b401db3c9b82c049c2 displays the remark information. Here I would like to talk about the different performances of d5fd7aea971a85678ba271703566ebfd in various browsers. Setting line-height for d5fd7aea971a85678ba271703566ebfd has no effect on FF, so it is recommended to use padding to control the position of the text in the input box. d5fd7aea971a85678ba271703566ebfdThe default height under the browser is 16px, which is the same as the font. Adding the bottom border is 18px. Especially when the d5fd7aea971a85678ba271703566ebfd needs to be made larger, it is better to use padding to control it.
Let’s talk about the JS part. The four attributes onblur (cursor leaves), onfocus (cursor stays), onmousemove (mouse stays), and onmouseout (mouse leaves) are used to control the movement of the mouse. It doesn’t matter if you don’t know JS, as long as you define the corresponding CSS style.
The above is the detailed content of Some good example codes for form effects on the website. For more information, please follow other related articles on the PHP Chinese website!