6 сен 2023
- Введение в HTML-формы
- Необходимые условия
- Основные руководства
- Ваша первая HTML-форма
- Как структурировать HTML-форму
- Какие виджеты форм доступны?
- Стандартные виджеты форм
- Валидация и подтверждение данных форм
- Отправка данных форм
- Валидация данных форм
- Продвинутые руководства
- Как создавать собственные виджеты форм
- Отправка форм при помощи JavaScript
- Использование JavaScript для отправки HTTP-запроса через форму
- HTML-формы в старых браузерах
- Руководства по стилизации форм
- Стилизация HTML-форм
- Продвинутая стилизация HTML-форм
- Таблица совместимости свойств для виджетов форм
- Смотрите также
- Руководство к созданию умного дизайна
- Обзор роли формальных соотношений в дизайне
- Изображение: Рембрандт, Синдики. 1662 год / Rijksmuseum
- Норман Роквелл, Tired Salesgirl on Christmas Eve. 1947 год
- Фото: BARBARA808 / Pixabay
- Логотип графической карты XGA, 1992 год
- Критерии сильного логотипа
- Логотип на постере Cummins Engine Company, 1977 год
- Логотип типографии Pastore DePamphilis Rampone, 1987 год
Введение в HTML-формы
Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере.
В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!
Необходимые условия
Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.
Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.
Примечание: Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Glitch.
Основные руководства
Ваша первая HTML-форма
Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.
Как структурировать HTML-форму
Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.
Какие виджеты форм доступны?
Стандартные виджеты форм
Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.
Валидация и подтверждение данных форм
Отправка данных форм
Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
Валидация данных форм
Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.
Продвинутые руководства
Как создавать собственные виджеты форм
В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
Отправка форм при помощи JavaScript
Использование JavaScript для отправки HTTP-запроса через форму
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
HTML-формы в старых браузерах
Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)
Руководства по стилизации форм
Стилизация HTML-форм
Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.
Продвинутая стилизация HTML-форм
В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.
Таблица совместимости свойств для виджетов форм
Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.
Смотрите также
Руководство к созданию умного дизайна
Рассказываем, как фирменный стиль влияет на репутацию бренда, что стоит учесть при создании логотипа и как сбалансировать форму и содержание дизайна.
Дизайнеры и маркетологи должны работать в связке — это единственная верная формула коллаборации, при которой фирменный стиль будет продавать бренд. По мнению Пола Рэнда, плохой дизайн появляется на рынке из-за отсутствия достаточного общения между продажниками и дизайнерами.
Хотя кажется, что дизайнеры и продажники думают совершенно о разном, вместе они работают над развитием одного продукта и преследуют одну цель. Фирменный стиль компании прежде всего отражает ценность продукта, упаковывает его для потенциальных клиентов. И, чтобы дизайнеры хорошо сделали свою работу, им необходимо быть в постоянном коннекте с маркетологами.
## Роль маркетолога и дизайнера в создании компании
Задача маркетолога — предоставить информацию, а задача дизайнера — интерпретировать эту информацию с помощью маркетолога. Буквальная интерпретация порождает стереотипы, тогда как интерпретация творческая преподносит сюрпризы — те самые уникальные качества, которые так нужны клиенту в его конкурентной борьбе.
## Примеры успешного взаимодействия дизайнеров и маркетологов
Пол Рэнд приводит примеры того, как продуктивный диалог дизайнеров и продажников помогал расти компаниям, где работал он.
### Компания IBM
Первый пример — крупнейший в мире IT-сервис IBM, который сумел изменить свой имидж благодаря усовершенствованию логотипа.
#### Логотип компании IBM, 1956 год

Изначально был заменён шрифт Beton Bold на City Medium с более широкими основными штрихами и выраженными засечками.
#### Обновлённый логотип компании IBM, 1972 год

После были добавлены знаменитые полоски, делая логотип более динамичным и современным. Это увеличило продажи и лояльность клиентов к бренду.
### Компания UPS
Ещё один пример — логистическая компания UPS, которая изменила цвет своих грузовиков на коричневый, чтобы выделиться на дороге и повысить узнаваемость.

