Как составить форму для сайта

Помощник руководителя проектов stepFORM Артем Петров рассказал, как сделать веб-формы удобными для пользователей, защитить их от спама и перечислил основные способы их разработки.

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

Как улучшить веб-формы для пользователей

Используйте возможности Web Forms 2.0.

Веб-формы всегда требовали улучшений. Стандартные средства HTML не могли обеспечить решение многих задач разработчиков. На помощь приходил JavaScript, с помощью которого можно как угодно манипулировать с содержимым страницы. Аналогичная ситуация была и с CSS. Множество анимаций и визуальные эффекты реализовали при помощи скриптов.

С появлением HTML5 и CSS3 возможности веб-разработки расширились. Чтобы решить многие стандартные задачи, уже не приходилось использовать скрипты. HTML5 принес с новые возможности для веб-форм, включая спецификацию Web Forms 2.0. Разработчики получили возможность использовать новые значения для атрибута type. Чтобы предложить пользователям удобные веб-формы, можно использовать:

Дату и время

Многие сайты, например, бронирования отелей или такси, используют виджеты выборе даты и времени. В HTML5 можно реализовать простой календарь с помощью полей:

• date — год, месяц и день;
• datetime — год, месяц, день, час, минута, секунда, а также часовой пояс (устаревший тип, рекомендуется использовать datetime-local);
• datetime-local — аналог datetime, без часового пояса;
• month — год и месяц;
• week — год и номер недели;
• time — время в часах, минутах, секундах, долях секунд.

Числовой счетчик

Для решения многих задач достаточно использовать обычное текстовое поле. Но там, где нужен ввод точного числового значения, можно задействовать поле типа number. Его атрибуты min и max определяют минимальное и максимальное значение, а step — шаг. Пример:

<input type="number" value="0" min="0" max="10" step="1">

Слайдер

Есть много JavaScript библиотек, которые позволяют создать слайдеры или ползунки с выбором значения из заданного диапазона. Сделать простой ползунок теперь можно средствами HTML. Пример:

<p>Выберите значение от 0 до 50:</p>
<div>
  <input type="range" name="volume"
         min="0" max="50">
  <label for="volume">Объем</label>
</div>

Email и телефон

Самая важная информация, которую собирают через формы — телефон и email. В Web Forms 2.0 предусмотрены поля с такими типами. Пример:

<div>
  <input type="tel" name="phone" value="">
  <label for="phone">Телефон</label>
</div>

<div>
  <input type="email" name="email" value="">
  <label for="email">Ваш email</label>
</div>

Выбор цвета

В HTML5 есть поля для выбора цвета. Можно задать любые значения в шестнадцатеричной системе счисления и предложить пользователям выбрать. Пример:

<p>Выберите цвет элемента:</p>
<div>
    <input type="color" name="color1" value="#ff0000">
    <label for="color1">Цвет 1</label>
</div>
<div>
    <input type="color" name="color2" value="#f6b73c">
     <label for="color2">Цвет 2</label>
</div>

Паттерны

Атрибут pattern позволяет проверить ввод данных в форму. Пример:

<input type="password" name="pwd" pattern=".{12,}" title="Минимальная длина пароля должна быть от 12 символов">

<input type="password" name="pwd" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{12,}" title="Пароль должен содержать минимум 1 цифру, заглавную и строчную буквы и быть не менее 12 символов">

<input type="url" name="address" pattern="https?://.+" title="Введите https://">

Другие полезные атрибуты

В HTML5 есть и другие полезные атрибуты для форм.

• Атрибут placeholder позволяет вписывать текст, который отображается, когда поле пустое, и исчезает при фокусе.
• Атрибут autofocus автоматически ставит фокус на поле после загрузки страницы.
• Атрибут required помечает, что поле обязательное для заполнения.
• Атрибут autocomplete включает автозаполнение формы (запоминает ранее введенные данные). Отключается установкой значения off: autocomplete="off"

