Rich HTML form select input plug-in - PHP Forms Class with HTML Generator and JavaScript Validation package blog

By Manuel Lemos

manuellemos.net

<email contact>

Contents

- Introduction

- HTML formatted options in a table

- Demonstration video

- Live example page


- Introduction

The form list select plug-in provides a compatible replacement for select inputs. To add a list select input to a form you can use the same parameters as when you add a regular select input.

The only difference is that you need to set the TYPE parameter to custom and add the CustomClass to form_list_select_class.

$currencies = array(
''=>'None',
'USD'=>'USD',
'EUR'=>'EUR',
'GPB'=>'GBP',
'YEN'=>'YEN'
);

$form->AddInput(array(
"TYPE"=>"custom",
"CustomClass"=>"form_list_select_class",
"ID"=>"currency",
"NAME"=>"currency",
"LABEL"=>"<u>C</u>urrency",
"ACCESSKEY"=>"t",
"VALUE"=>"",
"OPTIONS"=>$currencies,
));

It supports both single and multiple select options. So you can use it to let the user select one or more options from a list.


- HTML formatted options in a table

Sometimes you wish select inputs would allow a more pleasant way of presenting the list of available options. For instance, it would be nice to show be able to show nice icons near each option, or format options with HTML tags.

It would also be nice if we could present the options in a table on which you can display different attributes of each option in the same row aligned in columns for each attribute. This way users can compare better the details of each option.

The form list select plug-in provides both these capabilities.


- Demonstration video

You may watch a video presentation that demonstrates how these features were used to provide a nicer user interface to let users upload different types of icons and images to the PHPClasses design contest.

phpclasses.org/design/

Jump to the position of 11m40s of the video to see how the form list select plug-in was used here.




- Example code

To take advantage of the features of the list select plug-in, you need to add to extra parameters to the input definition.

The Columns parameter is an array that defines what will appear in the columns of the options table.

Each column may display either a radio (or checkbox) input for selecting the respective option, the name of the option, or arbitrary option HTML data passed by the application.

The table may display also an header row. The Columns parameter defines the HTML for each column header row.

The Rows parameter is also an associative array that provides additional HTML data associated to each of the options. This data will be displayed in the rows of each option.

$form->AddInput(array(
"TYPE"=>"custom",
"ID"=>"currency",
"NAME"=>"currency",
"LABEL"=>"<u>C</u>urrency",
"ACCESSKEY"=>"t",
"CustomClass"=>"form_list_select_class",
"VALUE"=>"",
"OPTIONS"=>$currencies,
'Columns'=>array(
array(
'Type'=>'Input'
),
array(
'Type'=>'Option',
'Header'=>'Symbol'
),
array(
'Type'=>'Data',
'Header'=>'Name',
'Row'=>'Name',
),
array(
'Type'=>'Data',
'Header'=>'Region',
'Row'=>'Region',
),
array(
'Type'=>'Data',
'Header'=>'Value',
'Row'=>'Value',
),
),
'Rows'=>array(
'USD'=>array(
'Name'=>'Dollar',
'Region'=>'United States',
'Value'=>'<tt>$1.00</tt>'
),
'EUR'=>array(
'Name'=>'Euro',
'Region'=>'Europe',
'Value'=>'<tt>$1.4986</tt>'
),
'GPB'=>array(
'Name'=>'Pound',
'Region'=>'United Kingdom',
'Value'=>'<tt>$1.6737</tt>'
),
'YEN'=>array(
'Name'=>'Yen',
'Region'=>'Japan',
'Value'=>'<tt>$0.011132</tt>'
),
)
));


- Live example page

The forms package comes with the test_list_select.php example script that demonstrates these features. You may also see a live example of this class here:

meta-language.net/forms-examples.ht ...


If you have questions or doubts, just post a comment to this article here.