## Связь между формой и содержанием
Пол Рэнд подчёркивает важность взаимосвязи формы и содержания.
### Отношение между формой и содержанием
- Форма без содержания бесполезна
- Содержание без формы теряет ценность и выразительность
### Примеры
- Бесыдейный дизайн, основанный лишь на форме, не коммуникативен
- Дизайн без смысла утомителен и не привлекателен
Генри Джеймс говорил: Идея и форма, это как иголка с ниткой. Я никогда не слышал о портных, которые советовали бы пользоваться только иголкой без нитки или ниткой без иголки.
### Анализ
Для понимания важности формы, Пол Рэнд предлагает анализировать произведения различных художников и размышлять о их подходе к форме и содержанию.
Обзор роли формальных соотношений в дизайне
В графическом дизайне формальные соотношения определяют положение предметов, а в промышленном дизайне ещё и помогают раскрыть или, наоборот, скрыть функциональное назначение изделия.
Изображение: Рембрандт, Синдики. 1662 год / Rijksmuseum
Норман Роквелл, Tired Salesgirl on Christmas Eve. 1947 год
Изображение: Sotheby’s
В 1944 году Пикассо сказал: Образ петуха довольно распространён, но нигде не встречается так часто, как на американских флюгерах. Понятно, что, тот, кто вырезал этот флюгер из листа железа, тонко чувствовал форму, но ему не приходилось отстаивать свою правоту перед клиентом. Дизайнеру же понимание формы поможет защитить своё решение.
Фото: BARBARA808 / Pixabay
Пол Рэнд отмечает, что качественный логотип принесёт пользу бренду, только если сам продукт качественный:
Только через соединение с продуктом, услугой, бизнесом или корпорацией логотип получает какое бы то ни было реальное значение. Его значение и полезность проистекает из свойств того, что он символизирует. Если компания второсортная, то и логотип, в конечном итоге, будет восприниматься как второсортный.
Логотип графической карты XGA, 1992 год
Изображение: IBM Company / Paul Rand
Вот несколько основных критериев сильного логотипа по мнению Пола Рэнда:
Критерии сильного логотипа
- Адаптивность: логотип хорошо смотрится на разных носителях, от печатных материалов до (на сегодняшний день) веб-сайтов и социальных сетей.
- Читаемость даже при изменении размера: шрифт и композиция должны быть ясными, чтобы зритель легко их воспринимал.
- Гибкость в соответствии с изменениями: логотип не должен потерять своей ценности и узнаваемости через несколько лет. Его должно быть можно адаптировать к меняющимся требованиям и потребностям бренда.
Логотип на постере Cummins Engine Company, 1977 год
Изображение: Cummins Inc. / Paul Rand / Artsy
Но главное — логотип должен быть визуально простым:
Главная обязанность символа — идентифицировать, а это предполагает простоту. Дизайн, который сложен, перегруженный деталями и невразумительный, таит в себе механизм собственного разрушения.
Логотип типографии Pastore DePamphilis Rampone, 1987 год
Изображение: Pastore DePamphilis Rampone / Paul Rand
Логотип начнёт работать, когда аудитория будет готова — после близкого знакомства с продуктом бренда, после признания его эффективным и полезным. Тогда он будет качественной репрезентацией бренда и сможет увеличить узнаваемость.
Дизайнеру следует понимать, что он делает и для кого. Это понимание Пол Рэнд называет ориентиром. Без «ориентира» дизайнер может создать красивый продукт, но пригодится ли он клиенту или принесёт ли пользу бренду — скорее «нет», чем «да».
Хотя дизайнеры не любят ограничения, они на самом деле могут стать их отличными помощниками. Например, когда у вас нет рамок в выборе цвета, вы будете искать правильные оттенки целую вечность.
Любому дизайнеру нужно попробовать методику «Дизайн-мышление». Она заключается в том, чтобы думать не только о конечном результате, но и обо всей экосистеме продукта, его возможных проблемах и их решениях. Подробнее о том, что это такое и как использовать, читайте в нашем разборе.
Дизайнер должен быть «выше» других: развивать визуальную грамотность и насмотренность. Пол Рэнд отмечает: «Визуально неграмотный, но набожный человек не увидит разницы между плохо выполненной копией „Тайной вечери“ и оригиналом, для него важнее духовная, а не художественная сторона».
Другие обзоры книг для дизайнеров
Научитесь работать с нейросетями — бесплатно!
Большая конференция по ИИ: пять экспертов и 10 нейросетей. Освойте нейросети — работа с ними становится обязательным навыком. Нажмите на баннер, чтобы узнать подробности.