Articles in Get and Post Category

Dealing with Form Fields

In Understanding Get and Post it’s explained how to submit data to a PHP script for processing. In this article, let’s examine main form fields, different ways they can be implemented in a web form and how to access them in a PHP script.

Basically following form fields can be available in a web form.

Text boxes (<input type=”text” />)
Text areas (<textarea></textarea>)
Password fields (<input type=”password” />)
Hidden fields (<input type=”hidden” />)

Drop down boxes (<select><option></option></select>)
Check boxes (<input type=”checkbox” />)
Radio buttons (<input type=”radio” />)

Submit buttons (<input type=”submit” />)
Reset buttons (<input type=”reset” />)
Buttons (<input type=”button” />)
Image buttons (<input type=”image” />)
File upload fields (<input type=”file” />)

It’s required that you know HTML to place these fields in a web form and to understand how to use them in a PHP script. Good resources are available online to help you out.

To understand the behavior of these form fields and to learn how to access them in a PHP script, let’s take an example form (user-details.html). Think following form would be used to ask some details from users who visit PHPKnowHow.

<form name="frmUserDetails" method="post" action="user-details.php">
<legend>General Details</legend>
<input type="hidden" name="hdnFormId" value="form-1" />
Name: <input type="text" name="txtName" /><br />
Email: <input type="text" name="txtEmail" /><br />
Gender: <input type="radio" name="optGender" value="male" /> Male
<input type="radio" name="optGender" value="female" /> Female
<br />
How did you hear about us:
<select name="cmbReference">
<option value="1">Search Engine</option>
<option value="2">From a friend</option>
<option value="3">From another site</option>
<option value="4">Other</option>
</select><br />
Comments: <br />
<textarea name="txtComment"></textarea>
<legend>User Account Details</legend>
<input type="text" name="txtUsername" /><br />
<input type="password" name="pwdPassword" /><br />
Newsletter Subscriptions:
<input type="checkbox" name="chkArticles" value="PHP Articles" /> PHP Articles
<input type="checkbox" name="chkNews" value="PHP News" /> PHP News
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" name="btnReset" value="Reset" />

If you ran above HTML file, it would look like below in the web browser.

User details form

No CSS styles have been applied to the form since this is just for illustration.

Now let’s create user-details.php where the form data is posted. First, let’s simply use var_export() debugging function to examine posted data.


echo '<pre>';
echo '</pre>';


Now, if you submitted above form with mentioned details, you would be able to see an array like below.

