WebAppers » Forms

Style the Look & Feel of Form Elements with Uniform

Ray Cheung — Fri, 19 Feb 2010 07:01:29 +0000

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility. You can also look at Niceforms that gives your forms new themes.

Requirements: jQuery Framework 1.3+
Demo: http://pixelmatrixdesign.com/uniform/
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Ketchup – A Slim jQuery Plugin to Validate Your Forms

Ray Cheung — Wed, 17 Feb 2010 14:41:32 +0000

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality. Although Ketchup is designed to be styled and extended by you, it already looks tasty and gives you the most common validations by default. If there is no validation fits your needs, you can always write your own too. You can make your own ketchup with ease.

Requirements: jQuery Framework
Demo: http://demos.usejquery.com/ketchup-plugin/
License: MIT, GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

jQuery MultiSelect Plugin with ThemeRoller Support

Ray Cheung — Wed, 03 Feb 2010 07:01:43 +0000

jQuery MultiSelect Plugin was intended to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.

jQuery MultiSelect Plugin is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. It is known to work in Firefox 2+, IE 6+, Chrome Beta/4, Safari 4 and Opera 10.

Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-multiselect…
License: MIT, GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

iPhone Style Password Masking using Mootools

Ray Cheung — Mon, 11 Jan 2010 07:01:14 +0000

We have introduced jQuery iPhone-like Password Fields few months ago. Now, we have a similar iPhone Style Passing Masking using Mootools – PassShark. It is a free and easy-to-implement password masking class, which has been on tested on Safari 3+, Firefox 3+, Opera 10+, IE 6 and 7.

The goal with delayed password masking, is to help the user through a less painful way of populating forms and specifically password fields. This methodology is fast becoming popular on Mobile Devices, Desktop applications and the Web browser alike.

Requirements: Mootools Framework
Demo: https://www.queridodesign.net/blog/passshark
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Open Source Cross-Browser WYSIWYG Editor

Ray Cheung — Tue, 05 Jan 2010 07:01:29 +0000

openWYSIWYG is a free cross-browser WYSIWYG editor that’s packed with every rich-text editing feature you need to make your content management system much better. It loads extremely fast. Completely written in JavaScript and DHTML.

