Advertisement

Writing to file using PHP Form - Step 1: HTML Codes

Today I will teach you how to make a data collection form using PHP.
Actually this was requested by one of my MSN contacts.
In this tutorial you will learn following functions of PHP:

  • if()
  • isset()
  • fopen()
  • fwrite()
  • fclose()

And following HTML/XHTML codes :

  • <form></form>
  • <input />

And some CSS codes to make our form look better.
Now in this tutorial our form will collect all the information using HTML and will process it using PHP.
I thought I should teach you how to use MySQL to store information, but just as I said above,
someone requested the tutorial to write information to a text file… so I am teaching you how to write to text file,
But dont worry, I will teach you how to store information in MySQL database too, but later.
So, now, lets get started.
What you need :

  • Some Basic HTML knowledge.
  • Basic PHP coding knowledge like <?php ?>
  • Some spare time..

So, assuming you meet all the above requirements, we proceed to Step 1.

Step 1: HTML Codes

First of all, we will make a Form using HTML.
To do this, Open any text editor like Notepad, Wordpad or a HTML editor like Dreamweaver(recommended), Notepad++ etc
If you are using Notepad/Wordpad or any other normal text editor, follow these steps.
Make a new document.
Now, this is basic HTML, we all know that a HTML document always starts with <html> tag and ends with </html> tag.
So, write this code in your document:

HTML Code:
<html>
<head>
<title>This will be your Page's title</title> <!-- You can change the title, set whatever you want -->
</head>
<body> <!-- Printing on page starts from here -->
<!-- This is a comment and will not be printed on page -->

Now we will use our <form> tags here.

What is <form> tag?

The form element creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more.
Forms are used to pass user-data to a specified URL. Here we will use them to write data to text file.

Now, write this code:

HTML Code:
<form action="" method="POST">

Here we used action=”" because we are submitting the data to same page, but it is not necessary, we can define a page here too.
For Example :

HTML Code:
<form action="write.php" method="POST">

This will submit the data to write.php, in which we have our PHP code to write data to text file.
But we dont need to make another file, we are using same file to write data.
Now there are 2 methods of submitting data through a form.

  • Post
  • Get

The HTTP method for sending data to the action URL.
method=”GET” : This method sends the form contents in the URL:

URL?name=value&name=value.

Note: If the form values contains non-ASCII characters or exceeds 100 characters you MUST use method=”post”.
method=”POST” : This method sends the form contents in the body of the request.
This method is recommended, unless in some cases.
Because this method is very secure if you are dealing with logins, andprivate data submission etc because it does not shows the value in theURL.

Note: Most browsers are unable to bookmark post requests.

Now we proceed to <input> tag

What is <input> tag?

The <input> tag defines the start of an input field where the user can enter data.
In Xhtml, you need to close the <input> tag properly like <input …. />
So, write this code under the <form> tag:

HTML Code
Name: <input type="text" name="name" /> <br />
Age: <input type="text" name="age" /> <br />
<input type="hidden" name="hidden" value="Hello, I submitted the form" />
<input type="submit" name="submit" value="Write it !" />
</form> <!-- Ending the form -->

There are 10 different types of input fields.

  • button -> Simple button
  • checkbox -> Checkbox
  • file -> File browser
  • hidden -> hidden input
  • image -> Image
  • password -> Password text, it will show ***** if user enters something.
  • radio -> Radio button
  • reset -> Reset button, it will reset any entered information.
  • submit -> used to submit data
  • text -> simple text field

As you can see, we used 4 input fields, 2 of them are text fields,which collect the data, and the 3rd one is submit button, which submits the data collected by the input fields and one is hidden, means, user can not see it, but still, it will submit some information with the collected data.
This information is assigned by us.
Here we assigned its value as “Hello, I submitted the form“.
We also assigned the value of submit button as “Write it !“, this will be the text shown on submit button, but you can ofcourse change it.

Now finally end the HTML page by writing this bit of code:

HTML Code
</body>
</html>
So, our whole code would be looking like this :
<html>
<head>
<title>This will be your Page's title</title> <!-- You can change the title, set whatever you want -->
</head>
<body> <!-- Printing on page starts from here -->
<!-- This is a comment and will not be printed on page -->
<form action="" method="POST">
Name: <input type="text" name="name" /> <br />
Age: <input type="text" name="age" /> <br />
<input type="hidden" name="hidden" value="Hello, I submitted the form" />
<input type="submit" name="submit" value="Write it !" />
</form> <!-- Ending the form -->
</body>
</html>

Save the file as form.php
But wait, it doesn’t look too good, does it? Well we need CSS to make it look a bit nicer.
Proceed to Next Step.
Writing to file using PHP Form - Step 2: CSS Codes

Related Tutorials



6 responses. Wanna say something?

    Comment #1
  1. restore credit
    Posted on Apr 24, 2008 at 20:32:32

    hello nice site!

  2. Comment #2
  3. Mike Piccoletti
    Posted on Apr 25, 2008 at 23:46:23

    Great tutorial, This is EXACTLY what I asked for… I’m going to do this all sunday, and get it all on my server…

  4. Comment #3
  5. jammarlibre
    Posted on May 19, 2008 at 09:08:49

    Fascinating site and well worth the visit. I will be backa

  6. Comment #4
  7. Melissa
    Posted on May 22, 2008 at 02:01:47

    i love this site.c

  8. Comment #5
  9. Martin
    Posted on May 22, 2008 at 02:01:48

    You have an outstanding good and well structured site. I enjoyed browsing through it.<

  10. Comment #6
  11. Albert
    Posted on May 22, 2008 at 14:10:01

    I thank the Lord for giving us the gift of brilliant preachers!

Post a Comment