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 (userDetails.html). Think following form would be used to ask some details from users who visit PHPKnowHow.

<html>
<body>
<form name="frmUserDetails" method="post" action="userDetails.php">
<fieldset>
<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>
</fieldset>
<fieldset>
<legend>User Account Details</legend>
Username:
<input type="text" name="txtUsername" /><br />
Password:
<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
</fieldset>
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" name="btnReset" value="Reset" />
</form>
</body>
</html>

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 to look it better since this is just for illustration.

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

<?php

echo '<pre>';
var_export($_POST);
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' => 'robin@example.com',
  '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 (userDetails.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 userDetails.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 empty and isset

Since the existence and value of form fields vary from one submission to another, in your real application you will have to check form field values before using them. Therefore you would use empty and isset language constructs quite often.

<?php

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

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

?>

Naming Conventions

You can see that we have added prefixes like txt, hdn, chk to form field names. This is for easy identification at our PHP script. Sometimes it’s required to know the type of the form field for processing.

There are no standard naming conventions for form fields. 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 (userDetails.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" />

File upload fields

The only form field we didn’t discuss in this article is file upload field (<input type=”file” />) that lets users upload files to a web server. It requires its own article and we would cover it soon.

Dealing with Multiple Rows of Form Fields

userDetails.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 (userDetailsNew.html).

<html>
<body>
<form name="frmUserDetails" method="post" action="userDetailsNew.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" />
</form>
</body>
</html>

If we want to display submitted names, our userDetailsNew.php would be like below.

<?php

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.

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.

<html>
<body>
<form name="frmUserDetails" method="post" action="userDetailsNew.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" />
</form>
</body>
</html>

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

<?php

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...

You Are at	:	Get and Post > Dealing with Form Fields
Previous Article	:	Understanding Get and Post
Next Article	:	File Upload

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.