Creating Credit Card Payment Forms With HTML5
HTML5 makes styling websites far easier than before. That also allows for the creation of forms to be easier as well. In this tutorial, you will learn how to use HTML5 to make a credit card payment form.
If you have not already done so, open Visual Studio and begin a new web project. If you prefer to use your own development environment or a text editor such as notepad, you can set them up at this time.
The first thing you will do is set up your typical HTML document with your HTML, head, and body tags. The code for the page is as follows:
The next thing we will do is include all of the necessary information for taking credit card payments. It is quite a bit of information so if anything, the code is provided for you below to copy and paste into your file or download the source code located at the end of the tutorial.
<input id=name name=name type=text placeholder="First and last name" required autofocus />
<input id=email name=email type=email placeholder="email@example.com" required />
<input id=phone name=phone type=tel placeholder="Eg. +14445556666" required />
<textarea id=address name=address rows=5 required>
<label for=postcode>Post Code</label>
<input id=postcode name=postcode type=text required />
<input id=country name=country type=text required />
<input id=visa name=cardtype type=radio />
<input id=amex name=cardtype type=radio />
<input id=mastercard name=cardtype type=radio />
<label for=cardnumber>Card Number</label>
<input id=cardnumber name=cardnumber type=number required />
<label for=secure>Security Code</label>
<input id=secure name=secure type=number required />
<label for=namecard>Name on Card</label>
<input id=namecard name=namecard type=text placeholder="Exact namne as on the card" required />
<button type=submit>Buy It!</button>
The first is all the personal information, the second is the address for mailing and the third is the card detail portion. At the very bottom of the form, we have our submit button. Now this is merely the skeleton of the code. The actual form functionality comes from a database. Remember, once the information gets submitted it needs to be processed and taxes needs to be calculated as well as shipping.
There are also ways to use this form and simply connect it to merchant accounts or a third party system such as Paypal or Google Checkout! In reality, there are many ways in which you can apply today’s lesson.
The final product, when ran, should appear like the image below:
A Few Last Words…
HTML5 has opened an entire new programming sensation with the new tags provided and cleaner syntax. Thank you for being a valued reader and join us next time for additional HTML tutorials.
Download Source Files