HTML漂亮的表单效果

<!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>
除非注明, 风波竹林 文章均为原创,转载请以链接形式标明本文地址
本文地址: https://blog.fbzl.org/html漂亮的表单效果/