Web Forms 2.0 подтолкнули развитие веб-форм вперед. Сегодня анатомия веб-форм значительно усложнилась. Поля и выпадающие списки могут быть связаны между собой и подгружаться динамически при выборе, а на серверной части установлена какая-нибудь система для обработки входящих заявок с отправкой на множество каналов связи (email, sms, CRM, мессенджеры). Поэтому для решения нестандартных задач HTML по-прежнему недостаточно.

Как защитить веб-формы от спама

Проводите валидацию данных. Это защитит от ввода нежелательной информации, поможет избежать взлома сайта через форму. Проводить валидацию можно не только на серверной части, но и на клиентской. Важно, чтобы на серверной части валидация выполнялась всегда, ведь клиентскую легко обойти, просто отключив обработку JavaScript в браузере.

Основной и один из самых простых способов защиты форм от спама — Captcha. Ее вполне достаточно, чтобы не быть заспамленным. В некоторых случаях можно прибегать к другим хитростям по распознаванию и защите от спама:

Динамическая генерация формы с помощью JavaScript — один из хороших способов не дать спам ботам атаковать ваш почтовый ящик. Ведь, как правило, они разработаны с учетом, что все поля формы заранее отображаются на странице.
Еще один простой способ — размещение скрытого поля с каким-нибудь именем, например:

<input type="hidden" name="phone" value="">

Пользователи сайта не видят поле и не заполнят его. А спам-бот будет автоматически заполнять все поля, чтобы отправка формы прошла успешно. Если скрытое поле оказалось заполненным, значит форму заполнит бот, и данные из нее можно не принимать.

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

Многие сервисы, например, Akismet, позволяют отфильтровывать спам на основе введенных данных Если раньше спамер промышлял на других сайтах, сервис поможет это выявить и не допустит отправку нежелательной информации.

Все перечисленные способы защиты можно использовать в комплексе — это повысит степень защиты перед разными видами спам-ботов.

Инструменты разработки форм

Развитие инструментов разработки позволило упростить создание форм. На смену обычному HTML пришла генерация содержимого форм на основе JSON Schema.

Это выглядит примерно так. Формируется json с полями, их типами, атрибутами и данными:

{
  "schema": {
    "message": {
      "type": "string",
      "title": "Сообщение"
    },
    "author": {
      "type": "object",
      "title": "Автор",
      "properties": {
        "name": {
          "type": "string",
          "title": "Имя"
        },
        "gender": {
          "type": "string",
          "title": "Пол",
          "enum": [ "male", "female", "alien" ]
        },
        "magic": {
          "type": "integer",
          "title": "Магический номер",
          "default": 42
        }
      }
    }
  }
}

На выходе генерируется форма следующего вида:

JSON Schema решают несколько проблем:

• экономят время на разработку форм;
• сокращают общее количество кода;
• делают функционал форм гибким;
• задают понятную всем разработчикам структуру.

Ниже представлены специальные инструменты и библиотеки, с помощью которых возможно упростить разработку веб-форм.

JSON Form

Клиентская библиотека JavaScript для генерации форм Bootstrap 3 на основе схем JSON. Сгенерированные формы включают в себя валидацию данных на стороне клиента.

React JsonSchema Form

Простой компонент React для создания HTML-формы из схемы JSON с использованием семантики Bootstrap.

Formik

React библиотека, которая поможет разобраться с получением значений из состояния, реализовать валидацию, обработку отправки формы, сообщения об ошибках

Vue Form Generator

Компонент генерирует форму на основе схем для Vue.js. Содержит встроенные валидаторы, 21 тип поля, Bootstrap шаблоны, настраиваемые стили и может расширяться с помощью пользовательских полей.

Angular Schema Form

Набор директив AngularJS для генерации форм Bootstrap 3 из JSON Schema. Инструмент позволяет настроить порядок и тип полей, использовать редактор wysiwyg, содержит средства выбора даты и цвета. Также доступно множество дополнений для расширения функционала.

Formspree

Можно подключить готовую форму к внешнему API, чтобы отправлять данные по email. Сервис не требует использовать PHP или JavaScript, нужно просто задать поля. Это особенно полезно для сайтов, которые состоят из статических страниц.

