Creating a simple HTML Form to get user comments

In this tutorial series, we're showing you how to interact with a MySQL Database using php. We're creating a simple 2 page website that allows users to post comments on either page, and then shows all comments that have been posted. In our previous article we created a database and setup a table to hold those comments, and now in this article we'll setup a HTML form that allows a user to enter comments.

A quick introduction to HTML Forms

Gathering the Form Data

An HTML form allows a user to type data into a website, and then it submits the data to another page for processing. For example, if you fill out a comment on a website and hit submit, everything that you typed in is submitted to a script on the server that writes your comment to a database.

HTML forms can handle quite a few different forms of input. For example, they can handle:

• Text Boxes:
  
• Radio Buttons
  Option 1
  Option 2
• Checkboxes
  Selection 1
  Selection 2
• ... and more!

Submitting the Form Data

After the user has filled in the above data and clicks a submit button, it will send all of their data to another script for processing. It can either send the data back to the same page for processing, or it can send it to a completely different script to handle the processing.

When the data is passed to a script for processing, it can be passed using either GET or POST. When using GET, all the data is passed in the url, such as:
GET
domain.com/page.php?name=brad&email=brad@domain.com
As you can see, my name and email address is passed in the URL. If you use POST (instead of get), the URL will simple read:
POST
domain.com/page.php
... and my name and email address will be passed behind the scenes.

Our Example Contact Form

Because our comments form is going to be relatively simple, we will be using text boxes for most of the input. Below is our contact form and what the contact form will look like:

<form method='post'>
  NAME: <input type='text' name='name' id='name' /><br />

  Email: <input type='text' name='email' id='email' /><br />

  Website: <input type='text' name='website' id='website' /><br />

  Comment:<br />
  <textarea name='comment' id='comment' /></textarea><br />

  <input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' />

  <input type='submit' value='Submit' />  
</form>

To keep our example straight forward, the form above does not include much formatting. In a real life scenario, you could use css and other html to elements to make the comment form a bit more user friendly.

When looking at the above form, pay attention to the following:

1. In the form tag, we set the method to post (vs get).
2. We have a hidden value that will hold the article's id. We need to know whether the comment is for page 1 or page 2. The value of that articleid will be grabbed using PHP and $_GET.
   For example, we'll have two pages:
   PHPandMySQL.inmotiontesting.com/page1.php?id=1
   PHPandMySQL.inmotiontesting.com/page2.php?id=2
   Notice in the URLs that one has id=1 and one has id=2. We will use PHP to grab this data so that we know which page the comment should belong to.

When the user fills out the information and hits submit, it will POST the data back to the same page. In our next article, we'll show you how to process that data and put it into the database.