Setting up openWYSIWYG is so easy, you can quickly turn any </strong> into a powerful WYSIWYG editor with just a few simple lines of code. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text, e.g. Bold, italicize, change the color of your text, and more.</p><p style="text-align: center;"><a title="OpenWYSIWYG" href="http://www.openwebware.com/" target="_blank"><span></span></a></p><blockquote><p>Requirements: IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+<br /> Demo: <a title="Demo" href="http://www.openwebware.com/wysiwyg/demo.shtml" target="_blank">http://www.openwebware.com/wysiwyg/demo.shtml</a><br /> License: LGPL License</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2008/06/12/spaw-gpl-web-based-wysiwyg-editor-control/" rel="bookmark" title="June 12, 2008">SPAW – GPL Web Based WYSIWYG Editor Control</a></li><li><a href="http://www.webappers.com/2007/12/19/nicedit-micro-inline-wysiwyg-content-editor/" rel="bookmark" title="December 19, 2007">NicEdit Micro Inline WYSIWYG Content Editor</a></li><li><a href="http://www.webappers.com/2008/02/04/controltextarea-cross-browser-textarea-manipulation/" rel="bookmark" title="February 4, 2008">Control.TextArea Cross Browser Textarea Manipulation</a></li><li><a href="http://www.webappers.com/2007/06/21/fckeditor-lightweight-html-wysiwyg-editor/" rel="bookmark" title="June 21, 2007">FCKeditor Lightweight HTML WYSIWYG Editor</a></li><li><a href="http://www.webappers.com/2007/06/07/tinymce-wysiwyg-javascript-content-editor/" rel="bookmark" title="June 7, 2007">TinyMCE WYSIWYG Javascript Content Editor</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> <article> <h1>Easy and Slick Way to Do Auto-Complete & Auto-Suggest</h1> <p>Ray Cheung — Mon, 04 Jan 2010 07:01:56 +0000</p> <p><a title="AutoSuggest jQuery Plugin" href="http://code.drewwilson.com/entry/autosuggest-jquery-plugin" target="_blank">AutoSuggest jQuery Plugin</a> makes auto-completing extremely easy. AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.</p><p>Also, <a title="AutoSuggest jQuery Plugin" href="http://code.drewwilson.com/entry/autosuggest-jquery-plugin" target="_blank">AutoSuggest jQuery Plugin</a> uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file. And also, AutoSuggest jQuery plugin is dramatically smaller in size with just 7kb minified.</p><p style="text-align: center;"><a title="AutoSuggest jQuery Plugin" href="http://code.drewwilson.com/entry/autosuggest-jquery-plugin" target="_blank"></a></p><blockquote><p>Requirements: jQuery Framework<br /> Demo: <a title="Demo" rel="nofollow" href="http://code.drewwilson.com/entry/autosuggest-jquery-plugin" target="_blank">http://code.drewwilson.com/entry/autosuggest-jquery-plugin</a><br /> License: MIT, GPL License</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2010/01/18/tiptip-custom-tooltip-jquery-plugin-with-zero-images/" rel="bookmark" title="January 18, 2010">TipTip Custom Tooltip jQuery Plugin with Zero Images</a></li><li><a href="http://www.webappers.com/2010/02/16/jquery-digital-clock-inspired-by-htc-hero-widget/" rel="bookmark" title="February 16, 2010">jQuery Digital Clock Inspired by HTC Hero Widget</a></li><li><a href="http://www.webappers.com/2009/01/27/date-picker-jquery-plugin-to-fit-in-your-web-application/" rel="bookmark" title="January 27, 2009">Date Picker jQuery Plugin to Fit in Your Web Application</a></li><li><a href="http://www.webappers.com/2007/06/08/ajax-auto-suggest-auto-complete-textfield/" rel="bookmark" title="June 8, 2007">Ajax Auto-Suggest / Auto-Complete Textfield</a></li><li><a href="http://www.webappers.com/2008/12/02/beautiful-sifr-replaced-text-with-a-jquery-plugin/" rel="bookmark" title="December 2, 2008">Beautiful sIFR Replaced Text with a jQuery Plugin</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> <article> <h1>Free Web Form Elements in PSD Format</h1> <p>Ray Cheung — Sat, 26 Dec 2009 07:01:07 +0000</p> <p>A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms usually include checkboxes, radio buttons, or text fields. Designing webforms can be tedious sometimes. <strong>M. Manojlovic</strong> has saved us so much time by providing us some really nice <strong>Web Form Elements </strong>(<strong><a title="Web Form Elements 1" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528" target="_blank">Vol.1</a></strong> and <strong><a title="Web Form Elements 2" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080" target="_blank">Vol.2</a></strong>) in PSD, which you can use them for free.</p><h3>Web Form Elements Vol.1</h3><p style="text-align: center;"><a title="Web Form Elements 1" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528" target="_blank"></a></p><h3>Web Form Elements Vol.2</h3><p style="text-align: center;"><a title="Web Form Elements 2" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080" target="_blank"></a></p><blockquote><p>Requirements: -<br /> Web Form Vol.1: <a title="Demo" rel="nofollow" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-104261528" target="_blank">http://sniperyu.deviantart.com/art/Web-Form-Elements-1…</a><br /> Web Form Vol.2: <a title="Demo" rel="nofollow" href="http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2-146544080" target="_blank">http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2…</a><br /> License: License Free</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2009/05/07/fancy-form-styling-and-advanced-form-functionality/" rel="bookmark" title="May 7, 2009">Fancy Form Styling and Advanced Form Functionality</a></li><li><a href="http://www.webappers.com/2008/07/11/alternate-select-multiple-form-elements/" rel="bookmark" title="July 11, 2008">Alternate Select Multiple Form Elements</a></li><li><a href="http://www.webappers.com/2010/02/19/style-the-look-feel-of-form-elements-with-uniform/" rel="bookmark" title="February 19, 2010">Style the Look & Feel of Form Elements with Uniform</a></li><li><a href="http://www.webappers.com/2008/11/21/niceforms-v20-gives-your-forms-new-themes/" rel="bookmark" title="November 21, 2008">Niceforms v2.0 Gives Your Forms New Themes</a></li><li><a href="http://www.webappers.com/2007/07/15/ajax-really-easy-real-time-form-validation/" rel="bookmark" title="July 15, 2007">Ajax Really Easy Real Time Form Validation</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> <article> <h1>Display Editable Form Data As Regular Tabular Data</h1> <p>Ray Cheung — Thu, 24 Dec 2009 07:57:50 +0000</p> <p><strong>CSS Globe</strong> has shown us a little trick that you can apply to your forms to enhance user experience. We will <a title="Tabular Form" href="http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data" target="_blank">display editable form data (indented to be edited, updated) as regular tabular data</a> intended for reading.</p><p>This works on most modern browsers with pure CSS, but we need a little bit of Javascript in order to make this work on Internet Explorer though, because of the lack of support for :focus pseudo-class.</p><p style="text-align: center;"><a title="Tabular Form" href="http://cssglobe.com/post/6984/ux-trick-display-form-data-as-tabular-data" target="_blank"></a></p><blockquote><p>Requirements: -<br /> Demo: <a title="Demo" rel="nofollow" href="http://cssglobe.com/articles/editable_fields/" target="_blank">http://cssglobe.com/articles/editable_fields/</a><br /> License: License Free</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2007/11/22/impressive-and-beautiful-css-styling-mootools-calendar/" rel="bookmark" title="November 22, 2007">Impressive and Beautiful CSS Styling Mootools Calendar</a></li><li><a href="http://www.webappers.com/2007/12/20/fvalidator-validate-input-data-in-html-forms-with-imask/" rel="bookmark" title="December 20, 2007">fValidator Validate input data in HTML forms with iMask</a></li><li><a href="http://www.webappers.com/2008/03/06/windows-internet-explorer-8-for-web-developers/" rel="bookmark" title="March 6, 2008">Windows Internet Explorer 8 for Web Developers</a></li><li><a href="http://www.webappers.com/2008/10/04/raphael-simplify-your-work-with-vector-graphics/" rel="bookmark" title="October 4, 2008">Raphaël Simplify Your Work with Vector Graphics</a></li><li><a href="http://www.webappers.com/2007/06/13/monket-open-source-ajax-calendar/" rel="bookmark" title="June 13, 2007">Monket Open Source Ajax Calendar</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> <article> <h1>Easy to Use Safari Style jQuery Slider Plugin</h1> <p>Ray Cheung — Wed, 25 Nov 2009 07:34:51 +0000</p> <p><a title="jQuery Slider" href="http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/" target="_blank">jQuery Slider plugin (Safari style)</a> is easy to use and multifunctional jQuery plugin. It makes selected elements into sliders. The handle can be moved with the mouse easily. There are various options such as step of pointer, heterogeneity, dimension, limits and scale.</p><p>If you do not fancy the Safari style, you can also define your own new skin for the sliders as well. (Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css)</p><p style="text-align: center;"><a title="jQuery Slider" href="http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/" target="_blank"></a></p><blockquote><p>Requirements: jQuery Framework<br /> Demo: <a title="Demo" rel="nofollow" href="http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/" target="_blank">http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/</a><br /> License: License Free</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2009/03/06/colorbox-customizable-lightbox-plugin-for-jquery/" rel="bookmark" title="March 6, 2009">ColorBox – Customizable Lightbox Plugin for jQuery</a></li><li><a href="http://www.webappers.com/2008/11/27/build-your-own-slideshow-with-s3slider-jquery-plugin/" rel="bookmark" title="November 27, 2008">Build Your Own Slideshow with s3Slider jQuery Plugin</a></li><li><a href="http://www.webappers.com/2008/04/01/fully-interactive-jquery-file-tree/" rel="bookmark" title="April 1, 2008">Fully Interactive jQuery File Tree</a></li><li><a href="http://www.webappers.com/2010/02/16/jquery-digital-clock-inspired-by-htc-hero-widget/" rel="bookmark" title="February 16, 2010">jQuery Digital Clock Inspired by HTC Hero Widget</a></li><li><a href="http://www.webappers.com/2009/02/17/mootools-double-pinned-slider-with-range-indicator/" rel="bookmark" title="February 17, 2009">Mootools Double Pinned Slider with Range Indicator</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> <article> <h1>Create a Twitter Style Login Form with jQuery</h1> <p>Ray Cheung — Fri, 20 Nov 2009 07:01:22 +0000</p> <p><strong>Twitter</strong> is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you <a title="Twitter Login" href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/" target="_blank">how to create a login drop down with Twitter style using jQuery</a>.</p><p>It is easy to follow, it also helps you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. The tutorial explains how it works step by step and it’s good for learning how to do the toggle and tooltips with jQuery.</p><p style="text-align: center;"><a title="Twitter Login" href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/" target="_blank"></a></p><blockquote><p>Requirements: jQuery Framework<br /> Demo: <a title="Demo" rel="nofollow" href="http://aext.net/example/twitterlogin/" target="_blank">http://aext.net/example/twitterlogin/</a><br /> License: License Free</p></blockquote><div class="RelatedPosts"><h3>Related Posts</h3><ul><li><a href="http://www.webappers.com/2010/02/19/style-the-look-feel-of-form-elements-with-uniform/" rel="bookmark" title="February 19, 2010">Style the Look & Feel of Form Elements with Uniform</a></li><li><a href="http://www.webappers.com/2009/12/03/customize-the-look-of-your-twitter-profile-with-themeleon/" rel="bookmark" title="December 3, 2009">Customize the Look of Your Twitter Profile with Themeleon</a></li><li><a href="http://www.webappers.com/2009/07/02/how-to-create-an-elegant-jquery-image-gallery/" rel="bookmark" title="July 2, 2009">How to Create An Elegant jQuery Image Gallery</a></li><li><a href="http://www.webappers.com/2009/05/26/how-to-create-a-tabbled-content-rotator-with-jquery/" rel="bookmark" title="May 26, 2009">How to Create a Tabbled Content Rotator with jQuery</a></li><li><a href="http://www.webappers.com/2009/04/03/create-a-nice-clean-sliding-login-panel-in-jquery/" rel="bookmark" title="April 3, 2009">Create a Nice & Clean Sliding Login Panel in jQuery</a></li></ul></div><h3>Sponsors</h3><p><a href="http://www.pixmac.com/#WebAppers">Pixmac: Stock Photos, Royalty Free Pictures and Images</a></p> </article> </main></body></html>