HTML5——表单美化

闲聊：  

      今天小颖在跟着慕课网学习：表单美化 看完了自己跟着敲了敲，顺便做个笔记嘻嘻，好记性不如烂笔头，脑子记不住，就写成笔记，以后也方便查看，嘻嘻。

正文：

1.表单美化_单选按钮篇

2.表单美化_复选按钮篇

3.表单优化_文本框篇

表单美化_单选按钮篇

目录：

效果图：

第一步：

保存图片：radiobutton.gif

第二步：

新建公用css：public.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}

fieldset, img {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol, ul {
    list-style: none;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
}

第三步：

新建radio.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单美化_单选按钮篇</title>
    <link type="text/css" rel="stylesheet" href="css/public.css">
    <style type="text/css">
        body {
            font: 12px/22px "微软雅黑";
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .type {
            width: 400px;
            height: 32px;
            border: 1px solid #DFDFDF;
            margin: 30px auto 0;
        }

        .type dl {
            height: 32px;
            line-height: 32px;
            padding-left: 15px;
        }

        .type dl dt {
            float: left;
        }

        .type dl dd {
            float: left;
            margin: 0 10px 0 8px;
            position: relative;
            padding-left: 23px;
        }

        .type dl dd a {
            display: block;
        }

        .type dl dd a:hover {
            color: #CC0000;
            text-decoration: underline;
        }

        .type dl dd b {
            width: 20px;
            height: 20px;
            background: url(./images/radiobutton.gif) no-repeat -15px -18px;
            display: block;
            position: absolute;
            left: 0;
            top: 6px;
        }

        .type dl dd a:hover b {
            background-position: -15px -118px;
        }

        .type dl .selected b, .type dl .selected a:hover b {
            background-position: -15px -218px;
        }
    </style>
</head>
<body>
<div class="type">
    <dl id="type">
        <dt>配送类型：</dt>
        <dd class="selected" onclick="show(0)"><a href="#"><b></b>全部</a></dd>
        <dd><a href="#" onclick="show(1)"><b></b>京东配送</a></dd>
        <dd><a href="#" onclick="show(2)"><b></b>第三方配送</a></dd>
    </dl>
</div>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }

    function show(index) {
        var dd = $("type").getElementsByTagName("dd");
        for (var i = 0; i < dd.length; i++) {
            if (i == index) {
                dd[i].className = "selected";
            }
            else {
                dd[i].className = null;
            }
        }
    }
</script>
</body>
</html>

表单美化_复选按钮篇

目录：

效果图：

第一步：

保存图片：checkbox.gif

第二步：

新建checkbox.html文件

注意：引入前面的公用css样式 public.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单美化_复选按钮篇</title>
    <link type="text/css" rel="stylesheet" href="css/public.css">
    <style type="text/css">
        .typeList {
            width: 540px;
            height: 30px;
            margin: 50px auto;
            border: 1px solid #DFDFDF;
            border-width: 1px 0;
            overflow: hidden;
        }

        .typeList ul {
            height: 30px;
            line-height: 30px;
            padding-left: 15px;
        }

        .typeList ul li {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        .typeList ul li input {
            display: none;
        }

        .typeList ul li b {
            width: 20px;
            height: 20px;
            background: url("images/checkbox.gif") no-repeat -12px -19px;
            display: block;
            position: absolute;
            top: 6px;
            left: 0;
        }

        .typeList ul li:hover b {
            background-position: -12px -119px;
        }

        .typeList ul .selected b,
        .typeList ul .selected:hover b {
            background-position: -12px -219px;
        }

        .typeList ul li label {
            padding-left: 23px;
        }
    </style>
</head>
<body>
<div class="typeList">
    <form action="#" method="post" name="typeList">
        <ul id="checkList">
            <li class="selected">
                <input type="checkbox" name="typeList" id="xiao">
                <label for="xiao">消费者保障</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="broken">
                <label for="broken">破损补寄</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="sevenDays">
                <label for="sevenDays">7天退换</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="good">
                <label for="good">正品</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="ele">
                <label for="ele">电子凭证</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="wang">
                <label for="wang">旺旺在线</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="pin">
                <label for="pin">品牌授权</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="pay">
                <label for="pay">货到付款</label>
            </li>
            <li>
                <input type="checkbox" name="typeList" id="credit">
                <label for="credit">信用卡</label>
            </li>
        </ul>
    </form>
    <script type="text/javascript">
        function createTag() {//动态创建b标签
            let _li = document.getElementById("checkList").getElementsByTagName("li");
            let _label;
            for (let i = 0; i < _li.length; i++) {
                _label = _li[i].getElementsByTagName('label');
                let _bTag = document.createElement("b");
                _li[i].insertBefore(_bTag, _label[0]);
                //    insertBefore(newnode,existingnode) 方法在您指定的已有子节点之前插入新的子节点。
                //    newnode 必需。需要插入的节点对象。
                //    existingnode 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。
            }
        }

        function checkList() {//点击变换效果
            let _li = document.getElementById("checkList").getElementsByTagName("li");
            for (let i = 0; i < _li.length; i++) {
                _li[i].onclick = function () {
                    if(this.className=='selected'){
                        this.className=null;
                    }else {
                        this.className='selected';
                    }
                }
            }
        }

        window.onload = function () {
            createTag();
            checkList();
        }
    </script>
</div>
</body>
</html>

表单优化_文本框篇

目录：

效果图：

第一步：

保存图片：

invalid.png

red_asterisk.png

第二步：

新建text.html文件，并引入公用css： public.css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单优化_文本框篇</title>
<link rel="stylesheet" type="text/css" href="css/public.css">
<style>
/* === Remove input autofocus webkit === */
body{font:13px/26px "微软雅黑";}
*:focus {outline: none;}
.contact{width:720px;background:#F1F1F1;margin:20px auto;padding:10px;}

/* === Form Typography === */
.contact_form h2{font-size:18px;font-weight:bold;}
.contact_form label{font-size:14px;}
.form_hint, .required_notification{font-size: 12px;}

/* === List Styles === */
.contact_form ul {width:720px;list-style-type:none;list-style-position:outside;padding:0px;}
.contact_form li{padding:12px; border-bottom:1px solid #DFDFDF;position:relative;} 
.contact_form li:first-child, .contact_form li:last-child {border-bottom:1px solid #777;}

/* === Form Header === */
.contact_form h2 {margin:0;display: inline;}
.required_notification {color:#d45252; margin:5px 0 0 0; display:inline;float:right;}

/* === Form Elements === */
.contact_form label {width:150px;margin-top: 3px;display:inline-block;float:left;padding:3px;}
.contact_form input {height:20px; width:220px; padding:5px 8px;}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

    /* form element visual styles */
.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff url(images/red_asterisk.png) no-repeat; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
}

/* === HTML5 validation styles === */    
.contact_form input:required, .contact_form textarea:required {background: #fff url(images/red_asterisk.png) no-repeat 98% center;}
.contact_form input:required:valid, .contact_form textarea:required:valid {background: #fff url(images/valid.png) no-repeat 98% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f;}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {background: #fff url(images/invalid.png) no-repeat 98% center;box-shadow: 0 0 5px #d45252;border-color: #b03535;}

/* === Form hints === */
.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; 
    position: absolute; 
    display: none;
}
.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
    
/* === Button Style === */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;

    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    
}
</style>
    <script src="http://www.jiawin.com/wp-content/themes/javin/js/jquery.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){                            
        $('#ads_close').click(function(e){
            $('#ads_box').fadeOut();
            e.preventDefault();
        });
    });
</script>
</head>
<body>
<div class="contact">
<form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h2>联系我们</h2>
             <span class="required_notification">* 表示必填项</span>
        </li>
        <li>
            <label for="name">姓名:</label>
            <input type="text"  placeholder="Sunbest" required />
            <span class="form_hint">正确格式为：6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
        </li>
        <li>
            <label for="email">电子邮件:</label>
            <input type="email" name="email" placeholder="sayingforever@163.com" required />
            <span class="form_hint">正确格式为：sayingforever@163.com</span>
        </li>
        <li>
            <label for="website">网站:</label>
            <input type="url" name="website" placeholder="http://www.amonyous.com" required pattern="(http|https)://.+"/>
            <span class="form_hint">正确格式为：http://www.amonyous.com</span>
        </li>
        <li>
            <label for="message">留言:</label>
            <textarea name="message" cols="40" rows="6" placeholder="" required ></textarea>
        </li>
        <li>
            <button class="submit" type="submit">提交</button>
        </li>
    </ul>
</form>
</div>
</body>
</html>
posted @ 2018-07-05 17:32  爱喝酸奶的吃货  阅读(11953)  评论(0)  编辑  收藏  举报