jQuery Form labels Plugin Demo Back to the tutorial

Default Functionality

Runs plugin with default configuration options

Code

                            $.fn.formLabels();
                        
Submit the form to see returned values

Option: 'excludeElts'

Excludes certain elements from being 'labelized'

Code

                            $.fn.formLabels({
                                excludeElts: 'input[name=secretWord]'
                            });
                        
Submit the form to see returned values

Option: 'refreshOnResize'

Whether or not refresh labels on window resize event.
Play with plus/minus buttons - you should notice that labels position is also changing accordingly to iframe size.

Code

                            $.fn.formLabels({
                                labelParent : 'body',
                                refreshOnResize : true
                            });
                        
Submit the form to see returned values

Option: 'safemode'

if enabled the plugin runs in safe mode without animation and other special features. Useful when dealing with unusual situations. Default: false

Code

                            $.fn.formLabels({
                                safemode : true
                            });
                        
Submit the form to see returned values

Option: 'labelParent'

Parent container for your 'labels'. Default: 'form' - labels will be inserted in closest form. Inspect source to find that labels was placed outside the form in the #labels div

Code

                            $.fn.formLabels({
                                labelParent : '#labels'
                            });
                        
Submit the form to see returned values

Option: 'semantic'

Although it's not recommended to turn off this function, sometimes it can be useful. Setting it to false prevents insserting <label/> before input element and appends it at the end of a form

Code

                            $.fn.formLabels({
                                semantic : false
                            });
                        
Submit the form to see returned values

Option: 'semantic'

Refresh labels' position. Useful when input position has been changed due to DOM manipulations, elements resizing, etc.
Click on "+" to move the form, then hit "refresh" to recalculate positions

Code

                            $("#refreshB").click(function(){
                                $.fn.formLabels.refreshLabels()
                                pushMessage("Labels were refreshed...");
                            })
                        
Submit the form to see returned values