Главная > Формы > 51 один ресурс и обучаемые тексты по созданию и использованию элементов веб-форм
51 один ресурс и обучаемые тексты по созданию и использованию элементов веб-форм30 сентября 2009, 01:45. Разместил: Mysterious Master |
Давайте посмотрим, как можно собственноручно с нуля создать потрясающие и красиво оформленные Form Elements. Вещи могут оказаться очень сложными, даже если вы достаточно опытный дизайнер. Очень сложно привлечь внимание посетителей, но данная статья нацелена на то, чтобы помочь вам разработать семантически корректные, привлекательные, и доступные веб-приложения, чекбоксы, радио кнопки, просто кнопки – да и вообще все, о чем вы могли только подумать, когда пытались создать максимально удобную страницу авторизации и контактов. 1. Как создать привлекательную форму без использования таблиц В данной статье рассказывается о том, как создать удобную и красивую форму на CSS, используя лишь только текст надписи и тэги ввода, для того чтобы симулировать структуру HTML-таблицы. Вы можете использовать все CSS/HTML элементы для того чтобы разрабатывать и оформлять формы в ваших собственных веб-проектах. 2. Простой пример формы Очень подробно описанный обучающий текст, охватывающий ключевую суть, на которую вам стоило бы обратить внимание. 3. Симпатичные понятные формы 4. Дополнение стиля с помощью CSS: Красивые формы Формы не должны быть некрасивыми и скучными, и конечно же, нежелательно чтобы они находились внутри таблиц, чтобы были красивыми и ровными. 5. NiceForms Представляет собой скрипт, которые заменит все основные элементы страницы на свои собственные. Вы можете использовать как стандартную тему, так и разработать свою собственную. 6. Превратите открытку в ошеломительную форму комментариев, используя CSS В данной статье вам расскажут, как можно сделать ошеломительную форму комментариев, используя старую открытку. 7. Усовершенствуйте свои поля ввода, применив простые CSS-трюки В пример приведено то, с чем вы встречаетесь каждый день: форма комментариев в блогах. 8. Забава с формами – оформление элементов ввода текста Когда-нибудь думали о том, чтобы HTML-формы наконец начали сочетаться с дизайном всей страницы? В данной статье продемонстрировано применение оформленных фоновых картинок в HTML-формы, в то же время сохраняя структурную опрятность верстки. 9. Верстка форм и CSS – Пересмотрите 10. Семантические горизонтальные формы Семантические корректные веб-формы с конфигурацией, историй, надписями, и еще немного дизайна на CSS. Протестировано в FF1.x, IE6 и Opera8. (выглядит немного необычно в IE5, но все равно можно пользоваться). 11. Стиль: Фриковый метод верстки стандартных форм 12. Формы без использования таблиц Создавайте красивые веб-формы, используя только CSS – отличный обучающий текст! 13. Сильная форма 7 различных примеров стиля, из которых вы можете извлечь интересный код и создать красивые формы. 14. Простая форма без таблиц Используйте CSS для того чтобы создать собственную форму без использования таблиц. Примеры коды написанные в старомодном HTML, вместо ASP.NET, поэтому не ограничивают вас в валидности, идентификации и так далее. Затем можете продолжить со второй частью их веб-сайта, чтобы изучить возможность отправления и приема информации типа – Оставайтесь в контакте – О том, как создать форму контакта. 15. Причудливый дизайн формы, используя CSS 16. Создавайте формы красивыми, применяя CSS В данной статье вы сможете научиться тому, как можно брать стандартную форму и совершенствовать ее с помощью CSS-трюков и методов. Вы сможете повысить уровень удобства пользования и эстетику верстки. 17. О том, как создать превосходную верстку формы и оформить её с помощью CSS В данном сообщении вам объяснят о том, как делать правильный выбор при верстке форм, и о том как оформлять их с помощью CSS и при этом удерживаться кросс-браузерности. 18. Фоновые изображения в полях форм, используя CSS Добавление привлекательных изображений в ваши HTML-формы иногда может оказать положительное влияние. А сделать это очень просто, используя чистый код CSS. 19. Formy – платформа разработки CSS-форм Универсальный CSS для форм, которые будут задействованы простым естественным образом с HTML-формами. А HTML-формы будут работать довольно терпимо даже без CSS. 20. Изменение стиля форм ввода данных при наведении, используя jQuery Встречается огромное множество скучных и простых форм. Не делайте так, чтобы формы с вашей страницы тоже можно было приписать в эти списки. В данной статье будет показано, как можно их "поперчить", используя CSS-классы и стандартные значения, которые изменяются, в зависимости от выбранного элемента. Все это делается с использованием jQuery. 21. Хинты полей формы на CSS и javascript Основный пример того, насколько полезным может быть использование некоторого кода CSS и javascript в обычной форме. Вместо подсказок всегда отображается простая форма, единственная подсказка для конкретно выделенного элемента. В статье рассказывается о том, как реализовать это. 22. Повышение уровня удобства с автосообщениями Анимированные автосообщения могут быть очень полезными в улучшении удобства использования форм. А платформа Scriptaculous будет крайне подходящей в этом деле. 23. Красивая и опрятная скользящая панель авторизации, разработанная в jQuery 24. "Выберите" что-то новое (select) Применив немного скриптинга DOM и немного творческого подхода к CSS, вы можете сделать более красивый вариант поля выбора "select". К тому же, вы не пожертвуете удобством пользования или доступностью. 25. Uni-Form Uni-Form стремится стандартизировать верстку (xhtml) форм и css, модулировать её так, чтобы люди с базовыми знаниями данных технологий могли получить красивые, грамотные, удобные, семантические и доступные формы. 26. Только CSS. Никаких форм с таблицами Современный и сложный пример создания веб-форм. Работает в Win/IE6, Firefox v1.0+, Win/Opera v8.0, с незначительными отличиями в Mac/Safari v1.0.3 и Mac/Safari v1.2, также можно использовать, но немного глючит в Mac/IE5.2. 27. FancyForm Представляет собой отличную замену обычным чекбоксам, и создана для предоставления максимальной гибкости в изменении оформления и функциональности HTML-элементов. Утилита очень доступная, легка в использовании, не поддерживает браузеры. 28. Демонстрация хороших форм Функция интерфейса заключается в выводе информации, поэтому семантически это считается формой форма, поэтому создание его добыть с использованием элементов форм: fieldset, legend, label и input. 29. Чекбокс на jQuery Облегченный вариант реализации собственноручно оформленного чекбокса для jQuery 1.2.x и 1.3.x. 30. AutoSuggest: автозавершающее текстовое поле AJAX Autosuggest добавляет выпадающее меню, с предлагаемыми для применения в текстовом поле значениями. Пользователь может кликать как на предлагаемый вариант, так и на само поле, или же перемещаться по списку, используя клавиши вверх и вниз, выбирая значение кнопкой TAB. Предлагаемые значения представлены в XML (посредством PHP-скрипта, или схожего ему). 31. LiveValidation Представляет собой маленькую бесплатную библиотеку javascript для создания быстрой, легкой и полноценной системы валидации со стороны клиента. Она состоит из двух частей. Во-первых, система снабжает разработчиков богатым набором инструментов валидации ядра, которые также могут быть использовать за пределами контекста форм. Во-вторых, она предоставляет вашим посетителям системой валидации информации в реальном времени, как только они заполнят формы, помогая им освоиться с первого раза, делая формы легче, быстрее и менее запутанными. 32. PrettyForms 33. Pretty Checkboxes – отличное решение по созданию чекбоксов Скрипт специально для тех, кто хотел бы, чтобы чекбоксы на их странице имели приемлемый и подходящий внешний вид, ну или просто хотят разместить на сайте красивые чекбоксы. Используя данный скрипт, вы не рискуете лишиться удоства пользования вашим сайтом. 34. Подсказки по валидации форм 35. Создании более лучших веб-форм: Контекстное выделение посредством jQuery 36. Control.SelectMultiple Удобный выбор нескольких альтернативных вариантов для Prototype. 37. Действительно легкий способ валидации полей с помощью Prototype Очень легкий в использовании скрипт для валидации форм. 38. Autotab: плагин jQuery для автотабуляции и фильтра Плагин для jQuery, предоставляющий возможность создания автотабуляции и фильтрования текстовых полей и форм. Как только в текстовом поле будет достигнуто максимальное количество символов, курсор автоматически перейдет для указанный элемент. 39. Grow a textarea Просто создайте форму, а скрипт сам добавит возможность растягивать ее, конечно же, если вы этого хотите. Скрипт разработан с помощью MooTools. 40. Чекбоксы, радиокнопки, списки и собственные HTML-элементы форм Этот javascript и CSS позволят вам использовать изображения в чекбоксах, радиокнопках и списках выбора. 41. Поле ввода пароля с проверкой сложности Данные формы практически ничего не делают и имеют очень простую валидацию. Они лишь демонстрируют то, как с использованием Ext Forms можно создавать формы, буквально на лету. 42. Чистый и простенький дизайн форм на CSS В данной статье рассказывается о том, как можно создавать формы без примеси HTML. 43. Формы на CSS, без таблиц Здесь чистый CSS без таблиц, из которого вы сможете использовать шаблон для применения к вашей собственной облегченной форме. Для создания 2-хколонной разметки для формы, здесь используется комбинация из плавающего элемента и отрицательных полей. 44. Redux – подсветка форм 45. Оформляем управление формами 36 простых документов, в каждом их которых 12 элементов управления одного и того же типа, но с разными CSS-правилами для каждого элемента. Учитывая различные элементы управления с разными свойствами оформления, есть 2-3 разных наборов правил. Просмотрите также и следующую статью. 46. Плагин для WordPress cforms II Мощный, имеющий множество возможностей, плагин для Wordpress, предлагающий удобное развитие некоторых форм контактов, управляемых посредством Ajax. 47. Коллекция каскадных таблиц стилей для веб-форм Вы сможете просмотреть и скачать 13 различных стилей CSS, отлично подходящих для обучения! 48. Оформляем управление формами посредством CSS, еще раз 244 скриншота, рассказывающих об эффекте различных CSS-правила, примененных к формам управления. Скриншоты сделаны в 8 различных браузерах, 4 различных операционных системах. В общей сложности – 14 различных браузера + комбинации ОС. Огромная статья! 49. 5 уникально-оформленных и скодированных стилей веб-форм CSSGlobe дает 5 на самом деле отличных дизайнов веб-форм, которые можно использовать бесплатно. 50. 10 подсказок по созданию превосходных веб-форм Отличная статья с DesignReviver. Вы пройдете через создание веб-форм с подробным описанием и примерами основного кода, несколькими утилитами, которые бы помогли вам как отличные веб-формы, так и превосходные страницы с контактами. Всем обязательно читать! 51. Подсказки по созданию отличных веб-форм Отличная статья от CSS-Tricks, с 7-ю подсказками о том, как создать более лучшие веб-формы. Вернуться назад |