Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Handling HTML forms with PHP

Saturday, December 6th, 2014 by Servage

formsOne of the first dynamic interaction between frontend HTML and backend PHP was through forms. This almost ancient HTML element is still one of the principal ways of submitting data from users to the server system. It is brilliantly simple and very easy to use, while actually providing vast advanced input fields. In conjunction with JavaScript, forms can turn any dull website into a modern web application.

Working with forms

The process of working with forms is a multi-step process consisting of the same steps every time. Initially the HTML is built to produce the form elements. This could be hardcoded HTML or dynamic HTML built by JavaScript. Often a combination is used, where a prebuilt HTML form is extending fields and functionality depending on the context the form is displayed in, and what previous input the user has made.

Building the form

Each form consists of a <form> element which takes two important attributes “method” and “action”.

Method: Indicates the HTTP method to be used when submitting the data. Usually this is POST, but could be any of the HTTP methods available in the browser.

Action: Indicates the target URL for the data when the form is submitted.

<form method="POST" action="/my-form-handler.php">...</form>

Adding input fields

There are plenty of input fields available, and this post is not going to elaborate on all of them. However, it is important to notice that following regular nested elements in HTML, the corresponding input fields for a form go inside the <form> tag. For example like below:

<form method="POST" action="/my-form-handler.php">
  <input type="text" name="email">
</form>

Submitting form data

There are multiple common ways of submitting the form data. The primary one is when the user clicks the submit button, or secondarily when the user hits “enter”. Alternatively JavaScript can be used to trigger the form submit event. This depend on the use-case. Either way, the input data is submitted to the target URL using the desired HTTP method and is then processed by the server.

Processing form data

In this example we work with a PHP backend. When the PHP script receives a request from a submitted form via POST, then PHP makes that POST data available in a special variable called $_POST. This variable is an array containing the field names as key, and the field values as their corresponding array values. From the above example we take a field called “email” which may contain the value “my@email.com”. This would be available in PHP like below:

// Create a variable to contain the value from the email field
$email = $_POST['email'];

Usually you want to check if a form was actually submitted, and you could do so by checking for the presence of a specific form field. In this case you could check if “email” exists before processing the form data:

if ( isset($_POST['email']) ) {
  $email = $_POST['email'];
}

Handling form submits on the server-side can be a very complex procedure, depending on your form’s setup. You may need advanced validation and then possibly returning the user to the form again, showing some validation errors that need to be taken care of, before the data can be saved. In such a case you would for example render the form again, using some CSS to indicate that there are errors – and probably also want to display some error messages. For example like below:

<form method="POST" action="/my-form-handler.php">
  <p class="error-message">The email is not valid</p>
  <input type="text" name="email" class="error-field">
</form>

Many frameworks try to help with this process, and it is recommend to get some inspiration from such, instead of reinventing the wheel on your own for such standard procedures.

References & more reading

 

Handling HTML forms with PHP, 5.0 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.