JSON Forms

Инструмент использует подход создания форм с помощью схем JSON. Включает в себя привязку данных, их валидацию и настраиваемые стили для пользовательских виджетов. Работает вместе с Redux и поддержкой React/Angular.

Formoid

Необычное решение — программа для генерации форм, которую устанавливают на ПК. Создает формы с разным оформлением Modern Flat, Metro, Bootstrap, Solid. Генерирует не только HTML, но и обработчик PHP для отправки данных с формы.

Конструкторы форм

Еще несколько лет назад сложные формы приходилось разрабатывать вручную. Теперь появилась технология WYSIWYG, которая позволяет создавать формы в визуальном режиме без использования кода. На ее основе создали многочисленные конструкторы. Давайте рассмотрим самые известные.

Google Forms

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

TypeForm

Инструмент с более широким функционалом, чем у Google форм. Позволяет создавать интерактивные формы и опросы с нестандартной логикой перехода между полями. Оптимальный инструмент для маркетологов, когда нужно протестировать идею или собрать контакты для рассылки.

stepFORM

Конструктор с простым интерфейсом для создания онлайн-форм и анкет. Позволяет добавить в формы различные расчеты. Это удобно для форм, которые помогают пользователю самостоятельно рассчитать стоимость товара или услуги по выбранным параметрам. Созданные формы можно установить на сайте в виде интерактивного виджета, использовать по ссылке в соцсетях и мессенджерах. Инструмент позволяет добавлять свои скрипты и css код с помощью специального виджета.

jotForm

Помогает создавать креативные и персонализированные формы для любых целей с помощью простого механизма перетаскивания. Сервис предлагает инструменты персонализации и брендинга, позволяет редактировать пользовательский css и добавлять скрипты.

Formstruct

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

Разработка форм на заказ

Направление по-прежнему существует, но продавать индивидуальную разработку становится сложнее — приходится конкурировать с конструкторами. Нужно доказать клиенту, почему он должен заказать разработку у вас, а не использовать конструктор.
На создание веб-формы, в зависимости от сложности, может уходить много времени. Особенно если нужно интегрировать форму с агрегаторами платежей, собирать статистику, складывать заявки в CRM и многое другое. В этом случае разработчику проще взять готовый комплект модулей или сделать на конструкторе. Как правило, в конструкторах есть готовые интеграции сторонних сервисов, которые легко подключаются. Благодаря этому разработчик может сосредоточиться на создании самой формы, а не ее комплектующих.

У конструкторов есть далеко не все нужные возможности. Поэтому многие позволяют использовать кастомный код в формах и предоставляют открытые API, чтобы веб-мастера могли доработать функционал. Поэтому некоторые разработчики делают формы своим клиентам на базе конструкторов. Здесь есть свои плюсы для всех сторон: разработчики приводят конструкторам новых клиентов, взамен предлагают свои услуги и не тратят время на разработку однотипной функциональности. Вполне логично, что они дополняют друг друга.

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

Конструкторы форм и индивидуальная разработка форм — немного разные вещи. Крупная компания может себе позволить выделить или нанять разработчика, если ей понадобится какая-нибудь замороченная веб-форма. Например, форма для бронирования отелей с выбором городов и множества параметров, приемом платежей и интеграцией с CRM. Малому и среднему бизнесу выгоднее сделать недорогую форму на конструкторе и принимать заявки клиентов. Поэтому конструкторы не вытеснят разработчиков форм с рынка окончательно.

Заключение

HTML 5 вместе со спецификацией Web Forms 2.0 хоть и внес вклад в развитие форм, но по прежнему не может заменить JavaScript. JSON Schema позволил работать с содержимым формы максимально эффективно и генерировать динамически всю структуру полей. Кроме инструментов разработки, появилась масса удобных сервисов для не-программистов.
Можно использовать любое решение, в зависимости от потребностей бизнеса и бюджета. Главное, чтобы формы были удобными для пользователей и безопасными — защищенными от писем спам-ботов и взлома сайта через поля.

