JS开发验证表单教程之样式(二)

我们先看一下上节的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
        .sub{width:100px;height:30px;padding-left:0px;}

        .sub:hover{background:#ffaad5;}
        .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
            border:1px solid red;}
    </style>
    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

首先我们来去除  input  框的默认样式

outline属性

完整代码如下:

input{outline:none;}

当我们把光标当在  input  框里面的时候,会很靠左,这样就不好看了,所以我们要把光标的位置距离左边有一定的距离

一般我们使用padding-left,但是会有个问题,使用之后文本框也变长了,这就不是我们想要的效果了

所以当我们在给文本框的光标加上padding-left属性的时候,我们要先写box-sizing:border-box;

box-sizing:border-box;  元素的内边距和外边框不会增加宽度

所以我们文本框的样式完整代码如下:

input{
            outline:none;/*去除文本框的边框*
            box-sizing:border-box;  padding-left:15px;

}

当然文本域也是可以使用的

接下来我们给文本域做一个圆角的功能

border-radius:8px;

文本域我们默认看有下角会有俩条斜线,这个我们也是可以去除的

我们使用resize : none; 就可以吧文本域的斜线去掉

下面我们来看以下写完整的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        input{
            outline:none;
            box-sizing:border-box;padding-left:15px;}
        textarea{
            outline:none;resize : none;
            box-sizing:border-box;padding-left:15px;padding-top:5px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .pwd{width:200px;height:30px;
            margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .txt{
            width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .sub{width:100px;height:30px;padding-left:0px;
            border:none;
            border-radius:5px;background:#ffd0ff;}
        .sub:hover{background:#ffaad5;}
        .div{
            width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>
继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{width:410px;height:400px;background:#46a3ff;padding-left:16px; padding-top:20px;} input{ outline:none; box-sizing:border-box;padding-left:15px;} textarea{ outline:none;resize : none; box-sizing:border-box;padding-left:15px;padding-top:5px;} .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .pwd{width:200px;height:30px; margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .txt{ width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .sub{width:100px;height:30px;padding-left:0px; border:none; border-radius:5px;background:#ffd0ff;} .sub:hover{background:#ffaad5;} .div{ width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;} </style> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密 码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮 箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱 好:</label> <textarea rows="5" cols="40" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>
提交重置代码