我有一个简单的HTML表单，要求提供一般信息，底部有一个标有＆＃34; next＆＃34;的按钮。一旦我按下按钮，我就会触发jQuery，导致＆＃34;卡片翻转＆＃34;动画。我想做的是在＆＃34; back＆＃34;上显示其他问题。翻转的一面，包含一个＆＃34;提交＆＃34;按钮位于背面底部。我需要一种在背面创建空白页面的方法，因此我可以输入其他输入字段。
删除表单正面的输入字段最简单的方法是什么，所以我可以在表单的背面创建其他问题？
$(document).ready(function() {
$("input[name='next']").on("click", function() {
// console.log( "The Button Worked!" );
$(".form").css("transform", "rotateY(180deg)");
})
});/*CSS FOR MY FORM*/
.form {
transform-style: preserve-3d;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: space-between;
}
.formTitle {
border-bottom: solid red;
}
.form-style-5 {
position: relative;
top: 5px;
max-width: 60%;
max-height: 82vh;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
border-radius: 8px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#form-style-5-Animation {
animation: slide 3s 1;
}
@keyframes slide {
0% {
transform: translate3d(0px, 1000%, 0px);
}
100% {
transform: translate3d(0px, 0%, 0px);
}
}
.form-style-5:after {
opacity: 1;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
font-size: 1.3em;
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="location"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding-left: 2%;
height: 6%;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 3%;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="location"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 35px;
}
.form-style-5 .number {
background: red;
color: #FCFBE3;
height: 25px;
width: 25px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 25px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 0px 15px 15px 15px;
margin-bottom: 3%;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 10px 39px 10px 39px;
color: #FCFBE3;
margin: 0 auto;
background: red;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid red;
border-width: 1px 1px 3px;
margin-bottom: 10px;
box-shadow: 0 5px 0 #b30000;
border-radius: 4px;
}
.form-style-5 input[type="submit"]:active,
.form-style-5 input[type="button"]:active {
transform: translateY(3px);
box-shadow: 0 2px 0 #b30000;
}
.form-style-5 input[type="submit"]:focus,
.form-style-5 input[type="button"]:focus {
outline: 0;
}
.next {
-webkit-transition-duration: .01s;
-moz-transition-duration: .01s;
-o-transition-duration: .01s;
transition-duration: .01s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
/*THE REST OF MY CSS*/
body,
div,
h1,
h1,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
img,
form {
margin: 0;
padding: 0;
border: 0;
}
body {
text-align: center;
}
.logo {
position: absolute;
left: 0;
top: 0;
height: 55px;
width: 162px;
float: left;
z-index: 222;
opacity: 1;
}
header {
height: 60px;
width: 100%;
z-index: 10;
position: fixed;
opacity: .8;
}
.banner {
background: black;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
opacity: .8;
}
#banner {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background: url("banner.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: 10px;
font-size: 100%;
text-shadow: 20px black;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.button1,
.button2,
.button3,
.button4 {
border-radius: 8px;
width: 120px;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
float: right;
border-style: solid;
border-color: red;
border-width: 1.5px;
color: red;
background-color: black;
font-size: 14px;
}
.button1:hover,
.button2:hover,
.button3:hover,
.button4:hover {
background-color: red;
color: white;
opacity: 1;
z-index: 9999;
}
.button1:focus,
.button2:focus,
.button3:focus,
.button4:focus {
outline: 0;
}
#formOpacity {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="banner">
<div class="banner"></div>
<div class="form-style-5" id="form-style-5-Animation">
<div class="form">
<form action="send-sms.php" method="POST">
<fieldset class='flex'>
<legend>
<div class="formTitle">Fill out the form below to request help!</div>
</legend>
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input type="text" name="field3" id="location" placeholder="Your Location (i.e. McNutt, exact address, etc.)*">
<input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important">
<input type="email" name="field2" id="email" placeholder="Email Address"><span class="number">or</span>
</h4>
<input type="text" name="field5" id="phone" placeholder="Phone Number">
<input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input>
</fieldset>
<input name="next" type="button" value="Next" class="next" />
</form>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以有两个<div>个，其中一个ID为#front-side，另一个带#back-side。点击该卡后，它会将#front-side设置为display: none;，将#back-side设置为display: block;，反之亦然。
因此，对于您的代码，如果我正确地阅读它：
<div class="form">
<div id="front-side">
<form action="send-sms.php" method="POST">
<fieldset class='flex'>
<legend>
<div class="formTitle">
Fill out the form below to request help!
</div>
</legend>
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input type="text" name="field3" id="location" placeholder="Your Location">
<input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important">
<input type="email" name="field2" id="email" placeholder="Email Address"><span class="number">or</span>
</h4>
<input type="text" name="field5" id="phone" placeholder="Phone Number">
<input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input>
</fieldset>
<input name="next" type="button" value="Next" class="next" />
</form>
</div>
<div id="back-side">
<span>back-side stuff here</span>
</div>
</div>