Forms and Selection Boxes
Selection boxes add a little elegance to the structure of a form.
They simply allow a user to make single or multiple selections from a predefined list.
The HTML Code:
Select <select></select>
Attributes
- name (required) supplies the name for the name/value pair.
- size determines the number of options to be displayed at one time. Default=1.
- multiple allows mutiple selections. (Control Key depressed)
Option <option></option>
Note:Include Closing option tag for W3C compliance.
Attributes
- value (Use value attribute as shown for Xhtml compliance.)
A simple selection form(single choice):
A simple selection form (multiple choices):
The HTML5 Form Code (Multiple choices)
For Single Choice: omit size and multiple attributes
<!DOCTYPE html>
<html>
<head>
<title>Text Selection Box1</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="parse-selection.php">
<p>What states have you visited?<br>
<select name="state[]" size="7" multiple>
<option value="Alabama">Alabama</option>
<option value="Arkansas">Arkansas</option>
<option value="Colorado">Colorado</option>
<option value="Kentucky">Kentucky</option>
<option value="Tennessee">Tennessee</option>
<option value="Washington">Washington</option>
<option value="None of these states">None of the above.</option>
</select>
<input type="submit"></p>
</form>
</body>
</html>
Same form with scrolling:(Multiple choices)
The HTML Form Code (Adds Scrolling by Changing size attribute to 4)
<!DOCTYPE html>
<html>
<head>
<title>Text Selection Box2</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="parse-selection.php">
<p>What states have you visited?<br>
<select name="state[]" size="4" multiple>
<option value="alabama">Alabama</option>
<option value="arkansas">Arkansas</option>
<option value="colorado">Colorado</option>
<option value="kentucky">Kentucky</option>
<option value="tennessee">Tennessee</option>
<option value="washington">Washington</option>
<option value="none">None of the above.</option>
</select><br>
<input type="submit"></p>
</form>
</body>
</html>
Note: Most people don't know how to make multiple selections using a selection box.
Include the instruction for holding down the Control Key on your form.
PHP Script
<!DOCTYPE html>
<html>
<head>
<title>Parse Selections</title>
<meta charset="utf-8">
</head>
<body>
<?
$state=$_POST['state'];
$value=$_POST['value'];
print "<h1 style=text-align: center>You have visted:</h1>";
print "<p style=text-align: center>";
foreach ($state as $value){
print "$value<br>";
}
print "</p>";
print "<br>";
print "<p style=text-align: center><a href=formselections.htm>Back to Tutorial</a></p>";
?>
</body>
</html>
Advanced students: Copy the HTML pages and script into your Apache/htdocs folder as you have in the previous lessons and test them. Experiment with making changes and adding style settings to both.