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.
Free Tools We Recommend
Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit