Introduction to Form Submission PART I

[Xav]

Morning all. Here's a basic tutorial to explain form submission. I say "basic", although this sort of thing is invaluable to a newbie wanting to get the gist of how it works. Here we go!

Introduction
Form submission is when you have some fields of data in a webpage. You click on "Send" and the data gets, well, sent. The data is sent to another page, where you can pick it up again using PHP.

Here is an example - you are on Google, signing up to its brilliant Google Mail service. You fill in all the text boxes and click "Sign Up". It takes you to another page, which tells you that you now have a Google Mail account.

On the page where you enter the data (which we will now call the "form"), there is no PHP code at all. All we have is some XHTML magic to cart off the data, and the receiving page (which can be the same page!) has the PHP code which uses the data.

How it Works
Get your HTML or XHTML document open (preferably XHTML of course ) and start a new form section:

<form method="post" action="result.php">

As you can see, the <form> tag takes two attributes - one is action, which is a link to the result page. This is the page that the user will be directed to when they submit the form, and the data will be sent there as well.

The second is meth0d, sorry, method. There are two types of method - GET and POST.

• POST sends the data directly to the result page. The user sees nothing.
• GET sends the data by appending some data onto the URL. This is in the form of the normal page name, followed by a question mark and some parameters. These are separated by the ampersand symbol, with key/value pairs sent with the equals sign inbetween them. Example: example.com/index.php?data1=avalue&data2=anothervalue

As you can see, in the GET example the form is being sent with two values - one called "data1" and the other called "data2". The value of the first is "avalue" and the other is "anothervalue". Hopefully you can pick this out from the URL.

Which one to use?
It depends on the situation as to whether to use GET or POST. Both are equally accessible in the PHP. The difference is that in GET the data is stored in the URL. This means that the user can bookmark it and it will always load the page with the data as well.

In POST, the data is confidential, which is better for high-security uses, and for things which don't need to be bookmarked, or shouldn't be visible to the user. Also, with GET you don't have to "resend the data" when refreshing, which you often have to do with POST in browsers. Bear this in mind.

Adding the fields
Now it's time to make the data form:

First Name: <input type="text" name="foreName" /><br />
Second Name: <input type="text" name="surName" /><br />

A few things to note here. We are using an <input> tag; there are other tags that work with forms as well, but this is the most common (for example, <select> and <textarea>). Also, we are giving the inputs names. This is so important that I have highlighted it in bold. Give everything names, otherwise you can't access the data later.

You can use a table or something to align the elements, as the <form> tag permits the use of other formatting tags etc. inside it, under valid XHTML.

Finally, we just need to have a way of submitting the data:

<input type="submit" value="Send the Form!" />

This is different from the other inputs. First of all, even though it looks like a button, it isn't strictly one. Instead, it's a "submitter". Because this returns no value, we do not need to give it a name, but the value attribute denotes the text which goes on the button (which is not a button! ).

Lastly (but W3C important) we need to round off our form:

</form>

Thus we have a working form which we can fill with data and submit to the page "result.php". Fire it up in your browser.

Conclusion
This is the graphical side of it - in PART II we will see how to make a grab for the data and use it in our results page.

Xav

Please, PLEASE +rep if useful. :001_tt2: Leave comments below!

[Jordan]

This type of information is essential for those people just learning web development using PHP. Nice work, +rep.

[Xav]

Cheers, my good man! Always happy to help!

Can I have that +rep for my other tutorial as well? Then I'll be a Code Slinger!

[Xav]

@John: You didn't need to -rep me. I'm not begging for +rep - my other tutorial I had left open, just in case I needed the contest points. I don't need them now, so I would like to claim my +rep for it instead.

[asdpyro]

When might we see "part 2"?

Very nice tut. Cant wait for part 2, very handy for a project im working on now where i have a form mail script that doesn't work. Trying to fix it is proving to be difficult.

[Xav]

I can't be bothered to write Part 2, but since you're so interested I will try and write it as soon as I can.

[asdpyro]

not trying to bother, just was curious to when we might see a part 2, didn't realize how new part one was..

[Xav]

Yes I just did it recently (like a couple of days ago). If you can't wait, you just need to use the PHP variable $_GET['foreName'] or $_POST['surName'] to get the data. Simple!