Pull to refresh

Декоративная кнопка Обзор. Делаем невозможное.

Website development *
Никогда бы не подумал, что буду писать что-то про верстку. Но жизнь штука странная. Да и люди бывают не очень продвинутые в web-технологиях и просят сделать вроде бы простые, но на первый взгляд невозможные вещи.
Думаю, все знают стандартный элемент формы для загрузки файлов.
А вот теперь попробуйте сделать его красивым. «Легко, ведь есть CSS!!!» — скажут многие, и многие будут правы. Но попробуйте сделать так

Пару лет назад по прихоти заказчика мне пришлось столкнуться с такой проблемой.
Как я ее решал, написано в моем личном блоге.
Я конечно понимаю, что лучше использовать стандартные элементы форм и не париться, но попробуйте объяснить это заказчику, у которого уже есть готовый дизайн :)
Total votes 17: ↑9 and ↓8 +1
Views 2K
Comments 38

Практический HTML: учимся любить формы

Website development *
Translation
Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

  • Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
  • Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
  • Разбивайте сложные формы на несколько простых частей.
  • Старайтесь обеспечивать максимальную семантическую ценность кода.
  • Не усложняйте дизайн форм.


XHTML & CSS приемы



  1. Элемент FORM создает форму.
  2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
  3. По умолчанию METHOD выставляется в GET.
  4. Атрибут NAME устарел, используйте вместо него ID.
  5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.

Читать дальше →
Total votes 43: ↑38 and ↓5 +33
Views 7.8K
Comments 70

Тонкости свойства disable у кнопок формы, отправляемой на сервер (Как делать кнопки неактивными)

Interfaces *
Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled".

Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
Читать дальше →
Total votes 75: ↑65 and ↓10 +55
Views 58K
Comments 38

Один шаблон формы для всего проекта

CSS *
Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.

Из за этого многие верстальщики начинают верстать каждую форму по отдельности, давая им и их элементам различные стили, тем самым усложняя работу себе и тем людям, кто будет собирать эти макеты.
Читать дальше →
Total votes 57: ↑48 and ↓9 +39
Views 4.4K
Comments 36

Загрузка и переименование файлов

Zend Framework *
Статья написана для тех, кто уже хоть немного знаком с архитектурой Zend Framework. Если кому-нибудь будет интересно — опишу работу с формами более подробно в отдельной статье.

Для загрузки файлов на сервер с помощью форм в Zend Framework Form есть элемент Zend_Form_Element_File. У него есть фильтр «Rename», который позволяет переименовать закачаный файл. Но есть минус — мы не можем просто указать новое имя для файла, чтобы сохранилось его расширение. Как это сделать? А как быть, если мы используем setMultiFile?

Читаем дальше
Total votes 7: ↑7 and ↓0 +7
Views 8K
Comments 12

Плагин helpInput (мой велосипед)

jQuery *
imageЗдравствуйте. На днях возникла задача оформить на одном проекте мини-подсказки в полях input(подобно тому, как оформлено поле «поиск по сайту», которое вы можете увидеть в правом верхнем углу Хабры). Проект, на котором надо было оформить поля, написан с использованием jQuery, поэтому решил воспользоваться плагином для этой библиотеки. Пробежался по уже готовым решениям и не нашёл полностью устраивающее меня. Решил мастерить свой велосипед. На мой взгляд, получилось неплохо, хотя в процессе разработки не раз натыкался на подводные камни. Из-за скудного выбора плагинов, решающих эту задачу, я и решил выложить своё «творение» на Хабру. Необходимость в оформлении полей подобным образом встречается часто, авось кому-нибудь и пригодится.

UPD: В ходе обсуждений было предложено пару дельных идей, которые я и реализовал:
1. Обрабатывается не только Tab, но и Shift+Tab
2. Плагин научился работать с автозаполнением (если надо отключить эту возможность — при инициализации установите в значение false ключ autoComplete)
3. Изменились имена ключей(приобрели смысловую нагрузку понятную не только мне)

Читать дальше →
Total votes 73: ↑55 and ↓18 +37
Views 3K
Comments 71

Календарный период — улучшаем интерфейс

Interfaces *
Работая над интерфейсом очередного крупного проекта я старался дотошно проработать каждый его элемент. Конечно нет предела совершенству и, как это обычно бывает, заканчивая один проект ты уже видишь кучу его недостатков, делаешь анализ и выводы на будущее.

Тем не менее, в результате, работая над drop-down выбором календарного периода, в голову пришла интересная мысль не разбивать дату на две отдельные формы «С» и «По», как это всегда делают, а объединить их в одну форму и выпадающий блок.

