Introduction to web development | Week 6 Peer-graded Assignment: Complete HTML Form | Coursera

 

Please visit my channel for more quizes and assignment: 
https://youtube.com/c/PriyaVishwakarma99


<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Shipping and Billing</title>
<style>
input{
border:1px solid black;
}
input:focus{
background-color: #E6E6E6;
}
fieldset{
margin-bottom: 4%;
}
</style>
<script type="text/javascript">
// function is Created
function billingFunction(){
var checked = document.getElementById("same").checked;
document.getElementById("billingName").value = checked?
document.getElementById("shippingName").value : "";
document.getElementById("billingZip").value = checked?
document.getElementById("shippingZip").value : "";
}
</script>
<link rel="stylesheet" type="text/css" href="CSSfile.css">
</head>
<body>
<!-- This is shipping and billing form -->
<img src="flipkart.jpg" alt="Flipkart" width="100%"; height="63px";<br>
<h1 id="h">Shipping and Billing form</h1>
<p id="par">Add the JavaScript code needed to enable auto-complete on this form. Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>
<form id="fm">
<fieldset>
<legend>Shipping Information</legend> <br><br>
<label for ="shippingName">Name:</label>
<input type = "text" name = "Name" id = "shippingName" required><br><br>
<label for = "shippingzip">Zip code:</label>
<input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br><br>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<label for="quantity">Total Quantitiy:</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="India"> I am from India</label>
<input type="checkbox" id="Country" name="Country" value="India">
<label for="Other"> Other Country</label>
<input type="checkbox" id="Othercountry" name="Othercountry" value="Other "><br><br>
</fieldset>
<input type="checkbox" id="same" name="same" onchange= "billingFunction()">
<label for = "same">Is the Billing Information the Same?</label>
<fieldset>
<legend>Billing Information</legend>
<label for ="billingName">Name:</label>
<input type = "text" name = "Name" id = "billingName" required><br><br>
<label for = "billingzip">Zip code:</label>
<input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br><br>
</fieldset>
<input type = "submit" value = "Verify">
</form>
</body>
</html

Comments

  1. kowsik.SSeptember 2, 2020 at 4:51 AM

    WHATS THE THIRD IMAGE OF FLIPKART IN SUBMISSION

    ReplyDelete
  2. AshuYadavSeptember 4, 2020 at 12:31 PM

    it this code complete or we still have to do anything else, plz help
    as here it is given"Add the JavaScript code needed to enable auto-complete on this form. Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank"

    ReplyDelete
  3. UnknownSeptember 30, 2020 at 8:22 AM

    Hi Priya, i watched your YouTube video "Using Python to Access Web Data " can u please help me in assignment of that course.

    ReplyDelete
  4. UnknownFebruary 23, 2021 at 1:03 PM

    where is css file

    ReplyDelete
  5. UnknownMay 20, 2021 at 2:01 AM

    The CSS File would be nice. THX.

    ReplyDelete
  6. UnknownJuly 29, 2021 at 3:00 AM

    What is the code for CSS file?

    ReplyDelete
  7. e-commerceAugust 15, 2021 at 3:28 AM

    This above coding in any error

    ReplyDelete

Post a Comment

Popular Posts