Автор: NOUPE
Перевод: Всеволод Козлов
Формы нуждаются в грамотной визуальной структуре, четкой иерархии элементов и богатом функционале, который достигается с помощью применения AJAX. В связи с этим у дизайнеров просто бескрайний простор для креатива.
Благодаря AJAX’у, мы можем обеспечить интерактивность форм в режиме реального времени. Мы можем моментально предупредить пользователя об ошибочном заполнении какого-либо поля формы, отправлять формы без обновления страницы сайта и т.д.
Эта статья содержит в себе обзор 47 лучших, на наш взгляд, AJAX CSS форм. Надеюсь, что Вы найдете тут подходящее для себя!
Конструирование форм
1. Uni Form — попытка стандартизировать разметку форм (xhtml + css), сделать форму привлекательной, хорошо структурированной, семантической, удобной и доступной.
2. Формы чисто на CSS. Бестабличные формы — Отличный пример форм, созданных по современным стандартам. Они работают в Win/IE6, Firefox v1.0+, Win/Opera v8.0, имеют незначительные отличия в Mac/Safari v1.0.3 и Mac/Safari v1.2.
3. Бестабличная форма — отличная привлекательная форма, изюминка которой в графическом элементе в полях ввода логина и пароля.
4. Стильная форма — отличный пример того, как из невзрачной формы сделать что-то очень привлекательное.
Конструирование элементов форм
5. Niceforms 1.0 — позволяет изменять внешний вид наиболее часто используемых элеметов форм. Можно использовать как готовый шаблон, так и сделанный собственноручно.
6. Fancy Form — скрипт, позволяющий в режиме реального времени ставить и снимать флажки с чекбоксов.
7. Оформляем формы с помощью CSS — 224 скриншота, показывающих мощь css применительно к формам. Тестировалось в 14 браузерах и различных комбинациях с операционными системами.
8. Делаем хорошую форму — семантическая форма.
9. Создаем кнопки манипулирования формой с помощью эффекта раздвижных дверей — кросс-браузерная техника.
Юзабилити и доступность форм
10. Приятные и доступные формы — доступные формы на css.
11. Чекбоксы в блоках со скроллингом
12. Руководство по созданию доступных форм
AJAX обработка форм
13. Контактная форма на AJAX — отличный пример доступного AJAX’а.
14. Автозаполнение с помощью AJAX — реализуется с помощью выпадающего меню доступных значений для автозаполнения форм.
15. Индикаторная загрузка файла — фишка в визуальном отображении процесса загрузки файла.
16. jQuery Form Plugin — позволяет с минимумом усилий проапгрейдить обычные формы до использования в работе AJAX.
17. Cforms — контактная форма на AJAX для WordPress.
Проверка форм на правильность заполнения
18. Really Easy Field validation with Prototype — простейший в использовании скрипт проверки полей форм на правильность заполнения.
19. Live Validation — проверка полей форм на правильность заполнения в режиме реального времени их заполнения.
21. fValidator
Подсказки по заполнению полей форм
22. Подсказки по исправлению ошибок при заполнении полей форм
23. Подсказки по заполнению полей форм
Скрытие полей форм
24. Скрытие и отображение полей форм
Практические рекомендации по созданию форм
25. Рекомендации по созданию превосходных форм — css-рекомендации
26. Рекомендации по созданию юзабельных форм — улучшаем юзабилити форм.
Примеры, которые Вы обязаны посмотреть
31. Pretty Forms
32. AJAX CAPTCHA
34. Ext File Upload Form Widget Example
35. Control.TextArea- Prototype
36. Instant Edit
Руководства
39. Степень безопасности вводимого пароля — скрипт, позволяющий оценивать безопасность введенного пароля, исходя из количества символов в нем.
41. Degradable Ajax Form Validation
42. STYLING FILE INPUTS WITH CSS AND THE DOM
43. Form Styling with CSS — оформляем нашу форму с помощью CSS.
Онлайновые генераторы форм
44. Wufoo Form Builder — бесплатный генератор HTML-форм. Позволяет создавать формы, опросы, приглашения…
45. Web Form Factory
46. Jot Form - превосходный визуальный редактор форм. Есть возможность выбрать конкретный вид формы.
47. Form Assembly — коллекция CSS-стилей для форм.
Оригинал статьи: 47+ Excellent Ajax CSS Forms
Смотрите также:
- Как создать логотип?
- Слайд шоу для сайта
- Prestashop шаблоны
- Шаблоны сайтов css
- Панель навигации для сайта
- Семантика HTML
- Css button
- Css редактор
- Ajax вкладки
- Принципы создания сайта
6 комментария(-ев)
вау! пасибо автору!
[...] 47 превосходных AJAX CSS форм [...]
Спасибо за полезную информацию. Лчень пригодилось.
Одну из форм взяла за основу для своего сайта, спасибо)))
Шикарная коллекция, спасибо. Буду изучать, внедрять