In this example we will learn how to handle data from a drop-down-list in HTML with PHP.
\nFor this example we will use:<\/p>\n
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.
\n
\n
\n[ulp id=’8njY7i2QRy6sg8pg’]<\/p>\n
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.\u00a0HTML forms allow user’s to send data to a server or website. HTML forms are created with the opening index.php<\/em><\/span><\/p>\n 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 A drop-down list is also known as a pull down box or select box.\u00a0A select box contains one or more \u201coptions\u201d. Each option has a \u201cvalue\u201d, just like other inputs, and also a string of text between the option tags.<\/p>\n index.html<\/em><\/span><\/p>\n HTML Drop-down list is created with the index1.php<\/em><\/span><\/p>\n 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. 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.<\/p>\n index2.php<\/em><\/span><\/p>\n 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). 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.<\/p>\n<form><\/code> and closing <\/form><\/code> tag. Theform<\/code> tag defines an html form.
\nForm elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.<\/p>\n \r\n<!DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML Form<\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<form action=\"index.php\" method =\"post\">\r\nName: \r\n<input type =\"text\" name =\"name\" required>\r\n<br>\r\nE-mail: \r\n<input type =\"email\" name =\"email\" required>\r\n<br>\r\n<input type=\"submit\" value=submit>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nGET<\/code>or POST.<\/code><\/p>\n1.1 HTML Drop-down-list<\/h3>\n
\r\n< !DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML Form<\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<form action= \"index.php\" method = \r\n\"post\">\r\nName: \r\n <input type = \"text\" name = \"name\" required>\r\n<br><br>\r\nE-mail: \r\n<input type = \"email\" name = \"email\" required>\r\n<br><br>\r\n<select>\r\n<option value= Female> Female <\/option>\r\n<option value= Male> Male <\/option>\r\n<\/select><br><br>\r\n\r\n<select>\r\n<option value= Volvo> Volvo <\/option>\r\n<option value= Mercedes> Mercedes <\/option>\r\n<option value= Peaugot> Peaugot <\/option>\r\n<option value= Honda> Honda <\/option>\r\n<\/select><br><br>\r\n\r\n<input type=\"submit\" value=submit>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<select><\/code> tags, and each item in the list is created with the option<\/code> tag ( line 32 ).
\nThe content between the opening < option ><\/code> and closing < \/option ><\/code> 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.<\/p>\n1.2 Handling List Data With PHP<\/h3>\n
\r\n<!DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmargin: 0%;\r\n\tfont-family:\"helvetica\", \"verdana\", \"calibri\", \"san serif\";\r\n\toverflow: hidden;\r\n\tpadding: 0%;\r\n\tborder: 0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML Form<\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<?php\r\nif(isset($_POST[\"submit\"])){\r\necho $_POST[\"gender\"].\"<br>\";\r\necho $_POST[\"cars\"].\"<br>\";\r\n}\r\nelse{\r\n?>\r\n<form action=\"index1.php\" method =\"post\">\r\n<select name=gender>\r\n<option value= Female> Female <\/option>\r\n<option value= Male> Male <\/option>\r\n<\/select><br><br>\r\n<select name=cars>\r\n<option value= Volvo> Volvo <\/option>\r\n<option value= Mercedes> Mercedes <\/option>\r\n<option value= Peaugot> Peaugot <\/option>\r\n<option value= Honda> Honda <\/option>\r\n<\/select><br><br>\r\n<input type=\"submit\" value=submit name=submit>\r\n<\/form>\r\n\r\n<?php\r\n}\r\n?>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\nNote: <\/b> It\u2019s always a good idea to have a \u201cblank\u201d 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.<\/p>\n1.3 Dealing With Multiple Fields<\/h3>\n
\r\n\r\n<!DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmargin: 0%;\r\n\tfont-family: \"helvetica\", \"verdana\", \"calibri\", \"san serif\";\r\n\toverflow: hidden;\r\n\tpadding: 0%;\r\n\tborder: 0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> HTML Form <\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<?php\r\nif(isset($_POST[\"submit\"])){\r\necho \"<p>Your Selection Are: <\/p>\";\r\necho $_POST[\"gender\"] . \"<br>\";\r\nif(isset($_POST[\"cars\"])){\r\necho \"<h3>The Cars You Selected Are: <\/h3>\";\r\nforeach($_POST[\"cars\"] as $car)\r\necho $car .\"<br>\";\r\n}\r\nif(isset($_POST[\"name\"])){\r\necho \"<h3>The Names You Selected Are: <\/h3>\";\r\nforeach($_POST[\"name\"] as $name)\r\necho $name .\"<br>\";\r\n}\r\n\r\n}\r\nelse{\r\n?>\r\n<form action=\"index2.php\" method =\"post\">\r\n<select name=gender>\r\n<option value= Female> Female <\/option>\r\n<option value= Male> Male <\/option>\r\n<\/select><br><br>\r\n<select name=cars[] multiple=\"mutiple\" size=\"3\">\r\n<option value= Volvo> Volvo <\/option>\r\n<option value= Mercedes> Mercedes <\/option>\r\n<option value= Peaugot> Peaugot <\/option>\r\n<option value= Honda> Honda <\/option>\r\n<\/select><br><br>\r\n\r\n<select name=name[] multiple=\"mutiple\" size=\"3\">\r\n<option value= Kelvin> Kelvin <\/option>\r\n<option value= John> John <\/option>\r\n<option value= Ken> Ken <\/option>\r\n<option value= Francis> Francis <\/option>\r\n<\/select><br><br>\r\n\r\n<input type= \"submit\" value= submit name= submit>\r\n<\/form>\r\n\r\n<?php\r\n}\r\n?>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\nThe script loops through each of the array elements in the nested array and echo there values on different lines.
\n Note: <\/b> It is considered bad practise to trust user input without validating it. So you shouldn’t pass the values in $_GET<\/code> and $_POST<\/code> directly to echo<\/code> or print<\/code> 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.<\/p>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n