Some good example codes for form effects on the website-CSS Tutorial-php.cn

Some good example codes for form effects on the website

伊谢尔伦

Release： 2017-06-16 10:44:49

Original

1021 people have browsed it

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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></p>
<span>请输入您的网站</span>
</li>
</ul>
</body>
</html>

Copy after login

The color of the input will change when the mouse passes over it. In addition, when you click on the title (the role of ) 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 . 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

, each
displays one line of content. The label displays the title,
input controls the input box, and displays the remark information. Here I would like to talk about the different performances of in various browsers. Setting line-height for has no effect on FF, so it is recommended to use padding to control the position of the text in the input box. The default height under the browser is 16px, which is the same as the font. Adding the bottom border is 18px. Especially when the 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!