Hello Readers, In this document, I shall be delineating a preliminary note on Lecture 3 which could potentially serve as a beneficial aid for a swift revision.
L-3 Web Development
In this lecture, we saw the web form (For eg:- a simple form on any website, youtube comment section etc.) and the basic payment form.
<form> Element, Ex: <form>, <form methd="get">, <form method="get" action="index.php"> etc.
In action, we assign the URL where we want to send the data of the form. Basically, the URL of the server where we will send the data.
the method is a way through which we will send our information to the server. Two ways are 👉GET & POST.
Elements in the <form>:
<input> Element
Attributes:
tyep="text" 👈Pre-defined Value
name="first name" 👈User defined Value
value="Vivek Kumar" :it specifies the initial value of the input field.
<p>Name: * <input type="text" name="name" value="Ex: Vivek Kumar"></p>
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file"> (here, it provides the functionality to upload a file)
<input type="submit">
<input type="reset">
<input type="image">
Form Data
Name Value
name Ayasha
gender Male
<textarea> is used for input of multiple lines. Ex:
<p>Address: <textarea name="address" id="address" cols="100" rows="8"></textarea></p>
<select> , Ex:
<p>Card Type: * <select name="card_type" id="card_type" required> <option value="">--Select a Card Type--</option> <option value="visa">Visa</option> <option value="rupay">Rupay</option> <option value="mastercard">MasterCard</option> </select> </p>
Then we built a basic Payment Form having structured as follows:
Payment Form
User Details
Name:
Gender:
Address:
Email:
Pincode:
Payment Details
Card Type:
Card number:
Expiration Date:
cvv:
Pay Now
On a typical website: the user will fill up the form, then click the submit button, then the server will get the information that will be entered into the database.
It's just because of the name attribute, the input goes from the browser to the server
<p>Pincode: <input type="number" name="pincode" id="pincode"></p>The name attribute should have a unique value in the whole document. If not done, it will conflict. But in the case of radio buttons, it will be the same. Otherwise, the radio buttons will not work.
<p> Male <input type="radio" name="gender" id="male"> Female <input type="radio" name="gender" id="female"> </p><fieldset> is used for grouping similar elements. In our code 'Male' & 'Female' options are grouped.
<legend> is used for naming the grouped elements.
<fieldset> <legend>Gender *</legend> <p> Male <input type="radio" name="gender" id="male" required> Female <input type="radio" name="gender" id="female"> </p> </fieldset>
To just display the text within <option> tag & not allowing it to submit we will leave the attribute as empty like value=""
<p>Card Type: * <select name="card_type" id="card_type" > <option value="">--Select a Card Type--</option> <!--this option will not be submitted--> <option value="visa">Visa</option> <option value="rupay">Rupay</option> <option value="mastercard">MasterCard</option> </select> </p>required attribute don't allow the user to submit by keeping the field empty
<p>Name: * <input type="text" name="name" value="Ex: Vivek Kumar" required></p>
When the forms method is get the input datas are encoded in the URL.
file:///C:/Users/HP/Desktop/Apni%20Kaksha/payment_form.html?name=Ayasha+Kumari+Mandal&gender=on&address=Assam&email=ayasha04082001%40gmail.com&pincode=781012&card_type=visa&card_number=3436&exp_date=0004-04-04&cvv=546
We use get when we normlly need to send the data to the server which isn't secure. For secure type we will use POST
this is the code :
<!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</title> </head> <body> <form action=""> <h1>Payment Form</h1> <p>Required Fields are followed by *</p> <h2>Contact Information</h2> <!--u can also use div span in place of <p>--> <!--if u want to see in the server how the values of input is coming, then we need to find the value assigned to the name attribute, here it's "name"--> <p>Name: * <input type="text" name="name" value="Ex: Vivek Kumar" required></p> <fieldset> <legend>Gender *</legend> <p> Male <input type="radio" name="gender" id="male" required> Female <input type="radio" name="gender" id="female" required> </p> </fieldset> <p>Address: <textarea name="address" id="address" cols="100" rows="8"></textarea></p> <p>Email: *<input type="email" name="email" id="email" required></p> <!--to automatically generate this particular <input> syntax, we can write "input:email"--> <p>Pincode: *<input type="number" name="pincode" id="pincode" required></p> <h2>Payment Information</h2> <p>Card Type: * <select name="card_type" id="card_type" required> <option value="">--Select a Card Type--</option> <!--this option will not be submitted--> <option value="visa">Visa</option> <option value="rupay">Rupay</option> <option value="mastercard">MasterCard</option> </select> </p> <p> Card Number *<input type="number" name="card_number" id="card_number" required> </p> <p> Expiration Date: *<input type="date" name="exp_date" id="exp_date" required> </p> <p>CVV *<input type="password" name="cvv" id="cvv" required></p> <input type="submit" value="Pay Now"> </form> </body> </html>
That's all for today. See you in the next lecture's Quick Revision.
Thank you!