🖥️ PROJECT: Building a Checkout Form
Exercise scenario
You are on the front-end development team for an online shopping company by the name of “Brandally”. You have been asked to create a checkout login that allows users to add their billing and payment information and then proceed to checkout.
By the end of the project, your form should look similar to the one shown below:
Task 1:
Add code for a form that takes in billing address details and adds placeholders to help users know the format for entering their information. The output should look similar to the following.
📜 Note: Don’t worry about the CSS for now; that has been taken care of.
Implement your solution below
The following skeleton code is provided to you to add your solution.
Task 1: Solution
<h3>Billing Address</h3><label for="fname"><i class="fa fa-user"></i> Full Name</label><input type="text" id="fname" name="firstname" placeholder="John M. Doe"><label for="email"><i class="fa fa-envelope"></i> Email</label><input type="text" id="email" name="email" placeholder="john@example.com"><label for="adr"><i class="fa fa-address-card-o"></i> Address</label><input type="text" id="adr" name="address" placeholder="542 W. 15th Street"><label for="city"><i class="fa fa-institution"></i> City</label><input type="text" id="city" name="city" placeholder="New York"><label for="state">State</label><input type="text" id="state" name="state" placeholder="NY"><label for="zip">Zip</label><input type="text" id="zip" name="zip" placeholder="10001">
Task 2:
To your existing form, add code underneath the billing info, to take in payment details from the user. Add placeholders to help users ...