От редакции

Курсы «Нетологии» по теме:

• онлайн-профессия «Веб-разработчик»
• онлайн-профессия «Frontend-разработчик»
• онлайн-профессия «Тестировщик»

HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

Давайте для примера создадим наиболее полную форму обратной связи в которой будут кнопки, текстовое поле, возможность загрузки файла и не только, итак обо всем по порядку.

Тег <form> — создание формы

Для создания формы в HTML используется тег <form>. Все, что находится между открывающим и закрывающим тегом является элементами управления формой.

Итак, наш первый код.

<form action="/" method="post">

</form>

У тега <form> есть два обязательных атрибута:

• action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные  форму данные.
• method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

В нашей форме должно быть поле для ввода текста. Оно создается с помощью тега <textarea>. Добавим к нашей пустой форме поле ввода текста.

<form action="/" method="post">
<textarea></textarea>
</form>

Результат.

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега <textarea>.

Сделаем 100% ширину с помощью CSS.

textarea
{
  width:100%;
}

Получим следующую форму.

<form action="/" method="post">
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент <input> является универсальным, в отличии от элемента <textarea>. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Изменим нашу форму.

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Уже лучше, давайте добавим поле с адресом электронной почты.

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<input type="email" placeholder="Введите ваш email"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

Давайте немного изменим форму, а именно:

• Фон.
• Размер.
• Положение.

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Добавим две кнопки:

• Отправить.
• Очистить.

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега <button> (от англ. button — кнопка)  с типом submit (от англ. submit — разместить). Полный HTML-код  кнопки отправки формы на сервер: <button type="submit">Отправить</button>.

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: <button type="reset">Очистить</button>.

Давайте дополним нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Результат.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение" required></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

<button formnovalidate type="submit">Отправить</button>.

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

<input  type="file" value="Выберите файл">

Дополним нашу форму. Создадим отдельную группу элементов.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
</fieldset>
</form>

Результат.

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: <input type="date" />.

Добавим в нашу форму возможность выбора даты.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
</fieldset>
</form>

Результат.

Выпадающий список

Выпадающий список создается с помощью тега <select>, а элемент списка с помощью <option>. Давайте создадим в нашей форме возможность указать адресата.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
</fieldset>
</form>

Результат.

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега  input и его атрибута type=«radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"></label> 
<label>Укажите дату - <input type="date"></label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
<label>Отправить копию письма себе на почту?<input type="radio" name="primer">Да <input type="radio" name="primer">Нет</label>
<label>Каким образом направить вам ответ
<input type="checkbox" name="a" value="1" checked>>По электронной почте
<input type="checkbox" name="a" value="2">По почте на бумажном носителе
<input type="checkbox" name="a" value="3">Перезвонить по телефону
<label>
</fieldset>
</form>

Результат.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

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

Шаблон HTML-формы

<form action="#" method="post" target="_blank">
    <h2>Шаблон формы</h2>
    <fieldset>
      <legend>Персональные данные</legend>
      <ul>
        <li>
          <label for="name">Имя:*</label>
          <input type="text" name="name" placeholder="Иван Иванов" id="name" required>
        </li>
        <li>
          <label for="age">Возраст:</label>
          <input type="number" name="age" placeholder="27" id="age" min="0" max="125">
        </li>
      </ul>
    </fieldset>
    <fieldset>      
      <legend>Контакты</legend>
      <ul>
        <li>
          <label for="email">E-mail:*</label>
          <input type="email" name="mail" placeholder="ivanov@gmail.com" id="email" required>
        </li>
        <li>
          <label for="number">Телефон:*</label>
          <input type="tel" name="phone" placeholder="+7 000 000-00-00" id="number" maxlength="21" required>
        </li>
      </ul>
    </fieldset>
		<div>
	    <label for="message">Увлечения</label>
	    <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно" id="message"></textarea>
		</div>
    <fieldset>
      <legend>Учёба</legend>
      <ul>
        <li>
          <input type="checkbox" name="intensive-courses" id="courses" checked>
          <label for="courses">Прохожу курсы</label>
        </li>
        <li>
          <input type="checkbox" name="books" id="books">
          <label for="books">Читаю книги</label>
        </li>
        <li>
          <input type="checkbox" name="video" id="video">
          <label for="video">Смотрю видео</label>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>Предпочтения</legend>
      <ul>
        <li>
          <input type="radio" name="preference" id="front" value="frontend" checked>
          <label for="front">Фронтенд-разработка</label>
        </li>
        <li>
          <input type="radio" name="preference" id="back" value="backend">
          <label for="back">Бэкенд-разработка</label>
        </li>
      </ul>
    </fieldset>
    <div>
      <button type="submit">Отправить</button>
      <p>* — Обязательные поля</p>
    </div>
  </form>