Конечно кодеру предстоит в данном случае немного больше попотеть, но пользователю очевидно будет намного легче ориентироваться в календаре. Выбирая начальную дату он сразу же наглядно и быстро может выбрать конечную дату своего запроса, в том же окне, и не надо держать в голове и пытаться запомнить что же ты выбрал в предыдущей форме. Тем более в input-формах практически никогда не выводят день недели и, в процессе выбора конечной даты запроса, зачастую забываешь какой день недели собственно был у первой выбранной даты?

Если короче, сейчас сплошь и рядом, в том числе на именитых туристических сайтах, используют две отдельные формы для определения календарного периода, при чём одновременно, как правило, можно открыть только одну из них:

image
Пример обычной формы на Booking.com. Календари «С» и «По» разнесены в разные блоки

Как же улучшить этот интерфейс?
Total votes 62: ↑46 and ↓16 +30
Views 3.2K
Comments 56

Развитие валидации форм

Website development *
Translation

Валидация форм была педантичным занятием с момента появления web. Первой пришла серверная валидация. Затем она развилась в валидацию на стороне клиента для проверки результатов в браузере. Теперь у нас есть такие гиганты как HTML5 и CSS3: глава о формах HTML5 предлагает нам новые типы для input полей и атрибуты, которые делают возможным проверку ограничений поля. Базовый UI модуль CSS3 предоставляет несколько псевдо-классов, которые помогают нам стилизовать состояние валидности и менять внешний вид поля в зависимости от действий пользователя. Давайте взглянем на комбинацию обоих для создания валидатора форм основанного на CSS, который имеет достаточно широкую поддержку браузеров.

Чем больше мы можем дать подсказок пользователю, как правильно заполнять форму, в процессе заполнения, тем меньше шансов, что он сделает ошибку. Взгляните на пример CSS3 валидации форм в браузере поддерживающем CSS3 UI псевдо-классы, например Chrome 4+, Safari 5+ или Opera 9.6+. Я использовал CSS3 UI псевдо-классы и HTML5 атрибуты форм для создания валидации основанной на CSS. Давайте посмотрим как это работает.
Читать дальше →
Total votes 71: ↑69 and ↓2 +67
Views 21K
Comments 31

Что скрывается за формой редактирования сложного объекта?

Developer Soft corporate blog
В этой статье мы продолжаем знакомить вас с подходами, реализованными в планировщике XtraScheduler. В предыдущей статье мы рассказывали о синхронизаторе данных, на этот раз поговорим о формах.



Довольно часто в приложениях можно встретить формы, которые предназначены для ввода или редактирования объектов с большим количеством зависимых свойств. Построение таких форм ввода вызывает «головную боль» у разработчиков: рутинная работа по размещению редакторов, написание кода инициализации, валидации, обработчиков событий…

Так как же делать такие формы быстро и надежно?
Читать дальше →
Total votes 49: ↑35 and ↓14 +21
Views 20K
Comments 40

Валидация за гранью фола

Ruby *Ruby on Rails *
Обычно, про валидацию в рельсах говорят только хорошее. Сегодня мы поговорим о некоторых ситуациях где система дает сбой.

Ситуация раз


При регистрации пользователя мы как обычно хотим сделать подтверждение пароля. Нет проблем, добавляем :confirmation => true. Через какое-то время у сайта появляется мобильное приложение, в котором тоже реализована регистрация, но подтверждения пароля там уже нет. Как поступить в этом случае?

решение под катом
Читать дальше →
Total votes 28: ↑23 and ↓5 +18
Views 2.9K
Comments 17

Контекстно-зависимая форма в Yii

Website development *PHP *Yii *
Sandbox
Tutorial
При работе с фреймворками всегда приходится создавать основной функционал самим, желательно, используя при этом возможности фреймворка (зачем тогда он нам нужен). Как понятно по заголовку речь пойдет про контекстно-зависимые формы в Yii. В статье описана реализация подобной формы, используя модальное окошко. Надеюсь, что кому то будет полезен именно такой вариант.

Забегая вперёд скажу, что в результате должно получиться вот такое поле, выпадающее меню и кнопка справа для выбора нужных данных.


Читать дальше →
Total votes 14: ↑9 and ↓5 +4
Views 27K
Comments 11

Ввод периода: хватит терроризировать пользователей

Interfaces *Usability *
Двадцать лет назад, когда начал работать с корпоративными системами, был немало раздосадован тем, что при получении отчетов постоянно приходится вводить полную дату начала и полную же дату окончания периода. С тех пор сменились поколения процессоров, операционных систем, и т.д., а большинство программ по-прежнему требуют от пользователя лишних пальцедвижений для ввода даты начала и даты конца периода.
Читать дальше →
Total votes 26: ↑7 and ↓19 -12
Views 7.8K
Comments 21

Вы не можете закачать файлы на сервер в мобильном Safari 8.0

