Question

我只能使用html5和css3。我有一个表单，我需要模拟“发送表单数据”。单击提交按钮后，我需要隐藏表单并显示一些默认div（#result）。我该怎么做（只有css3和html5，没有javascript）。

感谢。

这是我的HTML + CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS CHALLENGE</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Raleway:400 "Raleway");
        @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
        .global {
            background-color: #353535;
            font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
        }

        .backgound {
            background-color: whitesmoke;
            height: 530px;
            width: 400px;
            margin:0 auto 0 auto;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
        }

        #loginForm {
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 20px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

		.header {
			margin-left: 40px;
        }

		#triangle {
			width: 0;
			height: 0;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-top: 12px solid cornflowerblue;
			margin-top: 29px;
			left: 54px;
			position: relative;
		}

		#loginForm h2 {
            background: cornflowerblue;
            color: white;
            height: 55px;
            font-size: 2.5em;
            padding-top: 10%;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-family: Raleway;
            font-size: 39px;
            font-style: normal;
            font-variant: small-caps;
            font-weight: 200;
            line-height: 26.4px;
        }

        .item {
            display: -webkit-box;
            height: 30px;
            width: 300px;
            margin: 0 auto 15px;
            background-color: white;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        #idMessage  {
            height: 160px;
        }

        #loginForm button{
            opacity: 0.5;
            transition:opacity .3s;
            -webkit-transition:opacity .3s;
            background-color: darkolivegreen;
            width: 308px;
            height: 60px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            font-size: 2em;
        }

        #loginForm:valid button {
            opacity: 1;
        }

        #result {
            display: none;
        }

        #result:target {
            display:block;
        }

        .myLoad {
            position: relative;
        }

        .myLoad i {
            position: absolute;
            top: 8px;
            left: 325px;
        }

#val {
    display: none;
}
.#idEmail:invalid #val {
        display: block;
}

input:invalid .val {
    display: block;
}

#idEmail:invalid, #idMessage:invalid{
    color: red;
}

#idEmail:valid, #idMessage:valid{
    color: green;
}


/* fa-spin*/
    </style>
</head>
<body class="global">
<div class="backgound">
    <form id="loginForm" action="#result" method="get">
        <h2>
			<span class="header">Contact Us!</span>
			<div id="triangle"></div>
		</h2>
        <div class="myLoad">
            <input class="item" id="idEmail" type="email"
                placeholder="Email" required>
            <i id="inval" class="fa fa-refresh"></i>
            <i id="val" class="fa fa-refresh fa-spin"></i>
        </input>
        </div>
            <div class="myLoad">
            <input class="item" id="idSubject" type="text"
                placeholder="Subject">
            <i class="fa fa-refresh"></i>
        </div>
        <div class="myLoad">
            <textarea class="item" id="idMessage" placeholder="Message"
                rows="10" cols="40" required></textarea>
            <i class="fa fa-refresh"></i>
        </div>
        <button class="item" type="submit">Send</button>
    </form>
    <div id="result" class="sended">Form sended</div>
</div>
</body>
</html>

Answer 1

听起来有点哼......

PHP是一个选项吗？

如果是，您可以将表单定向到＆＃34; action＆＃34;中定义的另一个页面。 <form>标签的属性，并通过PHP读出输入值并对它们执行某些操作，即显示它们或将它们发送到电子邮件中的某个位置。

Answer 2

我认为你使用:target伪类进入了正确的轨道。但是，您需要切换结果div和表单的顺序，然后将其与常规兄弟选择器see my example here组合。

（使用按钮提交表单似乎没有用，但我认为这是因为iframing，希望它适合你。尝试点击jsfiddle上的测试链接导航到#result。）

用css3隐藏表单并显示默认div。

2 个答案: