[Bryon]

PHP and HTML Forms.

Introduction: This tutorial is going to be on how to use PHP to "interact" with HTML forms. Also, on how to "create" HTML forms, and the diffrent types of inputs. This tutorial is not a tutorial on how to use HTML tags, or how to learn basic PHP knowledge. You should have *basic* knowledge of HTML and PHP to understand this to the fullest extent.

Section 1 ~HTML Forms:

Using forms in HTML is a nice way that you can "interact" with visitors on your site. You can use them to collect information from your visitors, like in a member registration/login script.

A - First off, the HTML <form> tag -

The <form> tag must be opened <form [attributes]>, and closed </form>.

The HTML form tag is used to start a form. There are a few diffrent attributes that the <form> tag has.


1 - The "action" => The "action" attribute is used to specify which, or what, script or URL the form will submit its data to. I can be set to either a URL, or a script/program. More will be described next.
2 - The "method" attribute => The method can be set to either GET, or POST. If you want to know the "true" diffrence between these two ways to send data, use google.

- GET. When you set the forms method equal to GET, when you submit the data, the data will be passed to the "action" in the actual URL.

Example:

<form action="index.php" method="GET">

When you submit that form, the data entered into the form's fields will be passed to "index.php" in name=value pairs.
More about form "inputs" will be explained later, but say you have:

<input type="text" name="username">

When you submit the form, it will send the data in the URL: index.php?username=value. Where username is the name of the "input", and "value" is the value that has been typed into that "input".


- POST. When you set the forms method equal to POST, when you submit the data, the data will be not be passed to the "action" in the actual URL. Instead, the information is still passed to the "action", just the visitor doesn't see it, it is "hidden".

Example:

<form action="index.php" method="POST">

When you submit that form, the data is passed to the "action", just hidden.
Say you have:

<input type="text" name="username">

In your form. When you submit the form, it will send the data to the "action": index.php. You won't see the data in the URL though.

That is the best way I can describe the diffrence between GET and POST for "newbies". More seasoned "coders" might know actually the diffrence. I do, but if I explained it here, a lot of you would be confused. Anyways, to move on.



B - Second, the HTML <input> tag -

The <input> tag I would say is the most common HTML form tag, besides the <form> tag itself.

There are a lot more attributes to an <input> tag.

1 - The "name" attribute => The name attribute is used to "tell" whatever script that will "handle" the form when submitted, the specific <input> tag. The name is relied on "heavily" also when using PHP to "receive" submitted forms, I would also say. The name can be anythign you wish, (within reason ). Also, you can have as many <inputs> as you wish within <form> tags.

The name is set using:

<input name="whatever">

More will be discussed later on, on how to use this.

2 - The "value" attribute => The value attribute is used to automatically "add" data to that specific <input>. Example:

<input name="string" value="Hello World!">

That would "automatically" put the text "Hello World!" into the <input> tag, much like the visitor typed it. Except they wouldnt have. More will be discussed later on, on how to use this.

3 - The "type" attribute => The type attribute is used to determine which type of input the <input> will be. The input type can be:

- Text => Makes an input where the user can type plain-text characters into the "box". (Shows a "box" that the visitor can type text into).

Example:

<input type="text" name="username">

- Submit => Makes an input "button", that when "clicked", submits the form. When used, the <input>'s value attribute is what is "shown" on the button.

Example:

<input type="submit" value="Submit Form!">

- Hidden => When used, it doesnt show anything in the users browser, except in the source code. It is used to pass information to scripts that the user wouldnt see and alter without looking at the source of the page. It is used the same way as "text" <input>'s, just not shown.

Example:

<input type="hidden" name="memberid" value="5412">

There are many many more attributes that can be used in <input> tags. Some, but not limited to, would be: size, maxlength, id, readonly, disabled, style. Sse Google if you want to learn about them.




There are many other HTML tags that can be used in forms. Some more are select, checkbox, radio button. Again, use Google if you want to learn about them. The same basis applies to them as <input> tags, on how to interact with them using PHP.


Here is an example of an HTML form:

 <form method="post" action="login.php"> 
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="Login Now!" name="submit">
</form>

By now, you should understand everything that is there, and be able to figure out what that will show on an HTML page.

Edit: Fixed the aligning.

[Bryon]

I had to post it in two.

Section 2 ~The PHP side of it all:

Since HTML is the way to "show" the actual form, and collect the visitors "information", PHP provides the "backend" part of the puzzle. Ok now to start. I hope I don't lost anyone in this part, as it might get confusing for you.

A - How to get information from a submitted form.

This part right here just tells you how to get the submitted information from a form, once its been submitted to the script. The next section describes how to check if a form has been submitted.

