Chinaunix首页 | 论坛 | 博客
  • 博客访问: 6594723
  • 博文数量: 227
  • 博客积分: 10047
  • 博客等级: 上将
  • 技术积分: 6678
  • 用 户 组: 普通用户
  • 注册时间: 2006-07-11 10:33
个人简介

网上的蜘蛛

文章分类

全部博文(227)

文章存档

2010年(19)

2009年(29)

2008年(179)

分类: 系统运维

2008-05-10 23:10:06

Copy from:

Styling Forms


1) - an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms.


2) - A great example of a well designed form using modern css techniques. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.


3) - has a great login form example, with a graphic in the input field.


4) - How to style and stop web forms from looking ugly.


Styling Form Elements


5) - is a script that will replace the most commonly used form elements with custom designed ones. One of these improvements would be the possibility of selecting a radio or check box by clicking its adjacent label, it also highlights the labels of the selected boxes to make the selections even clearer and more…


6) - FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.


7) - 224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.


8 ) - Demo of accessible complex, grid-style (i.e. table-like) form using semantic markup (fieldset, legend, label etc…) and CSS.


9) - A technique that demonstrates a cross-browser technique for button elements with sliding doors.


Form Usability and Accessibility


10) - Nick Rigby takes a look at how to make better and accessible forms using CSS instead of old-school tables.


11) - An attempt to use multiple checkboxes in a scrollable list - better than using ctrl-click in a normal multi-select listbox


12) - Web Usability - Roger Hudson provides a stunningly clear tutorial on how a form that is well designed with good visual layout will benefit all sighted users


Ajax Forms Processing


13) - Excellent example of accessible AJAX. Uses unobtrusive Javascript. By Dustin Diaz.


14) - where it adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key.


15) - Swf meets Ajax for beautiful file uploads using Mootools.

Demo :


16) - allows you to easily and unobtrusively upgrade HTML forms to use AJAX to gather information from the form element to determine how to manage the submit process which allows you to have full control over how the data is submitted.


17) - An AJAX Contact form plugin for Wordpress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page.


Awesome Form Validation


18 ) - Here’s a form validation script that is very easy to use.

Demo :
Easy Field validation with Prototype


19) - is a small open source javascript library built for giving users real-time validation information as they fill out forms.


20) - Learn how to use AJAX in order to process and validate your forms.


21) - fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.


Form Field Hints

22) - This article will explain one way of achieving Validation Hints effect while the user type using JavaScript and CSS.


23) - A nice technique for adding help info to forms without using pop-up windows.


Hide Form Fields


24) - Wouldn’t it be a cool idea to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can.


Great Tips for Creating Forms


25) - so truly important CSS tips for all form builders out there.


26) - A number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.


A Must See Examples


27)


28)


29)


30)


31)


32)


33)


34)


35)


36)


37)


38)


Tutorials

39) - A small tutorial on how to build a password strength meter like the one on Google’s new account form.


40) - HTML Form Submit with AJAX/Javascript Example/Tutorial


41) - Learn how to provide real-time feedback to the user using server-side validation scripts.


42) - Shaun Inman shows us a guide to achieving consistent, stylish file upload inputs via clever use of js and css.


43)


Online Form Builder


44) - Free HTML Form Builder - Create Forms, Surveys and Invitations and more…


45 ) - is an open source web form generator which automatically generates the necessary backend code to tie your form to a database.


46) - is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others).


47) - A Beautiful Collection of CSS Stylesheets For Web Forms

阅读(2480) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~