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>

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>

Top