Learn how to create and use sticky forms, which saves data that has been entered into a form, so a user does not have to re-type out the information if there is an error.
In this tutorial I will take you from the basics of HTML and PHP, so you do not need any knowledge of either language to learn how to make stick forms!

The basic principal to sticky forms is that you are just taking the data sent by the form (Using a POST or GET method) and then just setting that data as the value for the input. If this explanation confuses you, read on as I explain it all in great detail!

I will be creating a form with just 2 inputs, your name and also a description of yourself. The name input will just be a text input and the description box will be a text area input.

So let's start off by creating our form.

PLAIN TEXT
PHP:
  1. <html>
  2. <body>
  3. <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">

Now, that above piece of code just starts a new HTML document with the <html> tag, then it opens the body using the <body> tag. Then we start off creating our form, the <form> tag tells the browser that you are starting a form, then the action=" " attribute tells the browser, where to go when the form is submitted. In this case I have used a little bit of PHP to make this script more dynamic. I have set it to <?php $_SERVER['PHP_SELF']; ?> what this will do is just put the name of the page you are on (Lets just say form.php) and will put it in there. So no matter what the name of your page is, it will change to meet your needs. Then the method attribute tells the browser whether or not to use the POST method or the GET method. The POST method is much more secure so I will be using that method for this

PLAIN TEXT
PHP:
  1. <p><b>Your Name : </b><input type="text" name="name" value="
  2. <?php if(isset($_POST['name'])) echo $_POST['name'];
  3. ?>
  4. " /></p>

The above piece of code is a very important piece of code, with lots of things to explain.

First off I use a <p> tag to start a new paragraph, then I put a <b> tag, anything within the <b> </b> tags is made bold. Then I start off a new input by using the <input> tag. The type=" " attribute is where you define what type of input you would like (Ex : text, checkbox, radio, etc..) For this tutorial we are using a text form input. Then the name=" " attribute is where we set the name of this specific input. Seeing as how this input is used to put your name in, that is what I will call it.

Next we have the most important piece of code. This is where the term "Stick Form" comes into play. As you can see I start a new PHP code block, then I start a new if statement.

What it is saying is, IF the input "name" is submitted THEN echo out the value of "name". The isset() function in PHP is used to find out if something has been submitted. Then we use a $_POST global variable to find out if the input of "name" has been submitted. If we were using GET as our form method (Ex : method="get") then we would have this set to $_GET['name'].

PLAIN TEXT
PHP:
  1. <p><b>Your Description : </b><br />
  2. <textarea name="description" cols="35" rows="5">
  3. <?php if(isset($_POST['description'])) echo $_POST['description'];?>
  4. </textarea>

The above piece of code is pretty much the exact same as the one before it. This just tells the browser to create a textarea that is 35 columns wide and 5 rows tall. Then it uses the same "Stick Form" idea as it did in the previous input.

PLAIN TEXT
PHP:
  1. <p><input type="submit" name="submit" value="Submit" /></p>
  2. </form>
  3. </body>
  4. </html>

This piece of code just creates a submit button to submit our form (And see sticky forms in action) and then we close off our form, body and html tags.

We should now have our finalized code which looks like this :

PLAIN TEXT
PHP:
  1. <html>
  2. <body>
  3. <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
  4.  
  5. <p><b>Your Name : </b><input type="text" name="name" value="<?php if(isset($_POST['name'])) echo $_POST['name'];?>" /></p>
  6.  
  7. <p><b>Your Description : </b><br />
  8. <textarea name="description" cols="6" rows="35"><?php if(isset($_POST['description'])) echo $_POST['description'];?></textarea>
  9.  
  10. <p><input type="submit" name="submit" value="Submit" /></p>
  11. </form>
  12. </body>
  13. </html>

Then we just need to save our file as something, I will be saving mine as form.php. Again though, you can save it as anything because the form is dynamic.

Now upload your file to your website and go to the file (form.php in my case). Enter in some info into the 2 inputs then click submit, you will see that the information that you entered into the text boxes stay there. You can use this method when you have error checking on your forms (When you check for empty forms). You just add this to your forms value=" " attribute so if a user gets an error on the form they don't have to re-type out everything that was correct once again.

Thank you for reading my tutorial,
If you have any questions or comments about this tutorial please feel free to use the contact form on this website to send us an e-mail!

Share and enjoy our tutorial : These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • del.icio.us
  • Fark
  • Furl
  • Slashdot
  • Netscape
  • BlinkList
  • Ma.gnolia
  • Reddit
  • Technorati