Login   Register  
PHP Classes
elePHPant
Icontem

Rich HTML form select input plug-in - Forms generation and validation package blog

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  All package blogs All package blogs   Forms generation and validation Forms generation and validation   Blog Forms generation and validation package blog   RSS 1.0 feed RSS 2.0 feed   Blog Rich HTML form select...  
  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  
<< Previous: Locating addresses on...>> Next: Showing Google Maps w...

Author: Manuel Lemos

Posted on:

Package: Forms generation and validation

Categories: New features

The HTML forms select inputs are very useful but their limitations do not allow presenting a more detailed and pleasant to read information about the options that the user can select.

The form list select custom input plug-in was released with the goal of overcoming the limitations of regular select inputs.

This article provides an introduction to the features of this new plug-in.




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.

http://www.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:

http://www.meta-language.net/forms-examples.html?example=tes ...


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

You need to be a registered user or login to post a comment

Login Immediately with your account on:

Facebook ConnectGmail or other Google Account
Hotmail or Microsoft Windows LiveStackOverflow
GitHubYahoo


Comments:

1. nice - sarwo (2010-03-25 06:34)
nice... - 0 replies
Read the whole comment and replies


<< Previous: Locating addresses on...>> Next: Showing Google Maps w...
All post categories




  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  
  All package blogs All package blogs   Forms generation and validation Forms generation and validation   Blog Forms generation and validation package blog   RSS 1.0 feed RSS 2.0 feed   Blog Rich HTML form select...