jQuery Form labels Plugin Demo Back to the tutorial

Login

Default Functionality

Run the plugin with default configuration options

Code

                            $("#form1").formLabels();
                        
Submit the form to see returned values

Login

Option: 'excludeElts'

Excludes certain elements from being 'labelized'

Code

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

Login

Option: 'refreshOnResize'

Whether or not refresh labels on window resize event.
Resize browser window horizontally to see that labels are changing their position

Code

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

Login

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

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

Login

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

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

Login

Option: 'semantic'

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

Code

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

Login

Option: 'semantic'

Refresh labels' position. Useful when input position has been changed due to DOM manipulations, elements resizing, etc.
Resize browser window horizontally, and then hit "refresh" to recalculate positions

Code

                            var formLabels = $("#form7").formLabels({
                                labelParent : 'body'
                            });

                            $("#refreshB").on("click", function () {
                                formLabels.refreshLabels();
                            });
                        
Submit the form to see returned values