Form elements: 40 CSS/JS styles and Functional Technical Processing

The following are the most commonly used 40 CSS/JS styles and functional techniques to process form elements. They are actually fully collected.

 

1-Styling dropdown select boxes-modifier drop-down list.

2-<select> Something New, Part 1-using a little DOM scripting and some creative CSS, you can make the drop-down list much better.

3-Styling even more form controls-this is the control of HTML form elements. CSS can be used to control different display effects selected by checkbox.

4-Check it, don't select it-when there are too many elements to select from multiple selection boxes, you can scroll the selection items. The demo code is here: here.

5-DropDown-xHTML/CSS/Javascript replacement of classic selectbox-this is a demo that replaces the traditional drop-down list.

6-Masked Input Plugin-this is the effect of modifying the jQuery library, providing users with more convenient Input and verification. The code is tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

7-Custom Checkbox with jQuery-provides customized checkbox effects. There are two skin options: Safari skin and default skin.

8-LiveValidation is a small open-source javascript library that provides client input verification.

9-FancyForm-FancyForm is a powerful alternative to the checkbox script, providing the strongest flexibility in appearance and functionality.

 

10-Styling disabled text inputs-a text input box that cannot be entered. View the demo code: Styling disabled form controls with CSS

11-PrettyCheckboxes-a simple jQuery plugin to customize the appearance of checkbox and radio buttons.

12-Building a better web forms: Context highlighting using jQuery-the demo code is here:

13-Control.SelectMultiple this is an example of simultaneous use of the drop-down list and checkbox. It's cool.

 

14-Justify elements using jQuery and CSS-to create a form, internal elements must be precisely aligned. You can use jQuery to easily achieve this.

15-jQuery Form Input Example Plugin-A jQuery plug-in that prompts the text to disappear when the user enters the focus point. Many websites use this method. The demo code is here: here.

16-Jquery-Autotab-Automatic tab jump is also a jQuery plug-in.

 

17-jquery-asmselect-enhanced version of the drop-down list. Demo code here: here and here.

18-jQuery.AddToList-A jQuery plug-in that is very convenient for customization. The drop-down list shows more content and adds content through AJAX. if the content is added successfully, it becomes one of the drop-down menu options. Useful Tips: here is the Demo code.

19-Easy Multi Select Transfer with jQuery-a perfect menu selection example of jQuery.

20-fValidator-fValidator is an open-source free javascript tool that provides simple form verification. Here is an example: examples.

21-Grow a textarea-provides the ability to redefine the size of a textarea box.

 

22-jQuery selectbox replacement-A jQuery plug-in that provides a better UI to replace the HTML drop-down list. The demo code is here: here.

23-Unobtrusive Slider Control V2-position the Slider by entering the value, and change the color. The demo is here: here.

24-jQuery Field Plug-in-jQuery Plug-in provides powerful form control functions, such as file upload types.

 

25-jquery.combobox-jquery. combobox is a useful tool for creating HTML-style combobox. The demo code is here: here.

 

26-Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements-This JavaScript and CSS provides customizable images as the background for checkbox, radio buttons, and select lists.

27-ToggleFormText plug-in example-ToggleFormText is a jQuery plug-in that provides input box help text display.

 

28-Password field with strength meter-extjs library, showing the Password strength.

 

29-styling file inputs with css and the dom-beautiful FILE input box design.

 

30-Pin plugin for Prototype, Remember Field's Values-prototype Pin plug-in provides the ability to record a certain input box value. Demo code: here.

31-accessible, javascript-enhanced, css-able form elements for mootools-A mootools javascript-class custom element that allows you to customize your checkboxes and radiobuttons through CSS.

32-Resizeable Textboxes-redefine the size of the text input box.

33-Resizeable Textboxes-replace the button with an image, written in JavaScript and jQuery. demo here: here.

34-jQuery AlphaNumeric-jQuery AlphaNumeric is a javascript control plug-in that limits the length of textboxes or textareas input characters.

35-Mootools Form Hints-Mootools/Javascript Form provides online help in the input box.

 

36-MultiSelect-drop-down selection box + checkbox effect. Here is an example: here.

37-Watermark Input Plugin-this is a jQuery plug-in that displays the Input box for additional information.

38-Select box manipulation

39-Spinner Control

40-Autohelp