Home » PHP » PHP Form Dropdown Example

About Olayemi Odunayo

Olayemi Odunayo
I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

PHP Form Dropdown Example

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:

  1. A computer with PHP>= 5.5 installed
  2. 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

Download
You can download the full source code of this example here: phpdropdownexample
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments