 |
| HTML and CSS tutorial for beginners in Hindi |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 18.
In our previous lesson we have learned <iframe> and how to embed another web page in a web page.
Today we will study HTML forms.
HTML forms
We can display forms in a web page. End users can enter information in the form. Capturing some data forms is very common. We see many web sites where we need to log in. In these sites when we are visiting first time we have to register. To do this we give information like name, email and so on. We also give a password. This information is stored in a database. When we are again visiting this web site, we are asked to enter our log in information. This is verified with the stored information and if this is correct then we are taken into next page of web site.These are two different things. First is allowing user to enter information and capture it. Second is store it in a database and retrieve it from database when required. Two different kinds of programs are used for these two situations.
For creating a form for end-user interface and capturing information languages like HTML, CSS are used. These are called client-side or front-end programming languages.
Programs used for tasks like storing data, processing it, and retrieving it as needed are developed using back-end or server-side languages. PHP, ASP are server-side languages.
In short, we use HTML and CSS to create forms which are displayed in web pages. Users can type data in these forms. Back-end programs do all data processing.
Note that: if we right click on a web page and click on inspect, then we can see the HTML for that page. But we can never see back-end programs. They are hidden.
Now let us write a script for displaying a form. Tag used for creating a form is <form>. Very simple!!!
We are going to accept input from user by input elements call text boxes. Of course, these are simple boxes displayed in web pages in which user can type information. Following is code for creating a form with text boxes.
<form action="savedata.php" id="form1">
<h3>Not a member? Fill in only name and email and become a member.</h3>
<br />
First Name:
<br />
<input type="text" name="fname"><br />
Last Name:
<br />
<input type="text" name="lname"><br />
Email:
<br />
<input type="text" name="lname"><br />
</form>
<br /><br />
<button type="submit" form="form1" value="Submit">Submit</button>
Let us understand all this.
We have used <form> to create a form. This tag has an attribute called "action". We specify what action should be taken after form is filled and "Submit" button is clicked by user. In our case it should execute a program named "savedata.php". This is a back-end program.
<form> has another attribute called "id". Using this attribute we assign a name to the form. In this case form name is "form1".
Below this we have written h3. This is heading displayed for the form.
Now comes input elements. <input> element has two attributes. First is "type" attributes. Type "text" means input type is a text box. Another attribute is "name". Data entered by user is saved in the field defined in "name" attribute. In our case, first name that is entered is saved in a field "fname". The text written before <input> ("First Name:") is displayed in the web page. This tells end-user that first name should used in this text box.
We have defined three text boxes like this.
After this there is <button>. This is used to display a button. There are different types of button. Type of our button is "submit". This is a submit button. This tag has another attribute named "form". This tells that this submit form is defined for the form "form1". There is another attribute for <button> namely "value", which is "Submit" in our case. After <button> tag we have written text "Submit". This text is displayed, so that user knows that on clicking here form will be submitted. After submitting the form, data is captured. Once data is captured, back-end saves data in the server.
Remember: We can define different types of input elements for a form. For example text fields, radio buttons, check boxes and so on.
In our case, after clicking on "Submit" we will get a message "Your file was not found". We do not have this file. We have used this name only for understanding the concept.
Remember: <button> does not work in Internet Explorer. We have to use CSS code for this purpose. We are going to study CSS in our lessons later.
Let us write a code for creating a table. Open a new Notepad file. Copy text from lesson-17 from first line to <body>. Copy the code given above for creating a form just after <body>. Give </body> and </html>. See the figure below.
 |
| Figure 18-1. HTML form, HTML text box |
Save this file as "Lesson-18" and "Lesson-18.html". Click on the above figure for PDF file of source code. Double click on HTML document. See the output. Click on figure 19-4 to see form in a web page. In this web page you will see all input elements.
 |
| Figure 18-2 Display form in a web page, HTML form |
Our form is displayed in the web page. In this form there are three text boxes in which users can enter their data. After we click on "Submit" button, we will get message "Your file was not found" because "savedata. php" is not available. This program should be written in PHP.
Important Points:
1. We use <form> tag for creating a form. Users can enter data in this form. Back-end program saves this data in a database.
2. There are input elements in <form>. Input entered is captured by these elements. "type" attribute of <input> tag specifies type of input element displayed, like text box, radio button, checkbox an so on.
3. <input> has another attribute - "name". This is used to specify the name of field in which the entered data is captured.
