Making a payment form using only HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> payment form</form></title>
</head>
<body>
<p>PAYMET FORM</p>
<h1>
MAKE PAYMENT
</h1>
<p> * name: <input type="text" required> </p>
<p> *Gender</p>
<p>
male <input type="radio" name="Gender" id="Gender" required>
female <input type="radio" name="Gender" id="Gender"required>
other <input type="radio" name="Gender" id="Gender"required>
</p>
<fieldset>
<legend>Address</legend>
<p>
<textarea name="adress" id="adrress" cols="190" rows="10"></textarea>
</p>
</fieldset>
<p>
* email <input type="email" name="email" id="email"required>
</p>
<p> * pincode <input type="number" name="pincode" id="picode" required> </p>
<h2>payment details </h2>
<p>card type
<input type="button" value="visa ">
<input type="button" value="paytm ">
<input type="button" value="phone pe ">
<input type="button" value="rupay">
</p>
<p>card no <input type="number" name="card" id="card"></p>
<p> *CVV
<input type="password" name="password " id="password"required>
</p>
<p>
<input type="submit" value="pay now ">
</p>
</form>
</body>
</html>
Hey guys, welcome back to our programming blog.
Everyday, we come up with new and freshly curated juicy coding articles to make your life better.
Today we are presenting how to code for a Payment form website like banking websites.
So, further ado, lets get right into it!!
First of all, create your boiler plate (i.e. the template of your html document.)
Now, we are gonna create options for gender.
To do this, we simply need to make an input tag first <input>
Now we have to give the essential attributes to this input tag, which are "type", "name", "id" and "required" , to give these attributes to the input tag, you simply need to write it inside the input tag just after writing input. It should look something like this <input type=" " name=" " id=" " required>.
Now we need to enter the values of these attributes (NOTE:- "required" attribute doesn't need any value.). As we are creating the options for gender, we will need three options, namely Female, Male and Others. The value of "type" attribute of the input tags of each gender will be same because it tells the input tag which type of input it is. In this case, the input is radio, which means it is an option type of input.
After doing that, we have to enter the value of "name" and "id" attributes, ideally keeping them same for each input tag is better, but it won't hurt if we don't keep them same. For example, if we have to make the input tag of Female, we enter the name and id values as "female" just for the sake of simplicity.
Similarly, for Male and Others, the name and id should be "male" and "others", respectively.
this is the code which you can use to make a beautiful payment form using only HTML
Comments
Post a Comment