单击“打印”按钮，将调用windows.print（）函数并打印表单。但是在打印中，每个表单字段都会分配一个完整的单独行。我希望表单字段排列在与表格中排列的顺序相同。 例如：父亲的职业，教育，收入领域只有一行，但在印刷品中，它们被分配了不同的行。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="form2.css">
</head>
<body>
<div class="container box-container">
<h1 align="center">Admission Form</h1>
<h3 align="center">(2016/2017)</h3>
<br/>
<form class="form-inline" id="sunrise" name="sunrise" method="post" action="">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-4">
<div class="form-group upload"> <label>Upload Child's Image:</label>
<input name="fileUpload" type="file" id="fileUpload" /><br />
<div name="image-holder" id="image-holder"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Scholar No:</label>
<input type="text" class="form-control" name="scholar" placeholder="Scholar No:" disabled>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Class:</label>
<input type="text" class="form-control" name="class" placeholder="Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Date:</label>
<input name="date" id="date" name="date" class="form-control" placeholder="Date" disabled>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="name" placeholder="Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Father's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="father" placeholder="Father's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Mother's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="mother" placeholder="Mother's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>DOB:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="date" class="form-control box-size" name="dob" placeholder="Date of Birth">
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Gender:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <select class="form-control" name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<label>Category:</label>
</div>
<div class="col-md-10 col-sm-10">
<div class="col-md-6">
<div class="checkbox">
<label><input type="checkbox" value="gen">Gen</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="obc">Obc</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="st">ST</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sc">SC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sbc">SBC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="bpl">BPL</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="other">OTHER</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Cast:</label>
<input type="text" class="form-control" name="cast" placeholder="Cast">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Aadhar Card No:</label>
<input type="text" class="form-control" name="aadhar" placeholder="Aadhar Card No">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Religion:</label>
<input type="text" class="form-control" name="religion" placeholder="Religion">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Present Address:</label>
<input type="text" class="form-control" name="present" placeholder="Present Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pin" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Permanent Address:</label>
<input type="text" class="form-control" name="permanent" placeholder="Permanent Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pincode" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Mobile No 1:
</label>
<input type="text" class="form-control" name="mobile" placeholder="Mobile Number 1">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>2:</label>
<input type="text" class="form-control" name="mobile2" placeholder="Mobile Number 2">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>3:</label>
<input type="text" class="form-control" name="mobile3" placeholder="Mobile Number 3">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="fatherjob" placeholder="Father's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="fatheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="fatherincome" placeholder="Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="motherjob" placeholder="Mother's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="motheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="motherincome" placeholder="Mother Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Last School Name:</label>
</div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="lastschool" placeholder="Last School Name">
</div></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Passed Class:</label>
<input type="text" class="form-control" name="classpassed" placeholder="Passed Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Obtained Marks:</label>
<input type="text" class="form-control" name="marksobtained" placeholder="Obtained Marks">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Percentage:</label>
<input type="text" class="form-control" name="percentage" placeholder="Percentage">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Hosteler/Day Scholar:</label>
<select class="form-control" name="hostelornot">
<option>Day Scholar</option>
<option>Hosteler</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>
Bus Facility:</label>
<input type="text" class="form-control" name="bus" placeholder="Bus Facility">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Physical Disability:</label>
<select class="form-control" name="disability">
<option>NO</option>
<option>YES</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Any allergical disease:</label>
<input type="text" class="form-control" name="disease" placeholder="Any allergical disease">
</div>
</div>
</div>
<h2 align="center">Declaration By Parent</h2>
<div class="">
<div class="checkbox">
<label><input type="checkbox" value="done" required /></label>We have read the prospectus of Sunrise International Public School and undertake to abide by all the rules as laid down in the school prospectus, we also agree to abide by any amendment to these rules, which may be incorporated from time to time.
</div>
</div>
<br/>
<br/>
<div class="row signature">
<div class="">
<label>Candidate's Signature:</label>
</div>
<div class="">
<label>Parent's Signature:</label>
</div>
<div class="">
<label>Principal's Signature:</label>
</div>
</div>
<br/>
<br/>
<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button>
<button type="submit" class="btn btn-default" name="submit" value="submit">Submit</button>
</form>
</div>
<script>
$("#fileUpload").on('change', function () {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
});
</script>
<script type="text/javascript">
document.getElementById('date').value = Date();
</script>
</body>
</html>