Create a HTML document, name it as YourLastName_A2_PopcornForm.html. Save it in
ID: 3742699 • Letter: C
Question
Create a HTML document, name it as YourLastName_A2_PopcornForm.html. Save it in the same folder with your Assignment#1 Make sure . . o There is only one form element in the whole document. o You add a title for the document. o The first three textboxes are aligned by putting them along with the labels in a table, and the textboxes can hold 30 characters. The next four textboxes can hold 2 characters. o The first button type is "submitd and the second "reset". o When you open your document in a browser, type in something in the textboxes, and then click the second button, see that your button really cleared the input.Explanation / Answer
Please find the complete html code along with the form elements that resets the form.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- title-->
<title>popcorn salesform</title>
<!-- styling the table -->
<style>
table {
border-collapse: collapse;
width: 40%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<!-- header start here -->
<header>
<h1>Welcome to Millenium Gymnastics Booster Club Popcorn Sales</h1>
</header>
<form>
<!-- take input for Buyer's name-->
Buyer's Name: <input type="text" name="Name" class="txtbox" maxlength="30"/>
<br/>
<br/>
Street Address: <input type="text" name="saddress" class="txtbox" maxlength="30" />
<br/>
<br/>
<!-- take input for city, state and zip-->
City,State,Zip: <input type="text" name="city" class="txtbox" maxlength="30"/>
<br/>
<br/>
<br/>
<table>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Unpopped Popcorn (1lb.)</td>
<td>$3.00</td>
<td><input type="text" size="2" maxlength="2" /></td>
</tr>
<tr>
<td>Caramel Popcorn(2 lb. cannister)</td>
<td>$3.50</td>
<td><input type="text" size="2" maxlength="2" /></td>
</tr>
<tr>
<td>Caramel Nut Popcorn(2 lb. cannister)</td>
<td>$4.50</td>
<td><input type="text" size="2" maxlength="2" /></td>
</tr>
<tr>
<td>Toffey Nut Popcorn(2 lb. cannister)</td>
<td>$5.00</td>
<td><input type="text" size="2" maxlength="2" /></td>
</tr>
</table>
<br/>
<h3>Payment Method: </h3>
<input type="radio" name="visa" value="Visa" checked> Visa<br>
<input type="radio" name="Mastercard" value="Mastercard"> Master Card<br>
<input type="radio" name="discover" value="Discover"> Discover <br>
<input type="radio" name="check" value="Check" > Check
<br/>
<br/>
<button type="submit" value="SubmitOrder">Submit Order</button>
<button type="Reset" value="Reset">Clear Order Form</button>
</form>
</body>
</html>