When a HTML form has been submitted, EACH input, select, checkbox, etc tag that was in the HTML form, just put into either the $_POST or the $_GET global arrays in PHP. If your forms method was POST, then they would go into $_POST. If your forms method was GET, then they would be in the array $_GET.

They go into the array as follows. (This is assuming your method is POST):

$_POST['name'] = value

Where "name" is the value of the name attribute in the specific form input tag, and value is the data that has been entered into that input.

So say I have:

<input type="text" name="username">

And the visitor types in "NedreN".

When they submit the form, (again assumeing action="post"). You could "view", or use, the information like this:

$username = $_POST['username'];

If you then "echo'ed" $username, you would see the string "NedreN".

You should now know how to get information typed into a <input> tag, and place it into a PHP variable. Remember, if your <form>'s method was GET, instead of POST, you would just use:

$username = $_GET['username'];

B - How to check if the form has been submitted.

There is a few ways to check using PHP weather or not the form has been submitted. The way I usually do it is to put a "name" attribute on the forms <input type="submit"> tag.

Such as:

<input type="submit" value="Login Now!" name="submit">

Using PHP's function, isset(), you can check weather or not $_POST['submit'] is set. Since all inputs are put into name=value pairs into either $_GET or $_POST, the submit would be included.

If the form WAS submitted, the variable $_POST['submit'] would be set. If the form was NOT submited, $_POST['submit'] would NOT be set. (Again, this is assuming your method is POST and you have the example "submit" <input> tag I have provided).

So thus, knowing that the variable would be set only if the form was submitted. You could check if the form was submitted using a simple if, else statement.

Example:

 <?php

 
if (isset($_POST['submit'])) { 
 
echo "The form has been submitted";
 
}
 
?>

You should be able to tell what that little "snippet" does. It checks weather or not the HTML form was submitted, assuming you had the submit tag have the name "submit" and method equals "post".

Conclusion:

Using this, you can now, (or should now ), be able to use PHP to interact with HTML forms.

There is many things you can do with submitted data using PHP. You could use mysql_query() to send querys to your mysql database base using the supplied data. You could use the data and do ANYTHING with it.

One last thing before I go. Here is a small script that can be used to show you an example of all of this pieced together:

Save this as "testform.php":

<html>
<head>
<title>PHP Form Test</title>
</head>
<body>
<?php
if (isset($_POST['submit'])) {
echo "Form submitted. Data: <br>";
$i = 1;
foreach ($_POST as $name => $value) {
echo "Input $i<br> <b>Name:</b> $name<br> <b>Value:</b> $value <br><br>";
$i++;
}
echo "<br><br><br>";
}
?>
 
 
 
<b><u>Enter some data:</u></b>
<br>
<form action="testform.php" method="POST">
 
 
<!-- You can put as many inputs here as you wish, and test them out. I will put a few for you. Just remember to name each one seperatly. -->
 
Field 1: <input type="text" name="field1"><br>
Field 2: <input type="text" name="field2"><br>
Haha: <input type="text" name="haha"><br>
Username: <input type="text" name="username"><br>
Password: <input type="text" name="password">
 
<br>
<br>
 
<input type="submit" name="submit" value="Test Fields">
</form>
 
 
</body>
</html>

Ok. You might not understand exactly what that does, so Ill explain. What it does, is show a few HTML inputs. When you fill them out and hit enter, it loops through the $_POST array. For each name=value pair, it echos the name and the value of it. You can see a working example here: http://nedren.elementfx.com/testform.php

If I have forgotten ANYTHING at all in here, or you feel anythign should be added into this, please tell me ASAP. This took me a good hour and 46 minutes to write, since I started at about 12 am EST. This was written by ME, NedreN, and should not appear on any other websites without my permission. Unless I place it on there. Right now, the only site this is going on is x10Hosting's.

Your welcome

Any reputatation, points, thank you's, etc would make me very happy.

Also, if you have ANY questions, what-so-ever about this, or anything similar, you can always hit me up on AIM, (AFNedreN is my sn), Email me, (AFNedreN@gmail.com), Post here, or PM me on this forum. I'm always able to help people out with any problems they might be having with PHP, and/or MySQL, and HTML.

PS: I will prolly edit this a few times while I fix mistakes.

You are excellent with making tutorials, easy to understand.

[Bryon]

Thank you

Is there anything else "you people" want me to talk about in it? I got pretty tired last night whenI got to the PHP part of it, so I dont know what I really might hav eforgot, or what I could add to it.

[Bobswat]

NedreN, your tutorial is excellent, easy to understand, easy to follow along, and it teaches all the basics that needed to be covered for somebody to understand the concepts of PHP and HTML forms, I think you should continue to write tutorials and post them here, this one helped me alot...:grin:

:shaun: <----sheep?



Next Tutorial Idea........SQL query and database table building...