Create a beautiful input box that meets the user experience_form effects

Today I will talk about my detailed handling and experience of input box processing. In fact, it is not difficult to make an input that is fully compatible with CSS standards, FF/IE7/IE6 and other mainstream browsers and meets the user experience. Click first to see the effect below!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script Home-www.jb51.net form effect</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> <ul class="input_test"> <li> <label for="inp_name">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>Please enter your name</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>Please enter your email</span> </li> <li> <label for="inp_web">Website: </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>Please enter your website</span> </li> </ul>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

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. 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 by

and
• , 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 in 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. Here I would like to express my special thanks to WellFrog in the classic forum for helping me with JS.
  
  It takes much more energy and time to master something than to learn it. The most valuable thing these days is persistence. It is actually very simple to make something that complies with CSS standards, is fully compatible with mainstream browsers such as FF/IE7/IE6, and meets the user experience.