Из чего состоит форма

<form> и <fieldset>

<form> — контейнер формы, в нём содержатся все поля и кнопка для отправки данных. Тегу добавляется два атрибута: action и post. В первом указывается URL-адрес, на который будет отправлена форма, а второй задаёт метод отправки:

• post — посылает данные в теле HTTP-запроса. Его используют, когда нужно отправить много данных и ссылка на результат их обработки не нужна. Например, при редактировании личного профиля.
• get — метод по умолчанию. Он посылает данные формы в строке запроса, то есть они видны в адресной строке браузера. Метод применяется, например, в поисковых формах.

Тег <fieldset> группирует поля формы. Он часто используется с <legend> — тегом, который задаёт подписи для каждой группы. Мы использовали этот тег, чтобы разделить поля формы на три части: «Персональная информация», «Контакты» и «Обратная связь».

<label>

Заголовок или подпись для полей ввода. Он связывается с элементами двумя способами.

При помощи атрибута for со значением, аналогичным id элемента:

<label for="name">Имя:*</label>
<input type="text" name="name" placeholder="Иван Иванов" id="name" required>

Элемент заключается между открывающим и закрывающим тегами <label>:

<label>
	<input type="checkbox" checked>Соглашаюсь на обработку персональных данных
</label>

<select>

Создаёт раскрывающийся список:

<label for="education">Уровень образования</label>
<select id="education">
	<option value="secondary">Среднее общее</option>
	<option value="secondary vocational">Среднее профессиональное</option>
	<option value="higher" selected>Высшее</option>
	<option value="incomplete higher" selected>Неоконченное высшее</option>
</select>

Для добавления элементов списка используется тег <option>.

Атрибуты тега<select>:

• autocomplete — включено ли автозаполнение поля;
• disabled — в списке нельзя ничего выбрать;
• form — связывает <select> с формой, если он не вложен в тег <form>;
• multiple — создаёт «мультиселект», то есть список, в котором можно выбрать несколько значений;
• name — имя элемента, используется для отправки формы;
• required — один из пунктов обязательно должен быть выбран;
• size — размер элемента.

<textarea>

Добавляет поле для ввода сообщения — пользователь может оставить в нём вопрос, комментарий для техподдержки или что-то ещё.

<label for="message">Увлечения</label>
<textarea name="comment" placeholder="Расскажите обо всём, что для вас важно" id="message"></textarea>

У <textarea> есть особенность: пользователи могут прямо в браузере растягивать текстовое поле по ширине и высоте, ломая вёрстку и нарушая замыслы дизайнера. Чтобы заблокировать такое поведение, используйте CSS-свойство resize: none.

Основные атрибуты textarea:

• name — имя поля;
• id — связывает поле с <label>;
• maxlength и minlength — задают максимальную или минимальную длину текста;
• required — указывает, что поле обязательно для заполнения;
• placeholder — выводит короткую подсказку для пользователей — что нужно вводить;
• disabled — блокирует поле ввода;
• readonly — делает поле доступным только для чтения, ввод запрещён.

<input>

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

<label for="email">E-mail:*</label>
<input type="email" name="mail" placeholder="ivanov@gmail.com" id="email" required>

Чтобы пользователи вводили данные в правильном формате, тегу <input> нужно задавать атрибут type с подходящим значением:

• text — можно вводить только текст;
• number — ввод только цифр;
• tel — для телефонных номеров;
• email — ввод электронной почты;
• submit — инпут превращается в кнопку для отправки данных на сервер;
• password — поле для ввода паролей;
• date — для ввода даты;
• checkbox — инпут превращается в чекбокс;
• radio — создаёт радиокнопки.

У атрибута более 20 значений, полный список — на сайте MDN.

Основные атрибуты тега<input>:

• id — связывает input с <label>;
• name — имя поля;
• maxlength или minlength — максимальная или минимальная длина текста;
• max или min — максимальное или минимальное значение числа и даты;
• required — поле обязательно для заполнения;
• placeholder — в поле ввода отображается подсказка — что нужно вводить;
• disabled — блокирует input;
• autocomplete — автозаполнение;
• checked — для чекбоксов и радиокнопок, делает поле выбранным;
• pattern — задаёт паттерн для ввода данных, часто используется в типах tel и email;
• value — значение элемента;
• enctype — указывает, в каком виде пересылать данные на сервер.

<button>

Создаёт кнопку для отправки формы:

<button type="submit">Отправить</button>

В старых проектах всё ещё встречаются кнопки, сделанные с помощью <input type="button">. Но у такого способа есть ограничения — например, в <button> можно добавить изображение или псевдоэлемент, а в <input> нет.

Что выбрать

<textarea> — если нужно поле для ввода сообщения.

<select> — для раскрывающихся списков.

<input> — когда нужны чекбоксы, радиокнопки, поля для загрузки файлов и ввода данных.

<button> — для кнопки отправки формы.

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

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

Итак, начнем с того, для чего же нужны формы на сайте? Форма на сайте — это основной способ передачи данных от клиента на сервер. Именно поэтому формы есть практически на любом современном сайте. Мы встречаем их сплошь и рядом: форма авторизации, контактная форма регистрации, форма регистрации и другие.

Как видим, формы — вещь нужная. Как же создать форму на сайте. Для этого нужно начать с тега form в HTML, именно тег form дает понять браузеру, что внутри будут идти всевозможные элементы формы (поля формы), которые необходимо отрисовать на странице.

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

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

В итоге мы получили вот такую вот простенькую форму:

Выглядит непритязательно, но стилизация формы — это уже дело CSS.

Давайте вкратце пройдемся по коду. Итак, мы использовали тег form без атрибутов. Как вы помните, выше я писал, что для тега form часто используются атрибуты action и method. Если их не указать, тогда форма будет работать по умолчанию. Что это значит?

Атрибут action позволяет указать адрес страницы, на которую будет отправлены данные формы. Соответственно, эта страница примет эти данные и обработает их, например, отправит эти данные на email. Для обработки уже необходим язык программирования, например PHP, но это уже другая тема.

Так вот, если атрибут action не используется, тогда данные будут отправлены на текущую страницу. Что касается атрибута method, то он позволяет указать способ передачи данных. По умолчанию используется метод GET, который передает данные через адресную строку (т.н. GET-параметры). Также мы можем указать в качестве метода передачи данных — POST. В отличие от GET, метод POST передает данные в запросе браузера и они не видны пользователю. Чаще всего вы будете использовать именно метод POST.

Теперь относительно полей формы. Для них мы использовали теги input, textarea и button. Тег input с атрибутом type=’text’ создаст обычное текстовое поле. Тег input с типом email аналогичен типу text с той разницей, что браузер перед отправкой проверит, чтобы в поле был введен именно email, в противном случае форма не будет отправлена и браузер покажет ошибку.

Идем дальше. Тег textarea создаст текстовую область. Ну а button отрисует кнопку для отправки данных формы на сервер.

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

Как видим, в создании HTML формы нет ничего сложного, все достаточно просто. На этом текущую статью будем завершать. В следующих статьях мы узнаем больше о работе с формами HTML. Ну а если вы уже умеете создавать формы, но пока не умеете работать с ними на сервере, тогда обязательно посмотрите этот урок. На этом все. Удачи!