Рубрика «Формы ввода»

в 13:22, , рубрики: css, html, markup, атрибуты, разметка, теги, Формы ввода
Атрибуты HTML, которыми вы никогда не пользовались - 1

В январе этого года Мэдисон Канна спросила у своих подписчиков в Twitter:

Какие языки/технологии вам бы хотелось изучить или узнать глубже в этом году?

Мой выбор: typescript, next.js, react, graphql, solidity, node — Мэдисон Канна (@Madisonkanna) January 3, 2022

Мой ответ был очень простым: HTML. И я ни в коей мере не был саркастичным или насмешливым. Разумеется, я неплохо знаю, какие теги использовать в каких случаях и как обеспечивать семантику и доступность моего HTML.

Однако существует целая куча малоиспользуемых атрибутов, о которых я забыл, и, вероятно, целая куча атрибутов, о существовании которых я и не знал. Этот пост стал результатом моих исследований, и я надеюсь, что он окажется для вас полезным при создании страниц на HTML.
Читать полностью »

в 16:32, , рубрики: accessibility, usability, веб-дизайн, интерфейсы, кнопки формы, Формы ввода, юзабилити

image

Введение от автора обзора

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

в 10:55, , рубрики: ajax, usability, веб-дизайн, заявки, интерфейсы, конверсия сайтов, паттерны, темные паттерны, формы, Формы ввода, юзабилити интерфейсов, яндекс.деньги

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

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

в 16:28, , рубрики: usability, веб-дизайн, интерфейсы, исследование, регистрация, Формы ввода

Осторожно! Злая собака! Или как укротить форму регистрации - 1

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

в 16:47, , рубрики: :valid, css, float label, Веб-разработка, всплывающие метки, интерфейсы, плавающие метки, Формы ввода

Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».

Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.

Вот так выглядит форма на nest.com:

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

в 16:10, , рубрики: css, html, javascript, загрузка файлов, стилизация, Формы ввода, метки: , ,

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

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

в 1:46, , рубрики: php, антиспам, Формы ввода, форумы, метки: , ,

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

Большая часть форм защищается от повторной отправки и примитивных автоматических запросов так называемыми токенами. Суть токена в том, что при формировании формы в сессию записывается некая переменная, содержащая строку случайных символов. При отправке формы проверяется скрытое поле формы, содержащее строку, записанную в сессию. По сути, пока мы не получим HTML-код формы, мы не узнаем этот самый токен. Это защищает скрипт, обрабатывающий форму от автоматического запроса. А при обработке формы переменная токена сбрасывается или меняется. Таким образом при повторной отправке формы токен будет уже недействителен.
Читать полностью »

в 18:15, , рубрики: quora, интерфейсы, Формы ввода

Этот пост — перевод ответа на вопрос «Как сделать заполнение онлайн-форм весёлым (fun)» на сайте Quora.

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

Проверка данных

Сейчас проверка данных обычно выглядит как наказание — если вы понимаете, о чём я. Вы заполняете форму, кликаете «ОК»… и получаете страшную надпись типа «ТЫ ЗАПОЛНИЛ ЭТО ПОЛЕ НЕПРАВИЛЬНО, ПРИДУРОК. ИДИ ИСПРАВЬ». Ну, может, конечно, придурком вас напрямую не называют, но ощущение остаётся именно такое. Чем дальше мы сможем от этого уйти, тем лучше.

Попробуйте «позитивную» проверку. То есть, вместо того, чтобы говорить пользователю, когда он ошибся, сообщайте ему о том, что он сделал правильно.

Мне очень нравится форма на этом сайте. Посмотрите — они сообщают пользователю, что он с чем-то справился сразу вместо того, чтобы пост-фактум известить его об ошибке:
www.junkmycar.com

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

в 16:50, , рубрики: gtd, ввод данных, вычисления, интерфейсы, операционные системы, Формы ввода, метки: , ,

Кейс 1:

Так повелось, что каждый день мне приходится по роду работы часто сталкиваться с вычислением и вводом разных цифр в формы приложений (размеры 3D обьектов, размеры фотографий, размеров полей в интерфейсах, перевод гаммы в линейное пространство и пр.), А также относительные величины.

Два кейса которые упрощают ежедневные задачи

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

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

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js