文本框提交

最新推荐文章于 2022-08-04 20:55:21 发布

茜素红

最新推荐文章于 2022-08-04 20:55:21 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/wqfy123/article/details/78293013

版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框</title>
    <link rel="stylesheet" href="css/textarea.css">
    <link rel="stylesheet" href="css/public.css">
</head>
<body>
<div class="box">
    <form method="post" name="List" class="listbox">
        <ul>
            <li><h><b>联系我们</b></h>
                <p>*表示必填项</p>
            </li>
            <li><label for="name">姓名:</label>
                <input type="text" name="name" 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/>
                <span class="form-hint">正确格式为：http://www.amonyous.com</span>
            </li>
            <li><label for="message">留言:</label>
                <textarea type="text" name="message" rows="6" cols="40" required></textarea>
            </li>
            <li>
                <button class ="submit" value="提交" type="submit" >提交</button>
            </li>
        </ul>
    </form>
</div>
</body>
</html>

---------------CSS-----------------

.box{width:745px;
    height:455px;
    background:#f1f1f1;
    margin:20px auto;
    position:relative;}
h{font-size:18px;
    font-weight:bold;
    position:absolute;
    top:-35px;
    left:22px;
    display:inline-block;
    float:left;}
p{color:#d45252;
    float:right;
    font-size:12px;
    position:absolute;
    top:-30px;
    right:22px;}
*:focus{outline:none;}
.listbox li{border-bottom:1px solid #dfdfdf;
    position:relative;}
.listbox li:last-child{border-bottom:1px solid #777;}
.listbox{width:720px;
    height:370px;
    border-top:1px solid #777777;
    position:absolute;
    top:62px;
    left:10px;}
.listbox label{width:155px;
    margin-top:22px;
    margin-left:22px;
    display:inline-block;
    font-size:14px;}
.listbox input{width:220px;
    height:30px;
    display:inline-block;
    margin-top:12px;
    margin-bottom:12px;
    border:1px solid #aaa;
    padding:0px 5px;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    background:#fff url(../images/red_asterisk.png) no-repeat 98% center;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}
.form-hint{background:#d45252;
    font-size:12px;
    position:absolute;
    display:none;
    color:white;
    line-height:30px;
    border-radius:3px;
    margin-left:8px;
    padding:1px 6px;
    margin-top:16px;}
.form-hint::before{content:"\25C0";
    color:#d45252;
    position:absolute;
    top:1px;
    left:-6px;
 }
.listbox textarea{margin-top:12px;
    margin-bottom:20px;
    width:300px;
    vertical-align:top;
    border-radius:2px;
    box-shadow:0 10px 15px #eee inset;
    background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
}

/*-----submit按钮--------*/
.submit{color:white;
    border-radius:3px;
    margin-left:178px;
    background-color:#559722;
    border:1px solid #509111;
    margin-bottom:12px;
    margin-top:12px;
    width:68px;
    height:30px;
    background:linear-gradient(top, #65ad2d ,#5b992b);
    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);}
.submit:hover{opacity:0.8;cursor:pointer;}
.submit:active{box-shadow:0px 0px 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;
}
/* === HTML5 validation styles === */
.listbox input:required:valid, .listbox textarea:required:valid {  /*有效时input框样式*/
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
    background:#fff;}
.listbox input:required:valid + .form-hint {background:#28921f;}/*有效时提示框变绿*/
.listbox input:required:valid + .form-hint::before{color:#28921f;}
/*=====HTML5 click styles====*/
.listbox input:focus + .form-hint {display: inline;} /*点击出现提示框*/

.listbox input:focus,.listbox textarea:focus{    /*点击出现加长*/
    border:1px solid #b03535;
    box-shadow:0px 0px 4px #e5adad;
    padding-right:60px;
}
.listbox input:focus:invalid, .listbox textarea:focus:invalid {   /*无效时input框样式*/
    background: #fff url(../images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535;}

主要知识点

1)在页面上画一个按钮

1.<input type="button">如果你不写javascript的话，按下去什么也不会发生。

2.<input type="submit">这样的按钮用户点击之后会自动提交 form，除非你写了javascript阻止它。

3.<button type="submit"></button>这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。

4.<a><img><span><div>等其他标签。图片把它伪装成一个按钮。

2)伪类与伪元素

1.伪类选择器使用：单冒号如h:before{};

2.伪元素选择器使用：：双冒号如form-hint::before{};

3)CSS选择器

1. 加号（+）：相邻同胞选择器

　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p{margin-top : 10px ; }

2. :valid选择器

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。( :valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等)。

3. :invalid选择器

:invalid 选择器用于在表单元素中的值是非法时设置指定样式。

注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

4. :required选择器

:required 选择器在表单元素是必填项时设置指定样式。

表单元素可以使用 required 属性来设置必填项。

注意： :required 选择器只适用于表单元素: input, select 和 textarea。

5. 浏览器兼容

-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

现在最新版的浏览器基本都支持css3 基本都不用写前缀，写前缀是为了向前兼容老版本的浏览器而已

具体兼容情况查询：http://caniuse.com/

茜素红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框提交

文本框提交一.在页面上画一个按钮1.如果你不写javascript的话，按下去什么也不会发生。2.这样的按钮用户点击之后会自动提交 form，除非你写了javascript阻止它。3.这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。4.等其他标签。图片把它伪装成一个按钮。
复制链接

扫一扫