array (
  'hdnFormId' => 'form-1',
  'txtName' => 'Robin Jackman',
  'txtEmail' => [email protected]',
  'optGender' => 'male',
  'cmbReference' => '1',
  'txtComment' => 'Great resource :-)',
  'txtUsername' => 'robin',
  'pwdPassword' => 'robin123',
  'chkArticles' => 'PHP Articles',
  'btnSubmit' => 'Submit',

Note that no $_POST element has been set for chkNews. This is because elements for checkboxes and radio buttons are set only if they are selected.

Now is the time to reload form (user-details.html) and play around with different values. Make sure you do following changes and examine posted values. You need to reload the form each time you try a new set of values.

  • Empty txtName, txtEmail and txtComment.
  • Don’t select any gender.
  • Don’t select any newsletter subscription.
  • Remove the value attribute from optGender and chkArticles (You need to edit and save user-details.html).
  • Add disabled attribute to some fields.
  • Remove name attribute of some fields.

After couple of rounds, you should be able to make following observations.

  • $_POST array elements are always set for Text boxes, Text areas, Password fields and Hidden fields. When their values are empty, empty strings will be set.
  • Drop down boxes will have the value of selected option.
  • For Check boxes and Radio buttons, elements will be set only if they were checked. Their values would be the values mentioned in their value attribute. If value attribute is not available, posted value will be on when they are checked.
  • If a form field is disabled or doesn’t have name attribute, no element is set for that field.

Using isset() and empty()

Since the existence and value of form fields vary from one submission to another, in your application you will have to check form field values before using them. You can use isset() and empty() language constructs for that purpose.

isset() checks whether the array element is set (true even for elements with empty values) and empty() checks whether the value of an element is empty.


if (isset($_POST['chkArticles'])) {
    // Show some top articles

if (empty($_POST['txtName'])) {
    // Show an an error message


Naming Conventions

You can see that prefixes like txt, hdn, chk have been added to form field names. This is for easy identification in the PHP script. Sometimes it’s easy if the name tells the type of the form field.

There are no standard naming conventions for form fields and sometimes prefixes are not used at all. Below are some prefixes you can use.

  • txt – for Text boxes, Text areas.
  • pwd – for Password fields.
  • hdn – for Hidden fields.
  • cmb – for Drop down boxes (cmb is for combo boxes which is another name used for Drop down boxes).
  • chk – for Check boxes.
  • opt – for Radio buttons (opt is for option buttons which is another name used for Radio buttons).
  • btn – for Buttons.

Button Fields

You saw Submit and Reset buttons in action in above example. Submit button submits the form it belongs to and Reset button loads the values form had when it’s first loaded to the web browser (Most of them would be empty and unchecked values). To illustrate this, add value attribute to txtName in our example as below.

<input type="text" name="txtName" value="Your Name" />

Then reload the form (user-details.html), delete “Your Name” from txtName and enter a different value. After that click Reset button. You would see that value of txtName becomes “Your Name”, the value it had when form loads.

Likewise if you had a checkbox checked when the form loads (Add checked attribute to chkArticles and see), when you click Reset, if you had unchecked the checkbox, it will be checked.

The button type button doesn’t execute anything itself other than being clickable. They are often used to execute JavaScript functions (like validation). So, instead of a Submit button, you could have a button with type button and submit the form, only if the validation passes.

Image buttons (type=”image”) acts similar to normal buttons (type=”button”). Additionally they let you specify an image for the button.

<input type="image" src="button.gif" alt="Submit" name="btnSubmit" />

Dealing with Multiple Rows of Form Fields

user-details.html contained a simple form and dealing with its posted values ($_POST['txtName'], $_POST['txtEmail']) is easy. But what if you had rows of form fields? Consider a form like below (user-details-new.html).

<form name="frmUserDetails" method="post" action="user-details-new.php">
Name: <input type="text" name="txtName_1" id="txtName_1" /><br />
Name: <input type="text" name="txtName_2" id="txtName_2" /><br />
Name: <input type="text" name="txtName_3" id="txtName_3" /><br />
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" name="btnReset" value="Reset" />

If we want to display submitted names, our user-details-new.php would be like below.


echo $_POST['txtName_1'].'<br />';
echo $_POST['txtName_2'].'<br />';
echo $_POST['txtName_3'].'<br />';


Since this form contains only three fields, this implementation is ok. But what if the form is long and it had 20+ similar fields? Writing and echo statement for each field wouldn’t be that handy. It would be nice if txtName comes as an array that we can iterate in a loop.

You can get a similar set of form fields as an array when you add a pair of square brackets to the form field name like below.

<form name="frmUserDetails" method="post" action="user-details-new.php">
Name: <input type="text" name="txtName[]" id="txtName_1" /><br />
Name: <input type="text" name="txtName[]" id="txtName_2" /><br />
Name: <input type="text" name="txtName[]" id="txtName_3" /><br />
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" name="btnReset" value="Reset" />

All the values entered to “txtName[]“ fields will be added to “txtName” array that we can access via $_POST['txtName']. Now we can change user-details-new.php to use only one echo statement.


foreach ($_POST['txtName'] as $name) {
    echo $name.'<br />';

Even though you can use same value to name attribute of form fields, you should use distinct values for id attribute since otherwise it’s a standards violation (Each id in a HTML page should be unique).
Where to Head from Here...
Share with Your Peers...

We Value Your Feedback...

We love to hear what you think about this article. Please provide your opinion, suggestions and improvements using following form. Note that submitted feedback is not displayed but we will get back to you if it needs a reply.