0
我只能使用html5和css3。 我有一個表單，我需要模擬「發送表單數據」。點擊提交按鈕後，我需要隱藏表單並顯示一些默認div（#result）。我如何做到這一點（只有CSS3和HTML5，沒有JavaScript）。用css3隱藏窗體並顯示默認div。
謝謝。
這是我的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;
}
\t \t .header {
\t \t \t margin-left: 40px;
}
\t \t #triangle {
\t \t \t width: 0;
\t \t \t height: 0;
\t \t \t border-left: 12px solid transparent;
\t \t \t border-right: 12px solid transparent;
\t \t \t border-top: 12px solid cornflowerblue;
\t \t \t margin-top: 29px;
\t \t \t left: 54px;
\t \t \t position: relative;
\t \t }
\t \t #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>
\t \t \t <span class="header">Contact Us!</span>
\t \t \t <div id="triangle"></div>
\t \t </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>
我認爲你不能這樣做。如果你有一個類來告訴你表單是否被髮送（例如點擊按鈕後添加的'sent'類），你可以用CSS來完成。但是，必須在單擊該按鈕後添加類，並且只有在可以使用JS的情況下才能將類添加到DOM節點。 – wil93