如何使表单响应
我设计了一个联系表单，我试图让它响应但我被卡住了。我试过用css但它还没有响应。在我的响应模式中，即使panel panel-heading也看起来很尴尬。我试图在导航栏上进行切换以使其崩溃，但它不起作用。我在我的代码中导入了外部bootstrap.min.css和bootstrap.min.js。请帮忙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right "><a href=" ">Logout</a></p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+@infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example@infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
您必须添加我添加的script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
看看这里：https://www.w3schools.com/bootstrap/default.asp
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right "><a href=" ">Logout</a></p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+@infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example@infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet" ">
<!-- Favicon -->
<link rel="shortcut icon " href="img/favicon.ico ">
<style>
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 400;
face: Calibri;
}
.panel-footer {
padding: 20px 20px;
margin-bottom: 10px;
background-color: #fff;
border-top: 0px solid #ddd;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 80px !important;
}
.close {
float: right;
font-size: 31px;
margin-left: 22px;
color: black;
}
button.close {
padding: 1;
padding-top: 1px;
padding-right: 5px;
font-weight: 700px
background-color: black;
}
.underline {
text-decoration: underline;
}
.form-control{
border-color: blue;
}
.panel-default {
border-color: black;
}
}
</style>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js "></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container ">
<a href="# " class="navbar-brand ">
<img src="logo1.jpg " height="48 " width="202 " class="pull-left "></a>
<center> <p class="navbar-text "> <a href=" ">Ticker </a></p></center>
<p class="navbar-text pull-left "> <a href=" " ></a></p>
<p class="navbar-text pull-right "><a href=" ">Logout</a></p>
</div>
</div>
<br/><br/><br/><br/><br />
<div class="container ">
<div class="row ">
<div class="col-sm-12 col-md-6 ">
<h4 id="main " style='color: #4CAEE3';><a href="ht.html ">HT</a> /<a href="createemployee.html ">Create </a></h4><br />
</div>
</div>
<br />
<form class="form-horizontal " id="myform ">
<h4 ><center><a href="createem.html "><font style="color: #0000ff;font-weight: 700; face: Calibri; ">New </font></a></center></h4>
<form class="form-horizontal ">
<div class="panel panel-default ">
<button type="button " class="close " data-dismiss="modal ">
<font color="black "> <a href="hrtoolkit.html ">
<span class="underline " id="u ">×</span></a></font> </button>
<div class="form-body ">
<br />
<div class="row ">
<div class="col-md-12 ">
<div class="col-md-4 ">
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "> ID<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="emp " required placeholder="if " oninvalid="this.setCustomValidity( 'ID Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">First Name<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="fname " required placeholder="First Name " oninvalid="this.setCustomValidity( 'First Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Gender<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<select class="form-control " required placeholder="Gender " oninvalid="this.setCustomValidity( 'Gender Required') " oninput="this.setCustomValidity( '') " />
<option hidden value=" ">Gender</option>
<option value="male ">Male</option>
<option value="female ">Female</option>
<option value="other ">Other</option>
</select>
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOJ<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="doj " required placeholder="DOJ " required oninvalid="this.setCustomValidity( 'DOJ Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="font-weight: 700; ">eMail</span><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="email " class="form-control " id="eMail " pattern="^[\w.+\-]+@infinitumglobal\.com$ " required placeholder="eMail " oninvalid="this.setCustomValidity(
'Email ID Required format example@infinitumglobal.com') "
oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Middle Name</label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="mname " placeholder="Middle Name ">
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">DOB<span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="date " class="form-control " id="dob " required placeholder="DOB " oninvalid="this.setCustomValidity( 'DOB Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 "><span style="color: red; ">*</span> </label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="desg " required placeholder="Designation " oninvalid="this.setCustomValidity( 'Designation Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="row ">
<div class="form-group ">
<label class="control-label col-md-4 ">Last Name<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="lname " required placeholder="Last Name " oninvalid="this.setCustomValidity( 'Last Name Required') " oninput="this.setCustomValidity( '') " />
</div>
</div>
</div>
<!--<div class="row " style="visibility: hidden ">
<div class="form-group ">
<label class="control-label col-md-4 ">res<span style="color: red; ">*</span></label>
<div class="col-md-7 ">
<input type="text " class="form-control " id="formGroupExampleInput2 ">
</div>
</div>
</div>-->
<div class="panel-footer text-right ">
<button type="submit " id="btnSave " class="btn btn-default pull-right " style="background-color: #90EE90; ">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
</html>
问题在于您添加了style =“visibility：hidden”的“row”。使用CSS的“display”属性来显示/隐藏HTML中的任何组件。可见性CSS属性隐藏了HTML标记的可见性，但组件覆盖的区域仍然保持不变。
我已在评论中添加了所有此类“行”，问题已解决。希望这会对你有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？