Create and test an HTML5 & JavaScript web form for the business assigned to you.
ID: 3712302 • Letter: C
Question
Create and test an HTML5 & JavaScript web form for the business assigned to you.
You need to have in this form support for data entry of a standard web-based check-out counter with the following form controls/input:
First name, middle initial, last name (as text fields)
Address (street, city, state, zip, all individually prompted)
Phone number
Billing model radio button (check, COD, credit card, etc) giving as many options as possible
Credit card pull-down-menu or scroller based selection (Visa, MC, AE, Discover, Paypal) giving as many options as possible
Expiration date of the credit card, using a menu of 12 months Jan-Dec and a separate menu for the year using the 4 years 2009, 2010, 2011, and 2012 (after which Ragnorok J).
A comment field for special shipping instructions or customer satisfaction narrative (you decide which but it must be one of them)
a list of 3 products with (name, price, and quantity desired for purchase).
A submit button and a reset button, both fully functional.
Provide (1) source code (readable), (2) rendered webpage image
Use Chrome to test final result.
Provide source code as readable HTML5 (using links to
web images rather than downloading images). Best of Prospect
<1> Thomas Jefferson, 1801-1809
<2> PC Game Store
Explanation / Answer
Below is the html5 code for the asked question;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<script src="myscripts.js"></script>
</head>
<body >
<h3>Product Shipping Form</h3>
<div class="container">
<form action="/submit.html">
<!-- Below fields are for the name -->
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your First name..">
<label for="mname">Middle Name</label>
<input type="text" id="mname" name="middlename" placeholder="Your Middle name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<!-- Below fields are for the Adress-->
<label for="streename">Street Name</label>
<input type="text" id="streename" name="streetname" placeholder="Street name..">
<label for="city">City Name</label>
<input type="text" id="cityname" name="cityname" placeholder="City name..">
<label for="statename">State Name</label>
<input type="text" id="statename" name="statename" placeholder="State name..">
<label for="zipcode">Zip Code</label><br>
<input type="number" id="zipcode" name="zipcode" placeholder="Zip Code..">
<br><br>
<!--Below section is for email -->
<label for="email">e-mail</label><br>
<input type="email" id="email" name="email" placeholder="email ID..">
<br><br>
<!-- Below section is for the phone no-->
<label for="phoneno">Phone No</label>
<br>
<input type="number" id="phoneno" name="phoneno" placeholder="Phone No..">
<br><br>
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="australia">Australia</option>
</select>
<!-- Below section is for the Billing details-->
Method of Payment<br>
<input type="radio" name="methodOfPayment" value="cheque" id="cheque"> Cheque
<input type="radio" name="methodOfPayment" value="cod" id="cod"> COD
<input type="radio" name="methodOfPayment" value="creditcard" id="creditcard"> Credit Card
<div id="chequeoptions">
<br>
<label>Enter Cheque no</label>
<input type="text" name="cheque no"><br>
</div>
<div id="codoptions">
<br>
<label>Cash will be colletected at the time of delivery</label>
</div>
<div id="creditcardoptions">
<label for="creditcardtypes">Card Type</label>
<select id="creditcardtype" name="creditcardtype">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="americanexpress">American Express</option>
<option value="Discover">Discover</option>
<option value="Paypal">Paypal</option>
</select>
<label for="month">Month</label>
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<label for="year">Year</label>
<select id="year" name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<br><br>
<!-- Below is the section for the shipping instructions-->
<label for="subject">Shipping Instructions</label>
<textarea id="subject" name="subject" placeholder="Please provide shipping information if required.."></textarea>
Please choose product
<ul>
<li>
Product A - $100
Quantity (between 0 and 5):
<input type="number" name="quantity" min="0" max="5">
</li>
<li>
Product B - $200
Quantity (between 0 and 10):
<input type="number" name="quantity" min="0" max="5">
</li>
<li>
Product B - $300
Quantity (between 0 and 15):
<input type="number" name="quantity" min="0" max="5">
</li>
</ul>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Below is the javascript file myscripts.js
window.onload = function() {
document.getElementById('creditcardoptions').style.display = 'none';
document.getElementById('chequeoptions').style.display = 'none';
document.getElementById('codoptions').style.display = 'none';
}
function showoptions() {
if (document.getElementById('creditcard').checked) {
document.getElementById('creditcardoptions').style.display = 'block';
document.getElementById('codoptions').style.display = 'none';
document.getElementById('chequeoptions').style.display = 'none';
}
else if (document.getElementById('cod').checked) {
document.getElementById('creditcardoptions').style.display = 'none';
document.getElementById('codoptions').style.display = 'block';
document.getElementById('chequeoptions').style.display = 'none';
}
else if (document.getElementById('cheque').checked) {
document.getElementById('creditcardoptions').style.display = 'none';
document.getElementById('codoptions').style.display = 'none';
document.getElementById('chequeoptions').style.display = 'block';
}
}
Here I would not be able to upload the image. You can copy the above code and paste in html file and keep the javascript file in the same folder and capture the screenshot.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<script src="myscripts.js"></script>
</head>
<body >
<h3>Product Shipping Form</h3>
<div class="container">
<form action="/submit.html">
<!-- Below fields are for the name -->
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your First name..">
<label for="mname">Middle Name</label>
<input type="text" id="mname" name="middlename" placeholder="Your Middle name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<!-- Below fields are for the Adress-->
<label for="streename">Street Name</label>
<input type="text" id="streename" name="streetname" placeholder="Street name..">
<label for="city">City Name</label>
<input type="text" id="cityname" name="cityname" placeholder="City name..">
<label for="statename">State Name</label>
<input type="text" id="statename" name="statename" placeholder="State name..">
<label for="zipcode">Zip Code</label><br>
<input type="number" id="zipcode" name="zipcode" placeholder="Zip Code..">
<br><br>
<!--Below section is for email -->
<label for="email">e-mail</label><br>
<input type="email" id="email" name="email" placeholder="email ID..">
<br><br>
<!-- Below section is for the phone no-->
<label for="phoneno">Phone No</label>
<br>
<input type="number" id="phoneno" name="phoneno" placeholder="Phone No..">
<br><br>
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="australia">Australia</option>
</select>
<!-- Below section is for the Billing details-->
Method of Payment<br>
<input type="radio" name="methodOfPayment" value="cheque" id="cheque"> Cheque
<input type="radio" name="methodOfPayment" value="cod" id="cod"> COD
<input type="radio" name="methodOfPayment" value="creditcard" id="creditcard"> Credit Card
<div id="chequeoptions">
<br>
<label>Enter Cheque no</label>
<input type="text" name="cheque no"><br>
</div>
<div id="codoptions">
<br>
<label>Cash will be colletected at the time of delivery</label>
</div>
<div id="creditcardoptions">
<label for="creditcardtypes">Card Type</label>
<select id="creditcardtype" name="creditcardtype">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="americanexpress">American Express</option>
<option value="Discover">Discover</option>
<option value="Paypal">Paypal</option>
</select>
<label for="month">Month</label>
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<label for="year">Year</label>
<select id="year" name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<br><br>
<!-- Below is the section for the shipping instructions-->
<label for="subject">Shipping Instructions</label>
<textarea id="subject" name="subject" placeholder="Please provide shipping information if required.." ></textarea>
Please choose product
<ul>
<li>
Product A - $100
Quantity (between 0 and 5):
<input type="number" name="quantity" min="0" max="5">
</li>
<li>
Product B - $200
Quantity (between 0 and 10):
<input type="number" name="quantity" min="0" max="5">
</li>
<li>
Product B - $300
Quantity (between 0 and 15):
<input type="number" name="quantity" min="0" max="5">
</li>
</ul>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.