Create a payment form using HTML & CSS
Certainly! Here's an example of a basic payment form using HTML and CSS:
html
<!DOCTYPE html>
<html>
<head>
<title>Payment Form</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="number"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Payment Form</h1>
<form>
<div class="form-group">
<label for="cardholder">Cardholder Name:</label>
<input type="text" id="cardholder" name="cardholder" placeholder="Enter the
cardholder's name">
</div>
<div class="form-group">
<label for="cardnumber">Card Number:</label>
<input type="text" id="cardnumber" name="cardnumber" placeholder="Enter the card
number">
</div>
<div class="form-group">
<label for="expiration">Expiration Date:</label>
<input type="text" id="expiration" name="expiration" placeholder="MM / YY">
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="number" id="cvv" name="cvv" placeholder="Enter the CVV">
</div>
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<!-- Add more options as needed -->
</select>
</div>
<div class="form-group">
lt;input type="submit" value="Submit Payment">
</div>
</form>
</div>
</body>
</html>In this example, the form is contained within a container div with a maximum width of 400 pixels. The form elements include fields for the cardholder's name, card number, expiration date, CVV, and country. The form input fields are styled with padding, borders, and border radius to provide a clean and user-friendly appearance. The submit button is styled with a background color, text color, and border radius.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.