HTML Assignment The goal of this assignment is to give you some experience creat
ID: 3883556 • Letter: H
Question
HTML Assignment
The goal of this assignment is to give you some experience creating a web application that includes a simple HTML page with a form that is processed by an ASPX server-side page.
Requirements:
Create a simple HTML page (sandwich_builder.html) and design the user interface, which will contain the HTML input form.
1 Add simple HTML form controls (HFCs) for the user to enter their name and phone number.
2 Add an HTML form control drop-down box (select/option list) or radio button group to allow the customer to select the size of the sandwich.
3 Add HTML form controls that allows the customer to make selections and customize their sandwich.
4 Toaster or not toasted
5 Spreads or sauces
6 Checkboxes for lettuce, tomato, onions, pickles, etc… The checkboxes will allow the customer to choose as many as they like.
7 Checkboxes premium additions like bacon, extra cheese, extra meat, etc… The checkboxes will allow the customer to choose as many as they like.
8 Meal option that includes a drink and some side of their choice (chips, fruit, cookie).
Option to tip the sandwich build artist. The tip will get added to the total cost of the order during server-side processing. Use a textbox to allow the customer to enter a numerical value for the tip. A blank textbox would signify the customer is not including a tip.
Provide at least 5 choices for each of the above categories.
You must use a mixture of drop-down boxes, radio button groups, and checkboxes to allow the user to build their customized sandwich. This means you cannot use a drop-down box for everything.
Server-side processing
1 The ASPX page only needs to contain a simple ASPX label or labels (WFC) to display the necessary output to the customer.
2 Retrieve the values for all form controls using the Request object.
3 Display the user’s order with all their selections.
4 Calculate and display the cost for the order including tax and tip.
5 You should assign prices for each option.
6 Display the breakdown for the order (cost of each item / choice, tax amount, tip amount, and grand total.)
Explanation / Answer
Hi thanks for asking
sandwich_builder.html
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="pnumber">Phone number</label>
<input type="text" id="lname" name="Phone number" placeholder="enter your mobile number..">
<label for="size">size of the sandwich</label>
<select id="size" name="size">
<option value="australia">1</option>
<option value="canada">2</option>
</select>
<select id="sandwich" name="sandwich">
<option value="australia">Toaster</option>
<option value="canada">not toasted</option>
<option value="australia">Spreads</option>
<option value="canada">sauces</option>
<option value="usa">USA</option>
</select>
<input type="checkbox" name="name" value="v1">lettuce<br>
<input type="checkbox" name="name" value="v2">tomato<br>
<input type="checkbox" name="name" value="v3">onions<br>
<input type="checkbox" name="name" value="v4">pickles<br>
<input type="checkbox" name="name" value="v1">lettuce<br>
<input type="checkbox" name="name" value="v2">tomato<br>
<input type="checkbox" name="name" value="v3">onions<br>
<input type="checkbox" name="name" value="v4">pickles<br>
<select>
<option>chips</option>
<option>fruit</option>
<option>cookie</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Thanks for asking
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.