Рубрика «формы»

Здавствуйте, в этом туториале мы рассмотрим как разработать очень простую, но контролируемую форму в React, сфокусировавшись на качестве кода.

При разработке нашей формы мы будем следовать принципам «KISS», «YAGNI», «DRY». Для успешного прохождения данного туториала вам не нужно знать этих принципов, я буду объяснять их по ходу дела.Читать полностью »

При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.
Читать полностью »

CardInfo — API для определения логотипа, цветов банка и прочего по номеру карты - 1

Тут и демо, и документация: cardinfo.online Это API. Вы ему 6 первых цифр банковской карты, оно вам ссылку на логотип банка, его фирменные цвета, бренд (Visa, MasterCard, и т.д.) и прочее в формате JSON. CardInfo нужен тем, кто создаёт форму для приёма банковских карт у себя на сайте, чтобы улучшить UX (удобство, впечатления, чувство безопасности) пользователей. Принимать платежи прямо у себя на сайте позволяет cloudpayments.ru в России и странах СНГ, и stripe.com во всём остально мире.

Такие формы сделали все крупные компании. Живой пример можете увидеть при оплате чего угодно через Яндекс.Кассу или практически в любом мобильном приложении банка: когда вы начинаете вводить номер карты, форма перекрашивается в цвета этого банка, а рядом появляется логотип. Каждая из этих крупных компаний реализовала собственное решение для определения логотипа и цветов. Если это решение реализовали все крупные компании, значит в нём есть ценность. Если крупные уже сделали, а мелкие ещё нет, значит это похоже восходящий тренд, который резонно оседлать.

Однако, крупные компании уже давно сделали свои формы такими, а мелкие всё ещё нет. Почему? Создание такого решения для своей формы займёт около 7 дней работы программиста и ещё 7 работы дизайнера (логотипы выкачивать, обрабатывать, перерисовывать). Крупные компании могут себе позволить потратиться на создание такой формы. Мелкие компании считают ценность такой формы не достаточной, чтобы платить за неё столько.

CardInfo позволит превратить уже существующую форму для приёма банковских карт в такую же, как у Яндекс.Кассы, за пол дня работы программиста. Я предполагаю, что после выхода CardInfo определение логотипа банка и цветов банка для платёжных форм станет стандартом. Потому что такие формы лучше. Потому что теперь такие формы смогут позволить себе все.
Читать полностью »

Темные паттерны веб-форм или какой была бы самая конверсионная форма - 1

Практический каждый веб-ресурс предназначен для сбора информации, целью может быть сбор заявок, подписей, регистрации а так же сбор личных данных клиентов. В любом ветви событий нам нужно пройти через этап заполнение веб-форм. Мы подумали какой должна быть форма, обладающая максимальной эффективной конверсий с начала заполнения до ее конечной отправки. Заранее отмечу, публикация написана в ознакомительных целях, дабы показать как разрабатываются формы с темными паттернами, которыми «успешно» пользуются крупные кампании и не в коем случае не призываю к действиям описанным в публикации.
Читать полностью »

Формы на сайте — спамер поневоле - 1

В профильных сообществах e-mail—маркетологов, на форумах, посвященных поддержке CMS, на конференциях — везде сейчас активно обсуждается проблема спам-атак, устойчивым вектором которых является инъекция текста в формы на сайтах. Такой способ используется для отправки спама, а также для проведения узконаправленных атак, парализующих работу с отдельными ящиками.
Читать полностью »

imageМеня зовут Павел, я фронтенд-разработчик Tinkoff.ru. Наша команда занимается разработкой интернет-банка для юридических лиц. Фронтенд наших проектов был реализован с применением AngularJS, с которого мы перешли, частично с использованием Angular Upgrade, на новый Angular (ранее позиционировался как Angular 2).

Наш продукт предназначен для юридических лиц. Такая тематика требует множества форм со сложным поведением. Поля ввода включают в себя не только стандартные, реализованные в браузерах, но и поля с масками (например, для ввода телефона), поля для работы с тегами, ползунки для ввода числовых данных, различные выпадающие списки.

В этой статье мы заглянем «под капот» реализации форм в Angular и разберёмся, как создавать кастомные поля ввода.

Предполагается, что читатель знаком с основами Angular, в частности, со связыванием данных и внедрением зависимостей (ссылки на официальные гайды на английском языке). На русском языке со связыванием данных и основами Angular в целом, включая работу с формами, можно познакомиться здесь. На Хабрахабре уже была статья про внедрение зависимостей в Angular, но нужно учитывать, что написана она была задолго до выхода релизной версии.
Читать полностью »

Недавно столкнулся с весьма интересной задачей, которая довольно-таки часто может встречаться при проектировании пользовательских интерфейсов. Вопрос, конечно, сравнительно тривиальный, однако полноценной и развёрнутой информации по нему я не нашёл, потому решил поделиться собственным опытом. Статья может оказаться полезной для Junior-разработчиков, а также людей, только начинающих изучать ООП и не имеющих серьёзного практического опыта в программировании.
Читать полностью »

Юзабилити линч: ищем уязвимости интерфейса в CMS Diafan - 1

Привет. Я уверен, ты всё-таки еще не умираешь! Постараюсь, чтобы данный материал внёс свои 5 коп в фонд развития “Хабр — живи!”.

Я достаточно длительное время занимаюсь дизайном интерфейсов. Люблю своё дело и каждый раз ищу любую возможность развиваться. Поиск ошибок и уязвимостей интерфейсов в рабочих системах, прототипах и приложениях нахожу такой возможностью. Обнаружив несколько типичных ошибок у других, выводы точно отпечатаются в подсознании, что позволит не наступать на подобные грабли вновь в собственной повседневной рутине.
Прошу заранее не судить строго. Обзор носит чисто субъективный характер. Взгляд на данную систему изложен исключительно через призму личного профессионального опыта. Обрадую тем, что будет не только критика — будут предлагаться и решения!
Читать полностью »

От FineReader к решениям для ввода данных: как начиналось направление DataCapture в ABBYY - 1

Многие знают ABBYY, прежде всего, благодаря нашим массовым программам – Lingvo, FineReader, различным мобильным приложениям. Но при этом очень важным для нас было и остается корпоративное направление. В частности, на базе наших технологий распознавания текстов мы создали решения в области потокового ввода документов и данных. Они нужны всем организациям, имеющим дело с большими объемами документов – от банков и страховых компаний, до государственных ведомств, нефтяных, энергетических, ритейл и многих других компаний. Недавно этому направлению в ABBYY исполнилось 20 лет.

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

Привет! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.
автозаполнение форм на смартфоне
Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

<input type="text" name="customerEmail" autocomplete="email"/>

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js