Website development *
Translation
Печально, но факт. Новая версия iOS содержит баг, который делает невозможным отправку любых файлов на сервер из браузера. Когда вы выбираете файл в любой форме на HTML странице и пытатесь его отправить, браузер посылает запрос без файла. Он показывает, что ждет ответа на запрос, но на самом деле ответ не приходит.

Более того, баг касается не только HTML-форм. Если вы отправляете файл из Javascript, конструируя объект FormData (часть API XMLHttpRequest Level 2), это приводит к тому же результату. И даже если вы делаете то же самое из нативного приложения, которое является оберткой над HTML-браузером (например, Apache Cordova), то получаете такой же результат.

Почему же не приходит ответ. Если бы файл просто не отсылался, мы могли бы ожидать, что на сервер приходил бы пустой файл или сервер возвращал бы ошибку, что форма отправлена без файла. Однако сервер просто не шлет никакого ответа (даже 400 bad request) и не закрывает соединение. Все дело в том, какой именно запрос шлет Safari.
Читать дальше →
Total votes 41: ↑38 and ↓3 +35
Views 20K
Comments 19

Выразительный JavaScript: Формы и поля форм

JavaScript *Programming *

Содержание




Я нынче ж на ученом кутеже
Твое доверье службой завоюю,
Ты ж мне черкни расписку долговую,
Чтоб мне не сомневаться в платеже.

Мефистофель, в «Фаусте» Гёте


Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.
Читать дальше →
Total votes 22: ↑22 and ↓0 +22
Views 182K
Comments 13

Пошаговая инструкция по реализации загрузки файлов на сервер без перезагрузки страницы на PHP + Javascript

Website development *
Sandbox

Проблема


Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса:


Читать дальше →
Total votes 22: ↑9 and ↓13 -4
Views 51K
Comments 7

Работа с формами в Webix UI

Website development *JavaScript *HTML *


Создание форм с помощью чистого HTML задача довольно тривиальная и подробно обсуждается в каждом уважающем себя учебнике. Но все становится куда сложнее, если вам нужно, например, разнести элементы формы по нескольким табам. В этом случае без фреймворка не обойтись. В этой статье я расскажу, как можно создать сложные веб-формы с помощью UI-фреймворка Webix.

Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Views 23K
Comments 13

Расширяем фреймворк Kivy пакетом XPopup (Часть 2-я)

Python *Development for MacOS *Development for Windows *
Продолжаем скрещивать змей и птиц (или — цирк и фрукт, кому как больше нравится). В предыдущей статье мы научились создавать уведомления, теперь перейдем к не менее востребованным форточкам: формы ввода данных и файловые навигаторы.

Формы ввода данных


Началось с простейшей потребности сделать аналог InputBox'a — окна с полем ввода для текста. В результате этой «простейшей потребности» на свет появилось еще пара полезных плюшек и базовый класс для создания UI-форм.
Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views 5.4K
Comments 4

Самое интересное с форума по веб-разработке Chrome Web Dev Summit 2019

CSS *Development of mobile applications *HTML *API *Browsers
Translation
Я уже пару раз ездила на Chrome Web Dev Summit (в 2016 и 2018 годах), и мне всегда нравилось составлять такую обзорную статью с самыми интересными идеями и проектами с конференции. Давайте попробуем сделать это и по результатам последнего форума!

Наконец-то обратили внимание на HTML


Кажется, дизайн и функциональность почти всех элементов управления не изменились со времён изобретения браузеров, хотя его стали использовать сильно иначе, например, с переходом на мобильные устройства. Теперь это наконец заметили! В своём выступлении «С HTML ещё не всё закончено», Николь и Грег обсудили несколько инноваций, которые появятся в Chrome в ближайшее время.

Переработанные элементы <form>


Наконец-то изменят внешний вид некоторых форм! Они не только стали более современными, но их оптимизировали для мобильных устройств и безбарьерного доступа. Например, сделали более крупные значения при выборе даты.


Total votes 12: ↑11 and ↓1 +10
Views 5.7K
Comments 2

Пакет валидации mobx form validation kit 2.0 (TypeScript / Flutter)

JavaScript *ReactJS *Flutter *
Tutorial

Предисловие


Почти полтора года назад мы выпустили первую версию библиотеки "Новый пакет валидаций для React на Mobx @quantumart/mobx-form-validation-kit"
Время шло, и библиотека корректировалась и не стояла на месте, да собственно, как и наше развитие в целом. Мы перешли на flutter, по пути попинав ReactNative, сделали еще несколько проектов. И новые задачи потребовали от нас новых и современных решений, в том числе и переработки mobx-form-validation-kit.
Сегодня я рад представить вам новую версию пакета mobx-form-validation-kit.
Для строго типизированного TypeScript
mobx-form-validation-kit 2.0
И переписанный вариант библиотеки под Flutter
flutter_mobx_form_validation_kit 2.0


Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Views 2.1K
Comments 0
1