In this example we will learn how to handle data from a drop-down-list in HTML with PHP.
For this example we will use:
- A computer with PHP>= 5.5 installed
- notepad++
We will show you how to add select boxes and multi-select boxes to a form, how to retrieve the input data from them and how manipulate the data.
1. Getting Started
To fully understand HTML drop-down-list, we have to grasp the concept of HTML forms. This is because HTML drop-down-list is mostly contained in HTML form tags. HTML forms allow user’s to send data to a server or website. HTML forms are created with the opening <form> and closing </form> tag. Theform tag defines an html form.
Form elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.
index.php
<!DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML Form</title>
</head>
<body>
<form action="index.php" method ="post">
Name:
<input type ="text" name ="name" required>
<br>
E-mail:
<input type ="email" name ="email" required>
<br>
<input type="submit" value=submit>
</form>
</body>
</html>
The code above creates an html form. The “action” attribute in the form tag(line 23) tells the form where to submit its content while the “method” attribute let’s the form know which method to use when transmitting its content. The method attribute can either be GETor POST.
1.1 HTML Drop-down-list
A drop-down list is also known as a pull down box or select box. A select box contains one or more “options”. Each option has a “value”, just like other inputs, and also a string of text between the option tags.
index.html
< !DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML Form</title>
</head>
<body>
<form action= "index.php" method =
"post">
Name:
<input type = "text" name = "name" required>
<br><br>
E-mail:
<input type = "email" name = "email" required>
<br><br>
<select>
<option value= Female> Female </option>
<option value= Male> Male </option>
</select><br><br>
<select>
<option value= Volvo> Volvo </option>
<option value= Mercedes> Mercedes </option>
<option value= Peaugot> Peaugot </option>
<option value= Honda> Honda </option>
</select><br><br>
<input type="submit" value=submit>
</form>
</body>
</html>
HTML Drop-down list is created with the <select> tags, and each item in the list is created with the option tag ( line 32 ).
The content between the opening < option > and closing < /option > tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted. If the value attribute is not specified or defined, the content of the option tag is sent to the server.
1.2 Handling List Data With PHP
index1.php
<!DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0%;
font-family:"helvetica", "verdana", "calibri", "san serif";
overflow: hidden;
padding: 0%;
border: 0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML Form</title>
</head>
<body>
<?php
if(isset($_POST["submit"])){
echo $_POST["gender"]."<br>";
echo $_POST["cars"]."<br>";
}
else{
?>
<form action="index1.php" method ="post">
<select name=gender>
<option value= Female> Female </option>
<option value= Male> Male </option>
</select><br><br>
<select name=cars>
<option value= Volvo> Volvo </option>
<option value= Mercedes> Mercedes </option>
<option value= Peaugot> Peaugot </option>
<option value= Honda> Honda </option>
</select><br><br>
<input type="submit" value=submit name=submit>
</form>
<?php
}
?>
</body>
</html>
In the sample code above we simply check if the form has been submitted(line 24 to 28). If it has been submitted we echo the values selected in the list or else we echo a form containing the drop-down list.
Note: It’s always a good idea to have a “blank” option as the first option in your select box. It forces the user to make a conscious selection from the box and avoids a situation where the user might skip over the box without meaning to. Of course, this will require validation.
1.3 Dealing With Multiple Fields
It is possible to create forms fields that send mutiple values rather than a single value. For example the list below sends mutiple values to the server.
index2.php
<!DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0%;
font-family: "helvetica", "verdana", "calibri", "san serif";
overflow: hidden;
padding: 0%;
border: 0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title> HTML Form </title>
</head>
<body>
<?php
if(isset($_POST["submit"])){
echo "<p>Your Selection Are: </p>";
echo $_POST["gender"] . "<br>";
if(isset($_POST["cars"])){
echo "<h3>The Cars You Selected Are: </h3>";
foreach($_POST["cars"] as $car)
echo $car ."<br>";
}
if(isset($_POST["name"])){
echo "<h3>The Names You Selected Are: </h3>";
foreach($_POST["name"] as $name)
echo $name ."<br>";
}
}
else{
?>
<form action="index2.php" method ="post">
<select name=gender>
<option value= Female> Female </option>
<option value= Male> Male </option>
</select><br><br>
<select name=cars[] multiple="mutiple" size="3">
<option value= Volvo> Volvo </option>
<option value= Mercedes> Mercedes </option>
<option value= Peaugot> Peaugot </option>
<option value= Honda> Honda </option>
</select><br><br>
<select name=name[] multiple="mutiple" size="3">
<option value= Kelvin> Kelvin </option>
<option value= John> John </option>
<option value= Ken> Ken </option>
<option value= Francis> Francis </option>
</select><br><br>
<input type= "submit" value= submit name= submit>
</form>
<?php
}
?>
</body>
</html>
Two square brackets are appended to the name of each select tag (line 46 and 53). The square bracket tells the PHP engine to expect multiple values for those fields and to create corresponding nested arrays within the relevant superglobal array ($_POST in this case).
The script loops through each of the array elements in the nested array and echo there values on different lines.
Note: It is considered bad practise to trust user input without validating it. So you shouldn’t pass the values in $_GET and $_POST directly to echo or print for display in a webpage. A malicious user might be trying to break into the site. It is quite easy for a malicious user to submit form data to an unprotected site that could be used to gain access to other users credentials.
2. Summary
In this example we learnt about html forms, what are they and how to create them. We also learnt how to add select boxes and multi-select boxes to an HTML form, how to retrieve the input data and manipulate them.
3. Download the source code
You can download the full source code of this example here: phpdropdownexample
