CreateaFreeWebsite  with Responsive Web Design

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

Option <option></option>

Note:Include Closing option tag for W3C compliance.

Attributes

 

A simple selection form(single choice):

What states have you visited?


A simple selection form (multiple choices):

What states have you visited?


For multiple selections Hold Down the Control Key

 

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)

What states have you visited?

For multiple selections Hold Down the Control Key

 

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