Метка «формы»

Добрый день, дорогие друзья!
Может эта тема и поднималась уже, но я мысленно искал это решение несколько лет, и, буквально этой ночью, меня осенило.

Стояла задача отправить клиенту заполненную анкету на сайте. Задача травиальная, но было две проблемы:
1) Количество заполняемых полей больше пятидесяти
2) Сама анкета на бассурманком языке

Первой мыслью было стандартное присвоение каждому полю уникального названия, после чего копипаст формы в шаблол письма с заменой полей на переменные вида $_POST['value_name']

Но, там же еще и чекбоксы с радио-инпутами… Их тоже как-то надо проверять… Кароче, че-то мне эта затея не понравилась и написал простой, но полезный скриптик, который может кому-то пригодится:

function sendForm()
{
$("input[type=text]").each(function(){
   $(this).replaceWith('<span style="color:green;">'+$(this).val()+'</span>');
});
$("textarea").each(function(){
   $(this).replaceWith('<span style="color:green;">'+$(this).val()+'</span>');
});
$("input[type=checkbox]:checked").each(function(){
   $(this).replaceWith('<span style="color:green; font-weight:700;">X</span>');
});
$("input[type=radio]:checked").each(function(){
   $(this).replaceWith('<span style="color:green; font-weight:700;">X</span>');
});
return $('form').html(); 
}

Если кому-то не нравится буква «Х» то можно заменить ее на ✔, но не проверял как оно работает.
Смысл скриптика, думаю, понятен — заменяем все введенные данные на значения, а потом возвращаем ВСЮ форму. Что дальше с ней делать уже зависит от конкретной задачи — отправлять письмом или заносить в базу, но таким образом можно сэкономить кучу времени. Буду рад, если кому-то пригодится мое решение.
Читать полностью »

Наверное, одной из самых непростых и скучных задач при проектировании обычной формы в «1С: Предприятии» является управление доступностью элементов в зависимости от того или иного набора данных. Мне встречалось очень много решений: от процедуры вроде УстановитьВидимостьДоступность() с включением в нее всех правил для элементов управления, до совершенно хаотично разбросанных по всему коду обращений к указанным свойствам.

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

Всем привет! Сегодня в продаже появилась "Большая книга CSS3", которую многие из Вас ждали. Чем она может вас заинтересовать?

  1. информация подается интересно
  2. подкрепляется практическими занятиями
  3. приводится много ссылок на сторонние статьи и ресурсы по изучаемой теме
  4. автор постоянно делится своими советами и наработками
  5. уделяется много внимания именно дизайну
  6. Современный взгляд на дизайн и верстку
  7. Верстальщиков научит дизайну, дизайнеров научит верстке.

Это третье издание книги, до этого у Макфарланда были изданы книги по CSS достаточно крупными тиражами, но в этой книге, которая вышла со значительными изменениями, некоторые из которых я и сам применил на сайте books.piter.com

imageC помощью технологии CSS3 (каскадные таблицы стилей) можно создавать уникальные, современные оформления веб-сайтов. Но даже самый опытный веб-разработчик может не знать всех приемов применения CSS3. Прочитав в этой книге множество практических примеров, а также советов, вы перейдете на новый уровень создания сайтов с помощью HTML и CSS. Вы узнаете, как разрабатывать веб-страницы, которые одинаково быстро работают и одинаково выглядят, как на ПК, так и на смартфонах и планшетах.

В книге рассмотрены следующие темы:

  • написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах;
  • форматирование текста, добавление на страницы навигации;
  • создание таблиц и форм;
  • приемы веб-дизайна для создания уникального оформления сайтов;
  • создание сайтов для любых устройств с помощью адаптивного дизайна.

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

В прошлый раз я описал функционал плагина Semantic MediaWiki, позволяющего управлять структурированными данными в вашей системе и создавать на их основе различные представления. Ложкой дёгтя здесь является то, что пользователям приходится учить дополнительные элементы разметки.
Сегодня мы поговорим про расширение Semantic Forms, позволяющее сделать вики совсем не похожей на вики и привлечь к работе более широкий круг пользователей.

Semantic Forms для MediaWiki

