Web apps – complete guide to coding item-selection controls on HTML Forms

This is a complete guide to coding item-selection controls on HTML Forms.

For web apps, and for web client apps.

Most recently updated in March 2015.

.

Assumptions

You want to display an item-selection control on an HTML Form. The item-selection control could be any of the following:

  • Drop-down list
  • List box (single- or multi-selection)
  • Radio button group
  • Check box group

The items on the list must be dynamically fetched when the page is rendered.

.

Prerequisite knowledge

The item-selection control has a name attribute, which enables programmatic access to the values that are submitted by the HTML Form user.

Each item in an item-selection control has the following important attributes:

The text content of the item will be displayed to the user, and is located between the element’s opening and closing tags. It actually is not an attribute. Example:

<select name=Colour>
    <option value=Red>Red</option>
    <option value=Green>Green</option>
    <option value=Blue>Blue</option>
</select>

.

The value of the item will be submitted as the user’s selection(s) when the HTML Form is submitted. (A single-selection control will submit a maximum of one single value. A multi-selection control will submit zero or more values, as text, comma-separated.) value is an attribute of the <option> and <input> elements. Example:

<select name=Colour>
    <option value=23>Red</option>
    <option value=42>Green</option>
    <option value=67>Blue</option>
</select>

.

The selected or checked attribute of the item will indicate that item has been selected. selected is an attribute of the <option> element, and checked is an attribute of the <input type=radio… and <input type=checkbox… elements. Examples:

<select name=Colour>
    <option value=23>Red</option>
    <option value=42 selected>Green</option>
    <option value=67>Blue</option>
</select>

.

<input type=checkbox name=Colours value=23>Red</option>
<input type=checkbox name=Colours value=42 checked>Green</option>
<input type=checkbox name=Colours value=67 checked>Blue</option>

.

As noted above, the items on the list must be dynamically fetched when the page is rendered. The items are stored in memory as a collection.

If the text content is the same as the value, the items can be a simple collection of strings (e.g. List<string>).

If not, the items will be in a SelectList or MultiSelectList object in an ASP.NET MVC web app. The type of each item is SelectListItem. Here’s how the properties match up to the HTML Form element attributes above:

SelectListItem.Text – matches text content

SelectListItem.Value – matches to value

SelectListItem.Selected – matches to selected or checked

.

(more to come)

.

Simple path

.

Complete path

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: