Create an Order Entry web page form similar as above: Specifications: At the top
ID: 3802596 • Letter: C
Question
Create an Order Entry web page form similar as above:
Specifications:
At the top of the first half of the form (Order header area):
Buttons: Save, Cancel Print at the top and bottom of form
Text fields: Employee, Order Number, Date & Address
Drop down list: Customer
At the bottom half of the form (Order detail):
A table with 5 columns and at least 5 rows.
The table header fields are:
Item Description, Item Quantity, Price, Discount & Amount. All these fields are text fields.
Create an Order Entry web page form as shown above.Explanation / Answer
<!-- Html webpage using bootstrap-->
<html>
<head>
<title>Order Entry Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CDN links-->
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Order Entry Form</h2> <!-- order header area -->
<hr>
<form>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="btn-group"> <!-- buttons -->
<button type="submit" class="btn btn-default">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-default">Print</button>
</div>
</div>
</div>
<div class="form-group"> <!-- text area for employee -->
<div class="col-md-6">
<label class="control-label col-sm-2" for="employee">Employee:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="employee" placeholder="Enter employee name">
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group"> <!-- drop down list for customers-->
<div class="col-md-6">
<div class="dropdown">
<label for="customer">Customer:</label>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Customers <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">XXXXXX</a></li>
<li><a href="#">YYYYYY</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group"><!-- text area for order number -->
<div class="col-md-6">
<label class="control-label col-sm-2" for="orderNumber">Order Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="orderNumber">
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group"> <!-- text area for address -->
<div class="col-md-6">
<label class="control-label col-sm-2" for="address">Address:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</div>
<div class="form-group"> <!-- text area for date -->
<div class="col-md-6">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="date">
</div>
</div>
</div>
</div>
<br>
<hr><hr>
<br>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered"> <!-- table for input data -->
<caption>Order Details</caption>
<thead>
<tr>
<th>Item Description</th>
<th>Item Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<input class="col-sm-12" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="btn-group"> <!-- buttons at bottom-->
<button type="submit" class="btn btn-default">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-default">Print</button>
</div>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.