Напомню, что сердцем Semantic MediaWiki является механизм семантических свойств. Назначение семантического свойства странице хоть и похоже на простое создание вики-ссылки [[имя свойства::значение свойства | что выводить на экран]], но, всё-таки, это новый синтаксис. Вдобавок даже если наши пользователи будут настолько дисциплинированы, что прочитают и вникнут в руководство по созданию свойств, они вряд ли будут называть все термины единообразно.
На моей вики, посвященной историческим личностям половина людей будет описана свойством время рождения, другие участники опишут людей свойством год рождения, а третьи дата рождения. Теперь для того, чтобы получить список исторических личностей и вывести их даты рождения, мне нужно написать три запроса вместо одного:

{{#ask:[[Категория Историческая личность]] | ?Время рождения }}
{{#ask:[[Категория Историческая личность]] | ?Год рождения }}
{{#ask:[[Категория Историческая личность]] | ?Дата рождения }}

Для решения этих проблем применяют шаблоны и формы.
Читать полностью »

Рекомендации по интерфейсу форм
Проектирование форм может оказаться настоящей проблемой. Чтобы получилось что-то стоящее и удобное для пользователей необходимо принять во внимание кучу разных рекомендаций и правил. В данной статье я постарался составить полезный список таких рекомендаций. Для его составления я использовал свой опыт и статьи экспертов.

Основные рекомендации и ввод данных

  • Стремитесь к краткости.
  • Убедитесь, что в форме используется один язык (обороты, термины).
  • Если на странице находится только форма и ничего кроме нее, то при загрузке страницы стоит ставить фокус на первое поле формы, это позволит сэкономить немного времени (страница поиска, входа, регистрации).
  • Поддерживайте ясный путь заполнения формы.
  • Избегайте вторичных действий, если это возможно.
  • В противном случае четко разделяйте основное и дополнительные действия.
  • Выравнивайте основное действие так же как и поля формы, это упрощает восприятие формы.
  • Цветная подложка у главной кнопки сделает её более видимой.
  • Отключайте кнопку «Отправить» после того как пользователь на нее нажал, это позволит избежать двойной отправки данных.
  • Еще лучше — показывайте индикатор отправки.

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

Привет!

Новости конечно не прямо вот чтоб breaking, как например наша карта цен или новый интерфейс, но тоже интересно.

Недавно мы переделали форму бронирования на Эвитерре — теперь количество пассажиров можно определить не на этапе поиска (как у всех), а еще и на этапе бронирования и оплаты (такого нет почти ни у кого).

Eviterra.com – умная форма бронирования и приятные мелочи
Читать полностью »

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

Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder).

Экономия места при создании форм налицо (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.
Читать полностью »

jClever — умный jNice с плюшками. Стилизация HTML форм
Автор статьи и плагина  — читатель DenisZ

jClever Forms — это плагин для стилизации HTML форм, который предоставляет свой API.

Опыт работы с такими стилизаторами форм, как jNice, jqTransform, Uniform заставил написать велосипед. Текущая версия практически полностью повторяет возможности jNice и даже дополняет их.

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

image

Мы сделали всеобъемлющий огромный User Interface пак, содержащий более 300 элементов для дизайна, прототепирования и всего, что придет на ум! Все элементы пака размещены на 5 страницах. В паке есть: Edit Boxes, Check Boxes, Tabs, Buttons, Notification windows, Menus, Готовые решения для панелей, окон, форм, графики, слайдеры, информационные блоки и многое другое. Все элементы выполнены в фотошопе шэйпами. Соответсвенно, каждый элемент можно уменьшать и увеличивать без потери качества. Их можно использовать при создании сайтов, мобильных интерфейсов, программного обеспечения, иллюстраций. Все зависит от твоей фантазии. Ты можешь компоновать и группировать элементы, менять их размеры и расставлять в соответствии со своим вкусом. Это огромное поле для творчества, где каждый дизайнер может использовать готовую форму при создании дизайна, применять к ней новые стили, менять форму. Разумеется, каждый дизайн имеет свое лицо, характеризующее дизайнера. В этот пакет мы вложили больше 50 стилей, которые можно использовать на любом элементе в дизайне. Ты можешь придать свою форму, цвет и стиль любому компоненту и сделать что-то уникальное и красивое.

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


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