Форма заявки на html: 3 способа. Как сделать форму обратной связи на html? —

Содержание

Добавление формы

Откроется окно добавления формы, в котором вам будет необходимо на вкладке "Настройки" заполнить следующие поля:

  • Название формы - введите название, оно будет использоваться в системе управления для удобства (чтобы изменить заголовок на сайте - измените название страницы, к которой прикреплена форма).
  • E-mail отправки - Тут вы можете указать электронный адрес, на который будут поступать письма с информацией обо всех сообщениях, оставленных в форме. Для этого необходимо выбрать адрес из подтвержденных или же добавить новый и выбрать его, следуя инструкции по подтверждению Email. С ней вы можете ознакомиться по ссылке. На основе данного адреса система автоматически создаст уведомление вида "Email" - "Администратору" сразу же после того, как форму на сайте заполнят в первый раз. Соответственно после создания уведомления данного вида поле ввода адреса будет заменено на кнопку перехода к разделу уведомлений - в нем при необходимости вы сможете изменить адрес отправки.
  • Текст сообщения после отправки формы - введите сообщение, которое будет выводиться после отправки пользователем формы обратной связи. Например, "Спасибо за заявку!".

Затем вы можете перейти на вкладку "Дополнительно" и указать следующие параметры:

  • Цветовое оформление полей - выберите из списка цвет, который вы хотели бы использовать для полей формы.
  • Ширина формы - укажите в пикселах ширину формы, от этого размера в дальнейшем будет зависеть, сколько полей вы сможете разместить в одной строке формы горизонтально.
  • Отправлять письмо посетителю, заполнившему форму - при отмеченной галочке система будет отправлять посетителю, заполнившему форму, письмо с данными из формы.
    • Обратите внимание! Настройка имеет смысл только в том случае, если в данной форме есть поле вида "E-mail" - именно на указанный в этом поле адрес система будет отсылать письма о заполнении формы.
  • Отслеживать referer - включение/отключение отображения в письме информации о том, по каким запросам (через какие поисковые системы или по ссылке, с какого сайта) на ваш сайт пришел клиент, дата и точка входа на сайт. При выборе пункта "Да" данная информация будет приходить в письме.
  • URL страницы после успешной отправки формы - в данном поле можно указать адрес страницы, на которую будет перенаправлен посетитель после заполнения и отправки формы. Например, если вы хотите, чтобы после отправки формы посетитель попадал на главную страницу сайта или на страницу “Контакты” - укажите адрес нужной страницы. Если поле оставить пустым, пользователь после отправки останется на странице формы и просто увидит текст сообщения после отправки.

Шаблоны и примеры форм- Testograf.ru

Формы онлайн заказа

Простой и быстрый способ сбора заказов. Вы можете разместить форму на своем веб-сайте помощью виджета или встраивания.

Создать форму заказа

Лид-формы

Установите лид-форму на сайт и собирайте любые данные пользователей или заявки в максимально удобной для вас и ваших клиентов формате. Не упускайте дополнительную возможность для увеличения продаж!

Создать лид-форму

Формы обратной связи

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

Создать форму обратной связи

Формы приглашения

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

Создать форму приглашения

Формы регистрации

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

Формы регистрации

Формы оценки

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

Создать форму оценки

Другие формы

Являясь удобным и простым методом сбора информации, формы могут быть применимы во многих областях: это и формы кандидатов на должность и форма отчета о проделанной работе и даже форма петиции.

Создать форму

Как разместить форму заявки?

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

В серии материалов о форме разбираемся в видах, учимся размещать форму на странице, настраивать её и обрабатывать заявки.

В этой статье:

  • Какие бывают формы?
  • Сколько форм должно быть на лендинге?
  • Как добавить форму?
  • Где разместить?

То, как будет выглядеть форма зависит цели, с которой мы помещаем её на страницу. Будет ли это форма, где клиент оставляет телефон, на который мы после перезвоним и договоримся о доставке товара? Будет ли это форма, где клиент оставит email, куда мы после напишем, чтобы напомнить о мероприятии? Или форма, через которую клиент сможет оставить отзыв?

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

Определяем цель формы и необходимую информацию.

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

На лендинг заходят разные посетители:

  1. Те, кто видят страницу первый раз. Они не знакомы с товаром, хотят получить полную информацию и доскроллят до конца, если страница их заинтересовала.

  2. Если посетитель попадает из социальных сетей, email-рассылок или уже заходил на страницу, он уже знаком с товаром. Если товар его заинтересовал, клиент готов сделать заказ с первого экрана.

Форм на странице как минимум две.

Помимо формы заявки на первом экране и формы захвата в конце лендинга, в середине можно разместить:

  • Форму записи на бесплатную консультацию,
  • Форму обратного звонка,
  • Форму подписки на рассылку,
  • Форму, чтобы оставить отзыв и другие.

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

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

О настройке полей и дизайне формы читайте в следующей статье. Если на первом экране размещаем только заголовок, описание и меню, то форму можно разместить на следующей секции. Тогда воспользуемся одной из специальных секций "Форма". Здесь также есть вертикальные и горизонтальные варианты форм, формы, открывающиеся по клику. Заголовок, описание, стиль и цвет формы можно настроить.

О настройке полей и дизайне формы – в следующей статье. Если ни одна их стандартных секций с формой не подходит или форму нужно разместить в уже созданную секцию, используем виджет. Есть несколько виджетов:

  • Простая форма
  • Горизонтальная форма
  • Форма с одним полем форма Выбираем вид и перемещаем виджет туда, где хотим разместить форму.

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

1

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

Пример

Кнопки “Заказать звонок”, “Нанять дизайнера” с формой, открывающейся по клику, и полная форма “Нанять замерщика” на лендинге компании по ремонту помещений.

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

2

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

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

Пример

Формы обратной связи, открывающиеся по кнопке “Перезвонить”, “Отправить заявку” и “Консультация” на лендинге о языковых курсах.

3

Третий дополнительный способ размещения формы – кнопка-ссылка на секцию с формой в середине или внизу лендинга.

Пример

Кнопка на первом экране “Перейти в магазин” со скроллом к секции с товарами, где есть форма обратной связи.

Итак,

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

В следующей статье расскажем о дизайне формы.

СМС заявка с сайта

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

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

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

Как получать смс сообщения бесплатно?

Через сервис sms. ru можно бесплатно посылать до 5-ти сообщений в день (легальная лазейка для программистов), но при строгом соблюдении конкретных условий:

  1. Сообщения должны посылаться только на свой телефонный номер.
  2. Если выставлено ограничение в 1 смс.
  3. Если e-mail отправителя указан в текстовом поле E-mail отправителей в разделе Почта @sms.ru.
  4. Количество русских и латинских символов не превышают 70/160 в одном смс сообщении.

В разделе @sms.ru создайте почтовый ящик – [email protected]. Это будет ваш секретный почтовый ящик в системе, на который будут приходить данные из формы на вашем сайте, в момент заполнения её клиентом. В дальнейшем эти данные система перешлет на ваш мобильный телефон и вы получите смс сообщение.

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

Заполните форму, как на скриншоте ниже.

Сервис sms.ru доступен для многих стран, список вы найдёте на сайте.

Отправка смс сообщений с сайта на WordPress

После настройки бесплатных смс сообщений на сервисе sms.ru, необходимо связать форму заявок с созданным секретным почтовым ящиком. Рассмотрим на примере Contact Form 7.

Настройка формы Contact Form 7 под sms.ru

В настройках Contact Form 7 перейдите во вкладку Письмо, там будет две формы: Письмо – это основное письмо с текстом заявки, которое мы получим на нашу почту. Заполняете первую форму, указав ваш бизнес e-mail. Но нас больше интересует Письмо (2), поставьте галочку внизу - Использовать почту (2).

Форма с письмом (2) будет отсылаться на вашу секретную почту в системе sms.ru. Заполнять поля формы следует, как у меня на скриншоте, чтобы смс была бесплатной, если вам это важно.

Поля формы заполняются автоматически, удаляем все и заполняем своими данными. В поле Кому надо вставить адрес секретной почты [email protected]. А в поле Тело письма вставьте шаблон [your-name] и [your-phone], а [your-message] уберите, помните о 70-ти бесплатных русских символах?

Последний важный шаг

В Contact Form 7 (Письмо 2) из поля От кого копируем [email protected]_sait.ru и вставляем в поле E-mail Отправителя на sms.ru.

Вы получите на смс имя и телефон клиента, этих данных достаточно, чтобы оперативно связаться с ним, не имея под рукой интернета.

Отправка смс сообщений с лендинга

Сейчас я вам расскажу об универсальном способе отправки СМС заявки с сайта, подходящего для любых сайтов, где есть форма. Вам потребуется завести специальный почтовый ящик на сервисе mail. ru, адрес которого вы пропишите в поле Получатель вашей HTML формы (сайт должен быть на PHP). Заведите для этих целей на mail.ru отдельный e-mail, чтобы вы знали наверняка, что это именно клиент с вашего сайта.

Далее заходите на ваш специальный почтовый аккаунт в Ещё -> Настройки -> Уведомления. Открываете Настроить уведомления по SMS (настраиваете как вам надо), выбираете не более 1-го сообщения за 30 минут. Для небольшого бизнеса этого достаточно и сохраняете.

Сервис mail.ru работает только на российских и частично на СНГ мобильных операторов.

  • Создано 05.10.2018 10:10:41
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk. com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Создание и редактирование веб-формы

Закладки

Основная контекстная панель

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

Свойства

Форма редактирования может быть открыта через панель управления. Также ее можно загрузить из публичной части в режиме Правка с помощью меню действий компонента Редактировать параметры веб-формы.

ПолеОписание
*НаименованиеНазвание формы.
*Символьный идентификаторМнемонический идентификатор формы, вызывающий форму без использования ID в коде. Задается латинскими буквами. Удобен, например, при переносе базы данных.

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

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

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

Поле отображается только в упрощённом режиме редактирования веб-форм.

Подпись на кнопке, сохраняющей результаты формыНадпись на кнопке, сохраняющей результаты формы. Например, Отправить или Сохранить.
Использовать CAPTCHAТолько при установленном параметре предусмотренная в форме CAPTCHA будет работать.

* - поля, обязательные для заполнения.

Описание

ПолеОписание
ИзображениеИзображение, используемое для описания формы в публичном разделе сайта. Для выбора изображения служит кнопка Обзор.
ОписаниеСозданное описание будет выводиться при показе веб-формы в публичном разделе сайта.

Шаблон формы

При создании/редактировании веб-формы пользователю предоставлен выбор:

  • Использовать шаблон формы по умолчанию
  • Использовать свой шаблон формы

При выборе пункта Использовать свой шаблон формы возможно редактирование шаблона веб-формы с помощью визуального редактора.

Редактор дает следующие возможности:

  • редактирование шаблона оформления;
  • создание/редактирование структуры вопросов и ответов.

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

Кнопки, расположенные внизу окна редактора, позволяют скрывать и разворачивать панели Элементы формы и Свойства.

Если панель Элементы формы развернута, то она расположена в правой части редактора и содержит следующие разделы:

  • Новые поля формы служит для добавления в веб-форму новых элементов;
  • Существующие поля формы содержит уже настроенные вопросы веб-формы;
  • Дополнительные элементы формы содержит инструментарий для вставки в шаблон веб-формы дополнительных структурных элементов.

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

Область редактирования

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

Панель "Элементы формы"
Новые поля формы

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

Существующие поля формы

Панель появляется только при редактировании уже созданной веб-формы. В ней перечислены уже созданные и настроенные вопросы веб-формы. В этом списке также отображаются неактивные вопросы с соответствующей пометкой. Они отображаются в виде: <Значок поля><Текст вопроса>. Например:

Дополнительные элементы формы

Дополнительные компоненты, используемые для оформления внешнего вида формы.

Свойства элементов

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

Набор настроек:

ПараметрОписание
Строковой идентификаторУникальный в рамках веб-формы идентификатор вопроса. Должен отличаться от строкового идентификатора веб-формы, выставляемого при расширенном режиме редактирования веб-формы. При добавлении нового элемента в шаблон его идентификатор по умолчанию будет new_field_N, где N - случайное число.
Текст вопросаТекст вопроса, который будет отображаться:
  1. при использовании элемента Подпись поля формы;
  2. в таблице списка результатов веб-формы;
  3. в фильтре списка результатов веб-формы;
  4. при просмотре результата веб-формы;
  5. при выводе ошибок заполнения веб-формы.
Текст вопроса - HTML?В тексте вопроса допускается собственное HTML-форматирование.
Обязателен?Флаг обязательности заполнения вопроса.
Показать в HTML-таблице результатов?Показывать ли колонку поля в таблице результатов веб-формы (в публичной части).
Показать в Excel-таблице результатов?Показывать ли колонку поля в Excel-таблице результатов веб-формы.
Тип поляТип поля вопроса (не редактируется).
ОтветыПараметры ответов на вопрос. Поле изменяется в зависимости от типа вопроса:
  • значение по умолчанию и длина поля для полей типа text, date, email, url, password, image, file;
  • число столбцов и число строк для полей типа textarea;
  • варианты ответов, порядок и флаг выбран по умолчанию для каждого варианта в случае полей типа dropdown, checkbox, radio, multiselect.

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

ПараметрОписание
Строковой идентификаторДля элементов Подпись поля формы и Изображение поля формы предоставляется выбор соответствующего им поля формы в виде выпадающего списка строковых идентификаторов полей.
СтильДля многих элементов предоставляется выбор CSS-класса, который нужно присвоить элементу. Если нужного класса нет в списке, то его можно указать в текстовом поле под выпадающим списком стилей.
РасположениеДля компонентов Изображение к форме и Изображение к полю можно задать такие параметры изображения, как:
  • расположение изображения относительно окружающего текста;
  • максимальная ширина и высота изображения;
  • увеличивать ли изображение в отдельном окне, если оно превышает максимальные размеры;
  • подпись для ссылки увеличения;
  • вертикальные и горизонтальные отступы от окружающего текста;
  • толщину рамки вокруг изображения.
Максимальная ширина
Максимальная высота
Увеличивать?
Вертикальный отступ
Горизонтальный отступ
Рамка
ПодписьДля элементов-кнопок можно указать подпись, которая будет изображена на кнопке.

Дополнительные замечания:

  • При желании можно отключить использование шаблона оформления, выбрав опцию Использовать шаблон формы по умолчанию над редактором. При этом редактор будет скрыт, и будет использоваться шаблон по умолчанию. Шаблон веб-формы будет сохранен вместе с изменениями структуры вопросов веб-формы.
  • Если в настройках веб-формы установлен флаг Использовать CAPTCHA, а в шаблоне веб-формы элементы для ввода CAPTCHA отсутствуют, то флаг автоматически снимется при сохранении веб-формы.
  • Вопрос, отсутствующий в шаблоне веб-формы, при сохранении будет помечен как неактивный. Это также выражается в том, что если добавить новый элемент в веб-форму, а потом удалить его, то он сохранится в виде неактивного вопроса. Исключение - если на веб-форме уже присутствует элемент с таким строковым идентификатором. В этом случае элемент, отсутствующий в шаблоне, будет удален.
  • При копировании веб-формы вопросы новой веб-формы будут иметь те же самые строковые идентификаторы, что и у исходной. Идентификатор самой веб-формы получит случайно сгенерированный постфикс.
  • При повторной вставке в шаблон веб-формы уже существующего вопроса (например, из панели Существующие поля формы или методом copy/paste) результатом будет создание связанной копии вопроса, все изменения которой будут отражаться и на изначальном элементе. Если Вы хотите продублировать элемент, создайте ещё один элемент того же типа с такими же параметрами (кроме, разумеется, строкового идентификатора) или воспользуйтесь инструментом копирования вопроса (в списке вопросов веб-формы).

Ограничения

Указание ограничений на добавление результатов.

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

Дополнительно

Отображается только в полном режиме создания веб-форм.

Позволяет настроить шаблоны, используемые при работе с веб-формой.

ПолеОписание
Почтовый шаблонУказываются шаблоны, используемые для отправки результатов веб-формы.
Шаблон фильтра по таблице результатов в административной частиПуть к шаблону, используемому для фильтрации (поиска) результатов веб-формы в административном разделе.
Шаблон для таблицы результатов в административной частиПуть к шаблону, используемому для отображения таблицы результатов в Административном разделе.

Статистика

Служит для задания идентификаторов, с использованием которых событие заполнения веб-формы будет учитываться в модуле статистики.

ПолеОписание
Event1Идентификатор типа события event1.
Event2Идентификатор типа события event2.
Event3Дополнительный параметр для события.

CRM

Служит для настройка связей веб-формы с CRM портала.

ПолеОписание
CRMВ выпадающем списке выбирается портал, в CRM которого будут отсылаться результаты заполнения веб-формы. Когда портал выбран, то становятся доступными нижеописанные поля.

Если в системе не создана ни одна связь с CRM, то в списке следует выбрать пункт настроить новый. Откроется форма создания связи.

Способ отсылкиПри ручном режиме данные передаются в CRM менеджером после их обработки. При автоматическом режиме результаты заполнения сразу передаются в CRM..
Связанные поля
Указывается каким данным веб-формы (показаны справа) будет соответствовать какое-либо поле лида (показаны слева). Чтобы задать новое соответствие, служит кнопка Добавить.

Доступ

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

ПолеОписание
[Группа пользователей]Право группы пользователей на форму. Каждое последующее право включает в себя все предыдущие.
  • доступ закрыт - форма и ее результаты полностью недоступны;
  • заполнение формы - посетитель может только заполнить и сохранить форму;
  • работа со своим результатом в соответствии с его статусом - посетитель получает возможность работать только со своими результатами в соответствии с заданными для каждого из статусов правами;
  • работа со всеми результатами в соответствии с их статусами - посетитель получает возможность работать со всеми результатами в соответствии с заданными для каждого из статусов правами;
  • просмотр параметров формы - включает все вышеописанные права, а также возможность просмотра параметров веб-формы;
  • полный доступ - включает все вышеописанные права, а также права на изменение настроек формы.

Смотрите также

© «Битрикс», 2001-2021, «1С-Битрикс», 2021

Наверх

Как подать международную заявку: Бланки и содержание

Подав заявку на отечественный товарный знак или зарегистрировав его в вашем ведомстве происхождения (иными словами, получив «базовый знак»), вы можете подавать международную заявку по процедуре Мадридской системы. Эта заявка должна подаваться в ваше ведомство происхождение, которое проверяет ее соответствие данным вашего базового знака, удостоверяет международную заявку и затем представляет ее в ВОИС.

Бланк заявки

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

В ряде ведомств ИС при подаче международных заявок можно использовать Мадридский сервис электронной подачи. Дополнительная информация о Мадридском сервисе электронной подачи и внедривших его ведомствах ИС.

ВОИС рекомендует использовать сервис «Помощник по подаче заявок в Мадридской системе» для заполнения бланков международных заявок в тех случаях, когда ведомство происхождения не предусматривает возможность электронной подачи.

Международная заявка направляется в ведомство происхождения заявителя. Просьба не отправлять ее напрямую в ВОИС.

При подаче всех международных заявок, содержащих указание Соединенных Штатов Америки, следует прилагать заполненный бланк по форме ММ18 (Заявление о намерении использовать знак).

Более подробная информация представлена в пояснительных примечаниях к бланку MM2 , пункты B.II.01.01 – 10.02 Руководства по международной регистрации знаков в соответствии с Мадридским соглашением и Мадридским протоколом, в справочнике «Максимально эффективное использование Мадридской системы» (стр. 17-28) и в информационном сообщении No. 23/2014 .

Перечень товаров и услуг

Перечень товаров и услуг должен быть классифицирован в соответствии с последней версией Международной классификации товаров и услуг (Ниццкая классификация). Для этой цели рекомендуем воспользоваться Менеджером товаров и услуг Мадридской системы.

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

  • Руководство по экспертизе. Классификация товаров и услуг 

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

Формы в Django · HonKit

Последним, что нам стоит сделать для нашего веб-сайта, является удобный способ добавления и редактирования записей. admin-панель Django удобна, но её дизайн сложно изменять. С forms (формами) у нас будет абсолютная власть над интерфейсом блога — мы сможем сделать практически всё, что только можно придумать!

Формы Django удобны тем, что мы можем создать новую форму с нуля или воспользоваться ModelForm для сохранения содержимого формы в модель.

Это как раз то, что нам нужно сделать: мы создадим форму для модели Post.

Как и любая важная часть Django, формы имеют свой собственный файл: forms.py.

Нам нужно создать файл с таким именем в директории blog.

blog
   └── forms.py

Теперь открой его и набери следующее:

blog/forms. py

from django import forms

from .models import Post

class PostForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = ('title', 'text',)

Для начала нам нужно импортировать формы Django (from django import forms) и, разумеется, нашу модель Post (from .models import Post).

PostForm, как ты, вероятно, подозреваешь, — это имя для нашей формы. Нам нужно также сообщить Django, что эта форма относится к ModelForm (чтобы он смог поколдовать для нас) — forms.ModelForm поможет с этим.

Дальше у нас class Meta, где мы определяем, какая модель будет использоваться для создания формы (model = Post).

В завершение мы можем указать, какие поля должны присутствовать в нашей форме. Сейчас нам требуются только поля title и textauthor будет автоматически выбран в зависимости от авторизованного пользователя (тебя), а created_date должна автоматически проставляться в момент создания записи (т. е. через код), верно?

Вот и всё! Теперь мы можем использовать форму в представлении и отобразить её в шаблоне.

Поэтому снова нам необходимо создать ссылку на страницу, URL-адрес, представление и шаблон.

Ссылка на страницу с формой

Пришло время открыть файл blog/templates/blog/base.html. Мы добавим ссылку в элемент div с именем page-header:

blog/templates/blog/base.html

<a href="{% url 'post_new' %}"><span></span></a>

Обрати внимание, что мы назвали новое представление post_new. Класс glyphicon glyphicon-plus определён в используемой нами теме bootstrap — таким образом мы выведем значок плюса.

После добавления строки твой html-файл должен выглядеть следующим образом:

blog/templates/blog/base.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn. bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div>
            <a href="{% url 'post_new' %}"><span></span></a>
            <h2><a href="/">Django Girls Blog</a></h2>
        </div>
        <div>
            <div>
                <div>
                    {% block content %}
                    {% endblock %}
                </div>
            </div>
        </div>
    </body>
</html>

После сохранения файла и перезагрузки страницы по адресу http://127.0.0.1:8000 ты, конечно, увидишь знакомую ошибку NoReverseMatch, верно?

URL

Нам нужно открыть файл blog/urls. py и добавить строку:

blog/urls.py

path('post/new/', views.post_new, name='post_new'),

Окончательная версия файла будет выглядеть следующим образом:

blog/urls.py

from django.urls import path 
from . import views

urlpatterns = [
    path('', views.post_list, name='post_list'),
    path('post/<int:pk>/', views.post_detail, name='post_detail'),
    path('post/new/', views.post_new, name='post_new'),
]

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

Представление post_new

Самое время открыть файл blog/views.py и добавить следующую строку к остальным, начинающимся с from:

blog/views.py

from .forms import PostForm

А затем наше представление:

blog/views.py

def post_new(request):
    form = PostForm()
    return render(request, 'blog/post_edit. html', {'form': form})

Чтобы создать новую форму Post, нам потребуется вызвать PostForm() и передать её шаблону. Мы ещё вернёмся к этому представлению, а пока давай быстро создадим шаблон под форму.

Шаблон

Нам нужно создать файл post_edit.html в директории blog/templates/blog. Чтобы заставить форму работать, нам потребуется несколько вещей:

  • Нам нужно отобразить форму. Мы можем сделать это, к примеру, простым {{ form.as_p }}.
  • Строка выше должна быть обёрнута в HTML-теги <form method="POST">...</form>
  • Нам потребуется кнопка Save. Мы добавим её при помощи HTML-кнопки: <button type="submit">Save</button>
  • И, наконец, сразу после открытия тега < form... > мы должны добавить {% csrf_token %}. Это очень важно, поскольку так мы делаем форму защищённой! Django будет ругаться, если ты забудешь добавить этот код:

Хорошо, давай посмотрим, как должен выглядеть HTML-код в файле post_edit. html:

blog/templates/blog/post_edit.html

{% extends 'blog/base.html' %}

{% block content %}
    <h2>New post</h2>
    <form method="POST">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
    </form>
{% endblock %}

Время обновить страницу! Ура! Форма отображается!

Но подожди минутку! Если ты наберёшь что-нибудь в полях title и text и попробуешь сохранить — что произойдёт?

Ничего! Мы снова на той же странице и наш текст пропал... и новая запись не была добавлена. Так что же пошло не так?

Ответ прост: ничего. Нам нужно сделать кое-что ещё, чтобы новое представление заработало.

Сохраняем данные из формы

Снова открой файл blog/views.py. Всё, что у нас есть в представлении post_new, выглядит пока следующим образом:

blog/views.py

def post_new(request):
    form = PostForm()
    return render(request, 'blog/post_edit. html', {'form': form})

После отправки формы мы возвращаемся к тому же представлению, но в этот раз с новыми данными в request, а точнее, в request.POST (имя POST не имеет ничего общего с "постом" в блоге, оно связано с тем, что мы "публикуем" данные). Помнишь, что в HTML-файле определение <form> имеет параметр method="POST"? Все поля формы теперь находятся в request.POST. Ты не должна переименовывать POST во что-то другое (другое доступное значение параметра methodGET, но у нас сейчас нет времени объяснять разницу).

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

blog/views. py

if request.method == "POST":
    [...]
else:
    form = PostForm()

Теперь заполним строку, занятую [...]. Если methodPOST, тогда мы хотим построить PostForm с данными из формы, верно? Мы добьёмся этого следующим образом:

blog/views.py

form = PostForm(request.POST)

Легко! Дальше мы проверим, корректна ли форма (все ли необходимые поля заполнены и не отправлено ли некорректных значений). Мы сделаем это при помощи form.is_valid().

Мы проверяем, допустимо ли содержимое формы, и, если всё в порядке, сохраняем её!

blog/views.py

if form.is_valid():
    post = form.save(commit=False)
    post.author = request.user
    post.published_date = timezone.now()
    post.save()

Фактически мы выполняем две операции: сохраняем форму form.save и добавляем автора (поскольку обязательного поля author нет в PostForm!). commit=False означает, что мы пока не хотим сохранять модель Post — сначала нужно добавить автора. В основном ты будешь использовать form.save(), без commit=False, но в данном случае нам это пригодится. post.save() сохранит изменения (после добавления автора), и новая запись будет создана!

Наконец, будет прекрасно, если мы сможем сразу переходить к странице post_detail после добавления новой записи, согласна? Для этого нам понадобится еще один импорт:

blog/views.py

from django.shortcuts import redirect

Добавь эту строку в начало файла. Теперь мы можем сделать переадресацию на страницу post_detail для созданной записи:

blog/views.py

return redirect('post_detail', pk=post.pk)

post_detail — это имя представления, которое нам необходимо. Помнишь, что это представление требует переменную pk? Чтобы передать её представлению, мы используем аргумент pk=post. pk, где post — это новая запись в блоге!

Хорошо, мы многое обсудили, пора взглянуть на представление полностью, верно?

blog/views.py

def post_new(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.published_date = timezone.now()
            post.save()
            return redirect('post_detail', pk=post.pk)
    else:
        form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})

Проверим, всё ли работает. Перейди по адресу http://127.0.0.1:8000/post/new/, добавь текст в поля title и text, затем сохрани… и вуаля! Новая запись создана, и мы перешли на страницу post_detail!

Возможно, ты заметила, что мы устанавливаем дату публикации перед сохранением поста. В последствии мы сделаем кнопку публикации в Django Girls Tutorial: Extensions.

Это круто!

Поскольку мы недавно использовали панель администратора Django, система до сих пор думает, что мы авторизованы. Существует несколько случаев, когда мы можем случайно выйти из аккаунта (закрытие браузера, перезапуск базы данных и т.д.). Если ты получаешь ошибку при попытке сохранения записи, то потребуется перейти на страницу http://127.0.0.1:8000/admin и авторизоваться в системе снова. Это решит проблему. В главе Домашнее задание: добавляем безопасность нашему веб-сайту! после основного учебника описано окончательное решение этой проблемы.

Валидация формы

Теперь мы покажем тебе, насколько круты формы в Django. Запись в блоге должна иметь поля title и text. В нашей модели Post мы не указываем, что эти поля необязательны (в отличие от published_date), так что Django по умолчанию будет ожидать, что пользователь их заполнит.

Попробуй сохранить форму с незаполненными полями title и text. Угадай, что произойдёт!

Django заботится о проверке всех полей в нашей форме на корректность. Разве не шикарно?

Форма редактирования

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

Открой blog/templates/blog/post_detail.html и добавь следующую строку:

blog/templates/blog/post_detail.html

<a href="{% url 'post_edit' pk=post.pk %}"><span></span></a>

так, чтобы шаблон выглядел следующим образом:

blog/templates/blog/post_detail.html

{% extends 'blog/base.html' %}

{% block content %}
    <div>
        {% if post.published_date %}
            <div>
                {{ post. published_date }}
            </div>
        {% endif %}
        <a href="{% url 'post_edit' pk=post.pk %}"><span></span></a>
        <h2>{{ post.title }}</h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endblock %}

В файле blog/urls.py добавь:

blog/urls.py

    path('post/<int:pk>/edit/', views.post_edit, name='post_edit'),

Мы будем использовать повторно шаблон blog/templates/blog/post_edit.html, так что осталось лишь отсутствующее представление.

Давай откроем файл blog/views.py и добавим в самый конец следующее:

blog/views.py

def post_edit(request, pk):
    post = get_object_or_404(Post, pk=pk)
    if request.method == "POST":
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request. user
            post.published_date = timezone.now()
            post.save()
            return redirect('post_detail', pk=post.pk)
    else:
        form = PostForm(instance=post)
    return render(request, 'blog/post_edit.html', {'form': form})

Выглядит практически идентично представлению post_new, верно? Но не совсем. Во-первых, мы передаём параметр pk из URL-адреса. Кроме того, мы получаем модель Post для редактирования при помощи get_object_or_404(Post, pk=pk) и передаём экземпляр post в качестве instance форме и при сохранении…

blog/views.py

form = PostForm(request.POST, instance=post)

… и когда мы открываем форму для редактирования:

blog/views.py

form = PostForm(instance=post)

Хорошо, давай удостоверимся, что всё работает! Перейди на страницу post_detail. Ты должна увидеть кнопку редактирования в правом верхнем углу:

Когда ты её нажмёшь, то увидишь форму с выбранной записью:

Поменяй заголовок и текст, а затем сохрани запись!

Поздравляем! Твое приложение становится всё более сложным!

Если тебе нужно больше информации о формах в Django, обратись к официальной документации: https://docs. djangoproject.com/en/2.0/topics/forms/

Безопасность

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

В файле blog/templates/blog/base.html найди page-header div и тег <a>, который мы добавили ранее. Должно выглядеть примерно так:

blog/templates/blog/base.html

<a href="{% url 'post_new' %}"><span></span></a>

Мы добавим сюда ещё один тег {% if %}, чтобы ссылка показывалась только пользователям, вошедшим в админку. То есть пока что — только тебе! Измени тег <a>, чтобы получилось так:

blog/templates/blog/base.html

{% if user.is_authenticated %}
    <a href="{% url 'post_new' %}"><span></span></a>
{% endif %}

Из-за этого {% if %} ссылка будет отправлена в браузер, только если запрашивающий страницу пользователь вошёл в систему. Это не обезопасит создание новых постов полностью, но для начала и это неплохо. Мы подробнее рассмотрим вопросы безопасности в дополнении к учебнику.

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

Открой файл blog/templates/blog/post_detail.html и найди такую строку:

blog/templates/blog/post_detail.html

<a href="{% url 'post_edit' pk=post.pk %}"><span></span></a>

Замени её на следующее:

blog/templates/blog/post_detail.html

{% if user.is_authenticated %}
     <a href="{% url 'post_edit' pk=post.pk %}"><span></span></a>
{% endif %}

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

И последнее: публикация!

Теперь давай посмотрим, как это будет работать на PythonAnywhere. Пришло время для очередного развёртывания!

  • Сначала нам нужно сделать commit и push нового кода в репозиторий GitHub:

command-line

$ git status
$ git add --all .
$ git status
$ git commit -m "Added views to create/edit blog post inside the site."
$ git push

PythonAnywhere command-line

$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]

(Не забудь подставить вместо свой поддомен на PythonAnywhere без угловых скобок.)

  • Наконец, зайди на страницу "Web" page (используй кнопку меню в правом верхнем углу консоли) и нажми Reload. Обнови страницу блога http://subdomain.pythonanywhere.com/, чтобы увидеть изменения.

Вот и всё! Поздравляем 🙂

Как создать регистрационную форму в HTML с нуля

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

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

Не бойтесь, мы это изменим.Приведя несколько простых примеров, вы будете готовы создать базовую регистрационную форму с использованием HTML. Давайте начнем.

Но прежде чем мы начнем: Вам действительно нужно создать форму с использованием HTML? Подумайте об использовании инструмента для создания форм, такого как Paperform, чтобы сэкономить время и создать более мощную и профессионально выглядящую регистрационную форму за считанные минуты.

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

Шаг 1. Выберите HTML-редактор

Для создания HTML-кода вам понадобится HTML-редактор.На рынке их десятки, и многие из них можно загрузить бесплатно.

Популярные редакторы:

  • Codepen
  • Notepad ++
  • Kompozer
  • Sublime Text
  • NetBeans
  • CoffeeCup
  • Phase 6 HTML Editor

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

Шаг 2: Создайте новый файл с расширением .HTML

Следующий шаг - сообщить вашей операционной системе, что вы собираетесь создать новый HTML-файл.Для этого создайте новый файл и сохраните его с расширением .html. Это просто: просто введите имя файла (какое угодно), а затем введите .html. Например: [myfile.html].

Шаг 3: Введите в редактор.

Эта команда сообщает редактору, что вы собираетесь создать HTML-код, и он автоматически сгенерирует для вас следующий код.

  


       


    

  

Все еще хотите создать эту регистрационную форму с помощью необработанного HTML?

Вместо этого используйте Paperform - бесплатная 14-дневная пробная версия

Шаг 4: Заполните поля и создайте форму

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

Тип:

  

  
     

Форма регистрации компании

<форма> <таблица> Адрес электронной почты: Пароль:


Вот что будет производить этот базовый код:

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

Вы заметите, что каждый раз, когда вы хотите создать новое поле в своей таблице, вы должны набирать команду «tr», а затем закрывать ее с помощью «/ tr». Вы можете добавить в форму столько полей, сколько захотите.

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

Вы также заметите, что мы очень подробно описали тип ввода. Когда пользователь вводит свой адрес электронной почты, текст появляется на его экране, как в обычном текстовом редакторе или в строке поиска. Но во втором поле мы указали тип ввода как «пароль», который инструктирует программу скрыть его и показать каждый символ в виде маленькой точки.

Шаг 5. Добавьте заполнители

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

  


Форма регистрации компании

<форма> <таблица> Адрес электронной почты: Пароль:

При вводе этого нового кода будет получена такая форма:

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

Чтобы создать поле для пола, вставьте в код следующие значения (прямо над последним тегом ):

   Male 
Female

Это превратится в флажки, один для мужчин и один для женщин. Вот как теперь должна выглядеть ваша форма:

Как сделать вашу HTML-форму лучше

Как вы, вероятно, заметили, созданная нами HTML-форма не особенно привлекательна.Конечно, HTML выполнит свою работу, но, вероятно, не поможет вам создавать особенно заполняемые формы; они скучные, скучные и, прежде всего, слишком , очень сложно и неуклюже, чтобы заполнить , как что-то из первых дней Интернета (привет, MS Paint).

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

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

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

Поля поиска

CSS позволяет изменять форму полей поиска.Используя команду input [type = search], вы можете выполнять ряд команд, которые позволяют вам изменять стиль окон поиска в соответствии с вашими требованиями.

Шрифты и текст

HTML использует стандартный шрифт, но CSS позволяет изменять его в различных стилях. Стоит отметить, что конкретный стиль, который у вас получается, обычно зависит от браузера. Например, Firefox будет выпускать разные шрифты из Safari.

Уловка со стилями шрифтов заключается в том, чтобы выбрать стили, которые соответствуют эстетике остальной части вашего веб-сайта.Некоторые виджеты, такие как «форма», не используют автоматически тот же шрифт и стиль, что и остальная часть браузера, что означает, что ваша форма может закончиться с непоследовательным текстом.

Существует множество элементов шрифта и цвета, которые можно изменить с помощью CSS. Вот полезный список.

Здесь мы добавили CSS, чтобы указать тип шрифта («семейство»), размер, вес и цвет.

  таблица {
семейство шрифтов: Helvetica;
размер шрифта: 100%;
  font-weight: жирный;
}
 h2 {
   цвет: # ea503f;
   семейство шрифтов: Arial;
 }  

В результате ваша форма будет выглядеть так:

Почему HTML-форма редко бывает правильным решением

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

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

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

Вот регистрационная форма, созданная с помощью Paperform (бесплатная пробная версия в течение 14 дней) за 3 минуты:

Создайте собственную регистрационную форму за считанные минуты. минут с использованием одного из множества готовых шаблонов форм подписки Paperform.

Ваша первая форма - Изучите веб-разработку

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

Предварительные требования: Базовая компьютерная грамотность и базовое понимание HTML.
Цель: Ознакомиться с тем, что такое веб-формы, для чего они используются, как их проектировать, а также с основными элементами HTML, которые вам понадобятся в простых случаях.

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

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

Элементы управления формой

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

Перед тем, как приступить к программированию, всегда лучше сделать шаг назад и подумать о своей форме.Создание быстрого макета поможет вам определить правильный набор данных, который вы хотите попросить ввести пользователя. С точки зрения пользовательского опыта (UX) важно помнить, что чем больше ваша форма, тем больше вы рискуете расстроить людей и потерять пользователей. Будьте просты и сосредоточьтесь: запрашивайте только те данные, которые вам абсолютно необходимы.

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

В этой статье мы создадим простую контактную форму.Сделаем набросок.

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

Элемент

Все формы начинаются с элемента , например:

  

  

Этот элемент формально определяет форму.Это элемент контейнера, такой как элемент

или
, но специально для содержания форм; он также поддерживает некоторые специфические атрибуты для настройки поведения формы. Все его атрибуты являются необязательными, но стандартная практика всегда устанавливать как минимум атрибуты action и method :

  • Атрибут действия определяет местоположение (URL), куда должны быть отправлены собранные данные формы при их отправке.
  • Атрибут method определяет, с каким методом HTTP отправлять данные (обычно получают или post ).

Примечание : Позже мы рассмотрим, как эти атрибуты работают, в нашей статье «Данные формы отправки».

А пока добавьте указанный выше элемент

в свой HTML .

Элементы , и

Обновите код формы, чтобы он выглядел, как показано выше.

Элементы

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

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

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

    • В нашем простом примере мы используем значение для первого ввода - значение по умолчанию для этого атрибута.Он представляет собой простое однострочное текстовое поле, в которое можно вводить любой текст.
    • Для второго ввода мы используем значение , которое определяет однострочное текстовое поле, которое принимает только правильно сформированный адрес электронной почты. Это превращает базовое текстовое поле в своего рода «интеллектуальное» поле, которое будет выполнять некоторые проверки достоверности данных, вводимых пользователем. Это также приводит к появлению более подходящей раскладки клавиатуры для ввода адресов электронной почты (например, с символом @ по умолчанию) на устройствах с динамической клавиатурой, таких как смартфоны. Вы узнаете больше о проверке формы позже в статье о проверке формы на стороне клиента.

    И последнее, но не менее важное: обратите внимание на синтаксис и . Это одна из странностей HTML. Тег является пустым элементом, что означает, что ему не нужен закрывающий тег.

    Элемент

    Разметка для нашей формы почти завершена; нам просто нужно добавить кнопку, позволяющую пользователю отправлять или «отправлять» свои данные после того, как они заполнили форму. Это делается с помощью элемента

  • Элемент

    Напомним, что авторы должны предоставить альтернативный текст для Элемент IMG .

    Незаконно связать карту изображения с IMG , который появляется как содержимое BUTTON элемент.

    НЕЗАКОННЫЙ ПРИМЕР:
    Следующее ниже не является допустимым HTML.

    <КНОПКА>
    
    
     

    Начальный тег: требуется , Конечный тег: требуется

    SELECT Определения атрибутов

    имя = cdata [CI]
    Этот атрибут назначает имя элемента управления.
    размер = номер [CN]
    Если Элемент SELECT представлен как поле со списком с прокруткой, этот атрибут указывает количество строк в списке, которые должны быть видны одновременно время.Визуальные пользовательские агенты не обязаны представлять SELECT элемент в виде списка; они могут использовать любой другой механизм, например раскрывающийся список меню.
    кратное [CI]
    Если установлено, этот логический атрибут допускает множественный выбор. Если не установлен, Элемент SELECT допускает только одиночный выбор.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • отключено (отключено управление вводом)
    • tabindex (навигация с вкладками)
    • onclick , ondblclick , onmousedown , onmouseup , на мышь над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

    Элемент SELECT создает меню.Каждый выбор Предлагаемое меню представлено элементом OPTION . A ВЫБРАТЬ Элемент должен содержать хотя бы один элемент OPTION .

    Элемент OPTGROUP позволяет авторам группировать варианты выбора логически. Это особенно полезно, когда пользователь должен выбрать из длинного список опций; группы связанных вариантов легче понять и запомнить чем один длинный список вариантов. В HTML 4 все Элементы OPTGROUP должны быть указаны непосредственно в SELECT элемент (я.е., группы не могут быть вложенными).

    17.6.1 Предварительно выбрано варианты

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

    • Если нет Элемент OPTION имеет набор атрибутов selected , пользовательский агент поведение при выборе изначально выбранной опции не определено. Заметка. Поскольку существующие реализации обрабатывают этот случай по-другому, текущая спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.3), в котором говорится:
      В исходном состоянии выбран первый вариант, если не ВЫБРАН Атрибут присутствует в любом из элементов

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

    • Если один Для элемента OPTION установлен атрибут selected , он должен быть предварительно выбранный.
    • Если В элементе SELECT установлено несколько атрибутов , несколько атрибутов и более один В элементе OPTION установлен атрибут selected , все они должны быть предварительно выбранным.
    • Считается ошибкой, если более одного элемента OPTION имеют значение selected атрибут установлен, а элемент SELECT не имеет набор нескольких атрибутов . Пользовательские агенты могут различаться в том, как они справляются с этим ошибка, но не следует предварительно выбирать более одного варианта.

    Начальный тег: требуется , Конечный тег: требуется

    OPTGROUP Определения атрибутов

    этикетка = текст [CS]
    Этот атрибут определяет метку для группы параметров.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • отключено (отключено управление вводом)
    • onclick , ondblclick , onmousedown , onmouseup , на мышь над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

    Примечание.Разработчикам рекомендуется, чтобы будущие версии HTML может расширить механизм группировки, чтобы разрешить вложенные группы (например, Элементы OPTGROUP могут вкладываться). Это позволит авторам представлять более богатая иерархия выборов.

    Начальный тег: требуется , Конечный тег: опционально

    ОПЦИЯ Определения атрибутов

    выбран [CI]
    Если установлено, этот логический атрибут указывает, что эта опция предварительно выбранный.
    значение = cdata [CS]
    Этот атрибут определяет начальное значение контроль. Если этот атрибут не установлен, начальный value устанавливается равным содержимому элемента OPTION .
    этикетка = текст [CS]
    Этот атрибут позволяет авторам указывать более короткую метку для параметра, чем содержимое элемента OPTION . Если указано, пользовательские агенты должны использовать значение этого атрибута, а не содержимое OPTION элемент в качестве метки опции.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • отключено (отключено управление вводом)
    • onclick , ondblclick , onmousedown , onmouseup , на мышь над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

    При отображении выбора меню пользовательские агенты должны использовать значение label атрибута OPTION элемент как выбор. Если этот атрибут не указан, пользовательские агенты должны используйте содержимое элемента OPTION .

    Метка атрибут Элемент OPTGROUP определяет метку для группы вариантов.

    В этом примере мы создаем меню, которое позволяет пользователю выбрать, какой из семь программных компонентов для установки. Первый и второй компоненты: выбрано заранее, но пользователь может отменить выбор. Остальные компоненты не выбрано заранее. В размер атрибут указывает, что меню должно иметь только 4 строки, даже если пользователь может выбрать один из 7 вариантов.Остальные параметры должны быть доступны через механизм прокрутки.

    SELECT сопровождается кнопками отправки и сброса.

    Только выбранные варианты будут успешными (используя имя элемента управления "выбор компонента"). Когда параметры не выбраны, элемент управления не работает, и ни имя, ни любые значения отправляются на сервер при отправке формы. Обратите внимание, что где установлен атрибут значение , он определяет начальное значение, иначе это элемент содержание.

    В этом примере мы используем элемент OPTGROUP для группировки вариантов. В следующая разметка:

    представляет следующую группировку:

      Никто
      PortMaster 3
          3.7.1
          3,7
          3.5
      PortMaster 2
          3,7
          3.5
      IRX
          3,7R
          3.5R
     

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

    Графический пользовательский агент может отображать это как:

    На этом изображении показан элемент SELECT , отображаемый в виде каскадных меню. Вершина Метка меню отображает текущее выбранное значение (PortMaster 3, 3.7.1). Пользователь развернул два каскадных меню, но еще не выбрал новое. значение (PortMaster 2, 3. 7). Обратите внимание, что в каждом каскадном меню отображается метка OPTGROUP или Элемент OPTION .

    Начальный тег: требуется , Конечный тег: требуется

    Определения атрибутов

    имя = cdata [CI]
    Этот атрибут назначает имя элемента управления.
    строк = номер [CN]
    Этот атрибут определяет количество видимых текстовых строк. Пользователи должны быть может вводить больше строк, поэтому пользовательские агенты должны предоставлять средства для прокрутите содержимое элемента управления, когда содержимое выходит за пределы видимая область.
    столбцов = число [CN]
    Этот атрибут определяет видимую ширину в средней ширине символа. Пользователи должны иметь возможность вводить более длинные строки, чем это, поэтому пользовательские агенты должны предоставить средства для прокрутки содержимого элемента управления, когда содержимое выходит за пределы видимой области. Пользовательские агенты могут переносить видимый текст строки, чтобы длинные строки оставались видимыми без необходимости прокрутки.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • только для чтения (элементы управления вводом только для чтения)
    • отключено (отключено управление вводом)
    • tabindex (навигация с вкладками)
    • onfocus , onblur , onselect , onchange , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

    Элемент TEXTAREA создает управление вводом многострочного текста. Пользовательские агенты следует использовать содержимое этого элемента в качестве начального значение элемента управления и должен изначально отображать этот текст.

    В этом примере создается TEXTAREA элемент управления, который составляет 20 строк на 80 столбцов и изначально содержит две строки текста. Модель TEXTAREA сопровождается кнопками отправки и сброса.

    <ТЕКСТАРА name = "thetext" rows = "20" cols = "80"> Первая строка исходного текста.Вторая строка исходного текста.

    Установка атрибута только для чтения позволяет авторам отображать неизменяемые текст в ТЕКСТАРЕ . Это отличается от использования стандартного размеченного текста в документ, потому что значение TEXTAREA представлено с форма.

    ISINDEX - это устарело. Этот элемент создает элемент управления вводом текста в одну строку.Авторы должны использовать INPUT элемент для создания элементов управления вводом текста.

    См. Переходный DTD для формальное определение.

    Атрибуты, определенные в другом месте

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

    УСТАРЕВШИЙ ПРИМЕР:
    Следующая декларация ISINDEX :

    
     

    можно переписать с INPUT следующим образом:

    Введите поисковую фразу:

    Семантика ISINDEX. В настоящее время семантика для ISINDEX хорошо определены только тогда, когда базовый URI для прилагаемого документа - это HTTP URI. На практике входная строка ограничен Latin-1, поскольку нет механизма для URI, чтобы указать другой набор символов.

    Некоторым элементам управления формы автоматически присваиваются метки (нажмите кнопки), а большинство - нет (текстовые поля, флажки и переключатели, а также меню).

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

    Элемент LABEL используется для указания меток для элементов управления, которые не иметь неявные метки,

    17.9.1 Модель LABEL элемент

    Начальный тег: требуется , Конечный тег: требуется

    Определения атрибутов

    для = idref [CS]
    Этот атрибут явно связывает определяемую метку с другим контроль.Если присутствует, значение этого атрибута должно быть таким же, как значение атрибута id некоторого другого элемента управления в том же документ. Если отсутствует, определяемая метка связана с элементом содержание.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • accesskey (доступ ключи)
    • onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , на мышь над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

    Элемент LABEL может использоваться для прикрепления информации к элементам управления.Каждые Элемент LABEL связан ровно с одним элементом управления формой.

    Атрибут для связывает метку с другим элементом управления. явно: значение для атрибута должно быть таким же, как значение id атрибута связанного элемента управления. Более одного LABEL может быть связан с одним и тем же элементом управления путем создания нескольких ссылки через атрибут для .

    В этом примере создается таблица, которая используется для выравнивания двух элементов управления вводом текста и связанных с ними меток.Каждая этикетка явно связан с одним вводом текста:

    <ТАБЛИЦА>

    Этот пример расширяет форму предыдущего примера, чтобы включить LABEL элементы.

     




    Мужской
    Женский

    Чтобы связать метку с другим элементом управления неявно элемент управления должен находиться в пределах содержимого LABEL элемент.В этом случае LABEL может содержать только один элемент управления. Наклейка сам может быть расположен до или после связанного элемента управления.

    В этом примере мы неявно связываем две метки с двумя элементами управления вводом текста:

    <ЭТИКЕТКА> Имя <ЭТИКЕТКА> Фамилия

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

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

    Метки могут отображаться пользовательскими агентами несколькими способами (например, визуально, читает синтезаторы речи и т. д.)

    Начальный тег: требуется , Конечный тег: требуется

    ОБОЗНАЧЕНИЯ Определения атрибутов

    выровнять = сверху | снизу | слева | справа [CI]
    Не рекомендуется. Это Атрибут определяет положение легенды относительно набора полей. Возможные значения:
    • вверху: Легенда находится вверху набора полей. Это значение по умолчанию.
    • внизу: Легенда находится внизу набора полей.
    • слева: Легенда находится в левой части набора полей.
    • справа: Легенда находится справа от набора полей.

    Атрибуты, определенные в другом месте

    • id , класс (идентификаторы на уровне документа)
    • lang (информация о языке), dir (текст направление)
    • заголовок (элемент название)
    • стиль (рядный информация о стиле)
    • accesskey (доступ ключи)
    • onclick , ondblclick , onmousedown , onmouseup , на мышь над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

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

    Элемент LEGEND позволяет авторам назначать заголовок для элемента НАБОР . Легенда улучшает доступность, когда FIELDSET визуализируется невизуально.

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

    Личная информация Фамилия: Имя: Адрес: ...подробнее личная информация ...
    История болезни Оспа Свинка Головокружение Чихание . ..подробнее история болезни ...
    Текущее лекарство Вы в настоящее время принимаете какие-либо лекарства? Да Нет Если вы в настоящее время принимаете лекарства, укажите это в пространстве ниже: <ТЕКСТАРА name = "current_medication" rows = "20" cols = "50" tabindex = "40">

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

    В документе HTML элемент должен получить фокус от пользователя чтобы стать активным и выполнять свои задачи. Например, пользователи должны активировать ссылку, указанную элементом A , чтобы перейти по указанная ссылка. Точно так же пользователи должны установить фокус TEXTAREA , чтобы войти текст в него.

    Есть несколько способов установить фокус на элементе:

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

    17.11.1 Навигация по вкладкам

    Определения атрибутов

    tabindex = число [CN]
    Этот атрибут определяет позицию текущего элемента в табуляции. заказ для текущего документа.Это значение должно быть числом от 0 до 32767. Пользовательские агенты должны игнорировать ведущие нули.

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

    Элементы, которые могут получить фокус, должны перемещаться пользовательскими агентами в соответствии с согласно следующим правилам:

    1. Те элементы, которые поддерживают атрибут tabindex и назначают положительное значение к нему переходит первым.Навигация происходит от элемента с наименьшим значением tabindex элементу с наибольшим значением. Ценности не обязательно должны быть последовательными и не должны начинаться с какого-либо конкретного значения. Элементы с одинаковыми значениями tabindex следует перемещаться в том порядке, в котором они появляются в потоке символов.
    2. Те элементы, которые не поддерживают атрибут tabindex или поддерживают его и присвоить ему значение «0», переходят дальше. Эти элементы перемещаются в том порядке, в котором они появляются в потоке символов.
    3. Отключенные элементы не участвуют в порядок табуляции.

    Следующие элементы поддерживают атрибут tabindex : A , ОБЛАСТЬ , КНОПКА , ВВОД , ОБЪЕКТ , ВЫБОР , и ТЕКСТАРА .

    В этом примере порядок перехода будет следующим: КНОПКА , , INPUT элементов по порядку (обратите внимание, что «field1» и кнопка совместно используют тот же tabindex, но "field1" появляется позже в потоке символов) и, наконец, ссылка, созданная Элемент .

     01 // EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <ГОЛОВА>
     Документ с FORM 
    
    <ТЕЛО>
      ... немного текста ... 
    

    Перейти к Веб-сайт W3C. ... еще ... ... еще немного...

    Клавиши перехода. Фактическая последовательность клавиш, которая вызывает переход по вкладкам или активация элемента зависит от конфигурации агент пользователя (например, клавиша «tab» используется для навигации, а клавиша «ввод» - используется для активации выбранного элемента).

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

    17.11.2 Ключи доступа

    Определения атрибутов

    ключ доступа = символов [CN]
    Этот атрибут назначает ключ доступа к элементу. Доступ key - это отдельный символ из набора символов документа. Заметка. Авторы должны учитывать метод ввода ожидаемого читателя при указании ключа доступа.

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

    Следующие элементы поддерживают атрибут accesskey : A , ОБЛАСТЬ , КНОПКА , ВВОД , LABEL и LEGEND и ТЕКСТАРА .

    В этом примере ключ доступа «U» назначается метке, связанной с INPUT контроль. При вводе клавиши доступа фокус переходит к метке, которая в свою очередь передает его соответствующему элементу управления.Затем пользователь может ввести текст в ВХОД площадь.

    В этом примере мы назначаем ключ доступа к ссылке, определенной в A элемент. При вводе этого ключа доступа пользователь переходит к другому документу, в этом случай, оглавление.

    Содержание

    Вызов ключей доступа зависит от базовой системы. Для например, на машинах под управлением MS Windows обычно нужно нажимать "alt" ключ в дополнение к ключу доступа. В системах Apple обычно нужно нажимать ключ «cmd» в дополнение к ключу доступа.

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

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

    17.12.1 Отключено элементы управления

    Определения атрибутов

    отключено [CI]
    При установке для элемента управления формы этот логический атрибут отключает элемент управления. для пользовательского ввода.

    Если установлено, атрибут отключен имеет следующие эффекты на элемент:

    Следующие элементы поддерживают атрибут disabled : BUTTON , ВХОД , OPTGROUP , ОПЦИЯ , ВЫБОР , и ТЕКСТАРА .

    Этот атрибут наследуется, но локальные объявления отменяют унаследованные ценность.

    Как отображаются отключенные элементы, зависит от пользовательского агента. Например, некоторые пользовательские агенты затемняют отключенные пункты меню, ярлыки кнопок и т. д.

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

    
     

    Примечание. Единственный способ динамически изменять значение отключенный атрибут через сценарий.

    17.12.2 Только чтение элементы управления

    Определения атрибутов

    только чтение [CI]
    При установке для элемента управления формы этот логический атрибут запрещает изменение контроль.

    атрибут readonly указывает, может ли элемент управления быть изменен Пользователь.

    Если установлено, атрибут только для чтения имеет следующие эффекты на элемент:

    Следующие элементы поддерживают атрибут только для чтения : INPUT и ТЕКСТАРА .

    Как отображаются элементы только для чтения, зависит от пользовательского агента.

    Примечание. Единственный способ динамически изменять значение атрибут только для чтения через сценарий.

    В следующих разделах объясняется, как пользовательские агенты отправляют данные формы в форму. агенты обработки.

    17.13.1 Подача формы метод

    Атрибут метода элемента FORM определяет метод HTTP используется для отправки формы агенту обработки.Этот атрибут может занимать два значения:

    • get: С помощью метода HTTP "get" набор данных формы добавляется к URI, указанному действием атрибут (с вопросительным знаком ("?") в качестве разделителя), и этот новый URI отправляется на обрабатывающий агент.
    • post: При использовании HTTP-метода "post" набор данных формы включается в тело формы и отправляется обрабатывающему агенту.

    Метод "get" следует использовать, когда форма идемпотентна (т.е.е., не вызывает побочные эффекты). Многие поиски в базе данных не имеют видимых побочных эффектов и делают идеальные приложения для метода "получить".

    Если служба, связанная с обработкой формы, вызывает побочные эффекты (например, если форма изменяет базу данных или подписку на услугу), следует использовать метод «пост».

    Примечание. Метод «get» ограничивает значения набора данных формы символами ASCII. Только "post" метод (с enctype = "multipart / form-data") указан для покрытия весь набор символов [ISO10646].

    17.13.2 Успешный контроль

    Успешный контроль "действителен" для отправки. Каждый успешный control имеет имя элемента управления в паре с его текущим значением как часть представленного набора данных формы. Успешный контроль должен быть определен в Элемент FORM и должен иметь элемент управления имя.

    Однако:

    • Элементы управления, которые отключен не может быть успешным.
    • Если форма содержит более одной кнопки отправки, только активированная кнопка отправки успешна.
    • Все флажки "включены" могут быть установлены успешно.
    • Для радиокнопок, которые имеют то же значение, что и name , только переключатель «on» может быть успешным.
    • Для меню имя элемента управления предоставляется элементом SELECT , а значения - параметром OPTION элементы. Только выбранные варианты могут быть успешными. Когда нет вариантов выбрано, элемент управления не работает и ни имя, ни какие-либо значения не отправляется на сервер при отправке формы.
    • Текущее значение выбора файла - это список из одного или нескольких файлов имена. После отправки формы содержимое каждого файла отправлено вместе с остальными данными формы. Содержимое файла упаковано в соответствии с типом содержимого формы.
    • Текущее значение элемента управления объектом определяется реализация.

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

    Кроме того, пользовательские агенты не должны учитывать следующие элементы управления успешно:

    Скрытые элементы управления и элементы управления, которые не отображаются из-за настройки таблицы стилей все еще могут быть успешными. Например:

    по-прежнему приведет к тому, что значение будет связано с именем "invisible-password" и отправлено с формой.

    17.13.3 Форма обработки данные

    Когда пользователь отправляет форму (например, активируя кнопку отправки), пользовательский агент обрабатывает ее как следует.

    Шаг первый: Определите успешный элементы управления
    Шаг 2. Создайте набор данных формы

    А Набор данных формы представляет собой последовательность построены пары имя-элемент / текущее значение от успешного управления

    Шаг третий: закодируйте данные формы набор

    Затем набор данных формы кодируется в соответствии с типом содержимого, указанным в enctype атрибут элемента FORM .

    Шаг четвертый: отправьте набор данных закодированной формы

    Наконец, закодированные данные отправляются агенту обработки, назначенному Атрибут действия с использованием протокола, указанного методом атрибут.

    Эта спецификация не определяет все допустимые методы отправки или типы контента, которые могут использоваться с формами. Однако, Пользовательские агенты HTML 4 должны поддерживать установленные соглашения в следующих кейсы:

    • Если метод - это «получить», а действие - это HTTP URI, пользовательский агент принимает значение , действие , добавляет `? ' , затем добавляет набор данных формы, закодированный с помощью контент "application / x-www-form-urlencoded" тип.Затем пользовательский агент переходит по ссылке на этот URI. В этом сценарии данные формы ограничены кодами ASCII.
    • Если метод - это "сообщение", а действие - это HTTP URI, пользовательский агент выполняет «почтовую» транзакцию HTTP, используя значение действия атрибут и сообщение, созданное в соответствии с тип содержимого, указанный атрибутом enctype .

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

    Пользовательские агенты должны отображать ответ от HTTP "get" и "post". транзакции.

    17.13.4 Типы содержимого формы

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

    См. Также раздел по экранированию амперсандов в URI значения атрибутов.

    приложение / x-www-form-urlencoded

    Это тип содержимого по умолчанию. Формы, отправленные с этим типом контента должен быть закодирован следующим образом:

    1. Имена и значения элементов управления экранированы. Пробелы заменяются на `+ ', а затем зарезервированные символы экранируются, как описано в [RFC1738], раздел 2.2: Не буквенно-цифровые символы заменяются на % HH , знак процента и две шестнадцатеричные цифры, представляющие ASCII код персонажа. Разрывы строк представлены парами "CR LF" (т. Е. `% 0D% 0A ').
    2. Имена / значения элементов управления перечислены в том порядке, в котором они появляются в документ. Имя отделяется от значения `= ' и Пары имя / значение отделяются друг от друга `& '.
    multipart / form-data

    Примечание. Дополнительные сведения см. В [RFC2388]. информацию о загрузке файлов, включая проблемы обратной совместимости, взаимосвязь между multipart / form-data и другими типами контента, производительность вопросы и т. д.

    Информацию о проблемах безопасности форм см. В приложении.

    Тип содержимого "application / x-www-form-urlencoded" неэффективен для отправка больших объемов двоичных данных или текста, содержащих не-ASCII символы. Тип содержимого "multipart / form-data" следует использовать для отправка форм, содержащих файлы, данные не в формате ASCII и двоичные данные.

    Контент multipart / form-data следует правилам всех multipart MIME. потоки данных, как описано в [RFC2045].Определение "multipart / form-data" доступно в реестре [IANA].

    Сообщение multipart / form-data содержит серию частей, каждая представляет собой успешный контроль. Части отправляются агенту обработки в том же порядке, что и соответствующие элементы управления появятся в потоке документов. Границы деталей не должны встречаться ни в одном из данные; как это делается, выходит за рамки данной спецификации.

    Как и все составные MIME-типы, каждая часть имеет необязательный Content-Type. заголовок, который по умолчанию имеет значение «text / plain».Пользовательские агенты должны предоставлять Заголовок Content-Type, сопровождаемый параметром charset.

    Ожидается, что каждая часть будет содержать:

    1. заголовок «Content-Disposition», значение которого - «form-data».
    2. атрибут имени, определяющий имя элемента управления соответствующий элемент управления. Имена элементов управления, изначально закодированные в наборах символов, отличных от ASCII, могут быть закодированы с помощью метода изложено в [RFC2045].

    Таким образом, например, для элемента управления с именем «mycontrol» соответствующая часть будет указано:

    Content-Disposition: форма-данные; name = "mycontrol"
     

    Как и все передачи MIME, «CR LF» (т.е., `% 0D% 0A ') является используется для разделения строк данных.

    Каждая часть может быть закодирована и предоставлен заголовок Content-Transfer-Encoding. если значение этой части не соответствует кодировке по умолчанию (7BIT) (см. [RFC2045], раздел 6)

    Если содержимое файла отправляется с формой, ввод файла должен идентифицироваться соответствующими тип содержимого (например, «приложение / октет-поток»). Если несколько файлов должны быть возвращены как результат одной записи формы, они должны быть возвращены как "multipart / mixed" встроено в "multipart / form-data".

    Пользовательский агент должен попытаться предоставить имя файла для каждого отправленного файла. Имя файла может быть указано с параметром "filename" Заголовок Content-Disposition: form-data или, в случае нескольких файлов, в заголовок "Content-Disposition: file" подчасти. Если имя файла операционная система клиента не в US-ASCII, имя файла может быть аппроксимировано или закодировано с использованием метода [RFC2045]. Это удобно для тех случаев, когда, например, загруженные файлы могут содержать ссылки друг на друга (например,g., файл TeX и его вспомогательный стиль ".sty" описание).

    Следующий пример иллюстрирует кодирование "multipart / form-data". Предположим, мы иметь следующий вид:

     

    Как тебя зовут?
    Какие файлы вы отправляете?

    Если пользователь вводит «Ларри» в текстовом поле ввода и выбирает текстовый файл "файл1. txt ", пользовательский агент может отправить обратно следующие данные:

       Content-Type: multipart / form-data; Граница = AaB03x
    
       --AaB03x
       Content-Disposition: форма-данные; name = "имя-отправки"
    
       Ларри
       --AaB03x
       Content-Disposition: форма-данные; name = "файлы"; filename = "file1.txt"
       Тип содержимого: текст / простой
    
       ... содержимое file1.txt ...
       --AaB03x--
     

    Если пользователь выбрал второй файл (изображение) "file2.gif", пользовательский агент может Соберите детали следующим образом:

       Content-Type: multipart / form-data; Граница = AaB03x
    
       --AaB03x
       Content-Disposition: форма-данные; name = "имя-отправки"
    
       Ларри
       --AaB03x
       Content-Disposition: форма-данные; name = "files"
       Content-Type: составной / смешанный; Граница = BbC04y
    
       --BbC04y
       Content-Disposition: файл; имя_файла = "файл1.текст"
       Тип содержимого: текст / простой
    
       ... содержимое file1.txt ...
       --BbC04y
       Content-Disposition: файл; filename = "file2. gif"
       Тип содержимого: изображение / gif
       Content-Transfer-Encoding: двоичный
    
       ... содержимое file2.gif ...
       --BbC04y--
       --AaB03x--
     

    Учебник по веб-формам HTML для начинающих »

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы получаем реферальную плату за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

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

    • HTML для создания полей и меток формы и приема пользовательского ввода.
    • CSS для стилизации представления формы.
    • JavaScript для проверки ввода формы и обеспечения взаимодействия с поддержкой Ajax.
    • Серверные языки, такие как PHP, для обработки данных форм.

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

    Определение структуры формы

    Каждая веб-форма должна быть заключена в теги

    .В большинстве случаев все поля формы будут вложены между этими тегами. Есть несколько атрибутов, которые могут быть необязательными для использования с элементом form , включая: accept-charset : Этот необязательный атрибут используется для идентификации кодировок символов, приемлемых для ввода на сервер и формы обработки кода. Если указано более одной кодировки, между каждой кодировкой следует поставить один пробел. Если оставить поле пустым или не задано, по умолчанию используется та же кодировка, что и в документе, содержащем форму. действие : Этот атрибут используется для указания URL-адреса, по которому должны быть отправлены данные формы (например: http://example.com/form_file.php). Это поле было обязательным до HTML5, но теперь оно необязательно. автозаполнение : используйте этот атрибут, если вы хотите, чтобы браузер посетителей предлагал ответы формы на основе сохраненных записей. Значение по умолчанию - autocomplete = "on" . Если вы отключите автозаполнение, вы также должны отключить его для каждого поля, которое может разрешить автозаполнение. enctype : Используется для указания способа кодирования данных формы. Используется только в том случае, если для атрибута method , упомянутого ниже, установлено значение post . Есть три возможных значения:

    • application / x-www-form-urlencoded : значение по умолчанию, которое заменяет все пробелы на «+» и преобразует все специальные символы в значения ASCII HEX.
    • multipart / form-data : ничего не закодировано. Входные данные загружаются на сервер точно так же, как они введены в форму.
    • text / plain : Пробелы преобразуются в символы «+», но не кодируются другие символы.

    method : Определяет метод HTTP, который браузер посетителей веб-сайта должен использовать для отправки данных формы. Если указано post , данные формы включаются в тело HTTP-запроса. Если указано get , данные формы добавляются в конец URL-адреса, указанного в атрибуте action со знаком «?» символа, длина данных ограничена 300 символами, ввод формы виден и может быть отмечен закладками. name : Подобно атрибуту id , имя является уникальным идентификатором, который может использоваться только один раз в документе HTML и может использоваться для выбора формы с помощью JavaScript или другого языка сценариев. novalidate : используется для отмены проверки данных формы по умолчанию. target : указывает, где отображать ответ, полученный после отправки формы.

    • _self загружает ответ в том же кадре.
    • _blank открывает новое окно или вкладку.
    • _parent используется, когда форма вложена в дочерний контекст просмотра для загрузки ответа в родительский контекст и ведет себя так же, как _self , если родительский контекст отсутствует.
    • _top аналогично _parent , но выбирает контекст просмотра верхнего уровня, а не непосредственный родительский контекст.

    Группировка полей формы

    Элемент

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

      

    Содержание абзаца.

    Контактная форма

    Имя: < input type = "text" size = "30">

    Электронная почта:

    Тема:

    Сообщение:

    < / form>

    Дополнительное содержимое абзаца

    При отображении в браузере контактная форма будет четко отделена от окружающего содержимого.

    Содержание абзаца. Контактная форма

    Имя:
    Электронная почта:
    Тема:
    Сообщение:
    Введите здесь свое сообщение

    Дополнительное содержание абзаца

    Элемент fieldset является необязательным, но обычно используется для группировки связанных элементов в длинных и сложных формах или чтобы изолировать поля формы от близлежащих элементов, когда форма представлена ​​вместе с неформальным содержимым. HTML5 добавил три атрибута, которые можно применить к элементам набора полей :

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

    Элемент ввода

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

    Общий Значения

    Элемент input - очень гибкий элемент, внешний вид и поведение которого могут резко меняться в зависимости от применяемого к элементу атрибута типа . Наиболее распространенные значения типа включают: текст : значение по умолчанию для атрибута type = "" .Определяет одну строку текста шириной 20 символов. Ширину можно настроить с помощью атрибута size, как вы можете видеть в коде формы в нашем предыдущем примере. пароль : Тип пароля в основном такой же, как и в текстовом поле, за исключением того, что символы, вводимые в поле пароля, маскируются. радио : радио-кнопки могут использоваться для предоставления нескольких вариантов, из которых можно выбрать только один. флажок : флажки аналогичны переключателям, но одновременно может быть активным несколько вариантов.Это означает, что можно отправить несколько значений с набором флажков, а набор переключателей будет принимать только одно значение. submit : значение типа отправки создает кнопку отправки формы. При нажатии форма выполнит действие, указанное в атрибуте action , связанном с элементом form . Многие формы используют только один или два типа input , и большинство простых форм строятся с использованием только перечисленных выше типов. Однако есть много дополнительных типов, которые вы можете использовать для приема данных формы, которые не подходят ни к одному из перечисленных выше типов.

    Менее распространенный Значения

    Эти входные типы менее распространены, чем перечисленные выше, но поддерживаются практически всеми браузерами и могут использоваться для создания множества различных типов входных данных формы. кнопка : если вы хотите запустить сценарий при нажатии кнопки, тип ввода button можно использовать для создания кнопки, которая может быть связана с различными действиями. скрыто : этот тип атрибута обычно используется одновременно с атрибутом value , который мы сейчас рассмотрим, чтобы добавлять предопределенное значение при каждой отправке формы.Например, если у вас есть контактные формы на пяти разных страницах, вы можете добавить в каждую форму, чтобы указать имя страницы, с которой была отправлена ​​контактная форма. reset : этот тип используется для создания кнопки reset , которая вернет все поля формы в их состояние по умолчанию. файл : Если вы хотите разрешить пользователям формы загружать и отправлять файлы, предоставит такую ​​возможность. image : Раньше в качестве кнопки отправки было принято использовать изображение. Хотя значение этого типа все еще действует, оно не очень часто используется в современном дизайне веб-форм. Вместо этого используйте CSS для стилизации кнопки.

    Новый Значения, добавленные HTML5

    Несколько дополнительных input типов определены в спецификации HTML5. Многие из этих типов имеют ограниченную поддержку браузером. Так что если вы их используете, обязательно проверьте caniuse.com для поддержки браузера и при необходимости предоставьте соответствующие резервные варианты. search : Это правильный тип , чтобы указать, предоставляет ли ваша форма функции поиска. В отличие от большинства других типов ввода, добавленных в HTML5, type = "search" поддерживается всеми браузерами. Просто помните, что эта функция на самом деле не обеспечивает функции поиска, она просто создает поле ввода формы, предназначенное для использования как часть функции поиска. цвет : Если указан этот тип ввода, будет отображаться цветная кнопка, запускающая основной инструмент выбора цвета.Задайте значение цвета по умолчанию с помощью атрибута value и шестнадцатеричного кода цвета, например: . число : этот тип создает поле для ввода числа, которое имеет кнопки увеличения в правой части поля. Ограничения могут быть установлены на диапазон допустимых записей с атрибутами max , min и step , но браузеры, которые не поддерживают этот элемент, обычно возвращаются к стандартному вводу текста, который не распознает эти ограничения. диапазон : Браузер поддерживает этот элемент довольно хорошо, за некоторыми исключениями. Используйте этот атрибут для создания ползунка, который можно использовать для выбора значения в указанном диапазоне. Например, этот код создаст ползунок для выбора числа от 100 до 1000 с шагом 50: . Вам нужно будет объединить элемент range с другим методом, чтобы обеспечить предварительный просмотр выбранного значения в реальном времени.К счастью, в HTML5 Doctor есть простой способ сделать это, используя элемент output . Типы даты и времени : HTML5 добавил ряд типов ввода, которые можно использовать для указания значений времени и даты. Например, тип date определяет элемент управления для ввода года, месяца и дня. Чтобы добавить время к вводу даты, используйте datetime-local . Если вам нужно время без информации о дате, используйте тип ввода time . Менее конкретные типы ввода включают параметры месяц и неделя , которые можно использовать для выбора недели или месяца в году без указания дня или времени.Браузеры не спешили добавлять поддержку этого типа, поэтому обязательно проверьте поддержку браузера и предоставьте резервные варианты, если вы используете этот тип ввода. Типы контактной информации : Широкая поддержка доступна для трех типов ввода, используемых для сбора соответствующей информации, такой как адреса электронной почты (, электронная почта, ), номера телефонов (, тел. ) и URL-адреса веб-сайтов (, URL-адрес, ).

    Общие входные атрибуты

    Хотя атрибут типа является наиболее часто используемым и наиболее полезным атрибутом входных , есть несколько других атрибутов, которые вам необходимо знать для создания полезных форм. name : Имя , назначенное элементу input , будет отправлено вместе со значением, введенным в соответствующее поле. Другими словами, если бы значение «Fred» было введено в элемент input с этим кодом , то отправленное значение было бы «first_name = Fred». значение : значение элемента ввода выполняет различную функцию в зависимости от типа ввода, к которому оно применяется.При применении к кнопке submit , reset или типа значение используется как текст на кнопке. При применении к текстовым полям он предоставляет значение по умолчанию, связанное с полем. Когда оно связано с флажком или переключателем, значение предоставляет значение, которое будет связано с этим полем, если оно выбрано.

          

    Кто направил вас на наш веб-сайт ?:

    Pink:

    Красный:

    readonly : когда readonly применяется как атрибут элемента input , значение в поле нельзя изменить.JavaScript можно использовать для удаления атрибута только для чтения после выполнения некоторых других действий, таких как нажатие кнопки или установка флажка. Например, только для чтения можно применить к типу ввода отправить и удалить, когда был установлен флажок, подтверждающий, что пользователь принял условия обслуживания веб-сайта. отключен : мы использовали этот атрибут с примером формы, встроенной ранее в это руководство. Используйте этот атрибут, чтобы отключить всю форму, набор полей, одно поле. размер : используйте атрибут размер с текстом input типов, чтобы указать видимую ширину поля без ограничения количества символов, которые могут быть введены в поле. maxlength : Если вы не хотите принимать больше определенного количества символов в данном поле, используйте maxlength , чтобы ограничить эти поля определенным количеством символов. проверено : Если вы хотите, чтобы флажок или переключатель был предварительно выбран при загрузке формы, примените этот атрибут к этому входному элементу .Эти атрибуты имеют широкую поддержку и обычно используются с формами, с которыми вы сталкиваетесь каждый день.

    Новые атрибуты, добавленные в HTML5

    В HTML5 добавлено много новых атрибутов, которые могут быть связаны с входными элементами . Поддержка некоторых из этих элементов браузером ограничена, поэтому обязательно проверьте наличие поддержки и предоставьте резервные варианты для пользователей неподдерживаемых браузеров. автозаполнение : Если ваша форма включает общие поля, оставив автозаполнение включенным, браузер посетителей сможет предлагать записи на основе ранее заполненных форм. autofocus : Используйте этот атрибут, чтобы определить поле формы, которое должно быть в фокусе при загрузке формы. множественный : Атрибут множественный может использоваться с типами ввода email и файл , чтобы позволить пользователям формы вводить более одного значения. При использовании для ввода электронной почты можно отправить более одного адреса электронной почты, отделив каждый адрес от следующего запятой. При использовании для входных данных файл несколько файлов могут быть выбраны и отправлены одновременно. шаблон : могут быть моменты, когда вы хотите указать, что значение ввода должно соответствовать определенным критериям. Например, вы можете потребовать, чтобы поле пароля содержало хотя бы одну прописную букву, одну строчную букву, одну цифру и отвечало требованиям минимальной длины. Атрибут шаблона может использоваться для создания выражений, по которым проверяются значения входных . Написание этих выражений, называемых регулярными выражениями или RegExp, выходит за рамки этого руководства.Вы можете узнать о регулярных выражениях в Википедии, а затем бесплатно написать и протестировать свои выражения в RegExr. заполнитель : большинство форм содержат текст-заполнитель, который исчезает, как только вы щелкаете в поле или начинаете вводить текст. Используйте этот атрибут для добавления и определения текста-заполнителя для любых полей ввода, которые принимают текст. требуется : Если определенные поля в форме являются обязательными, используйте этот атрибут, чтобы предотвратить отправку неполных форм. form : Если вам когда-нибудь понадобится разместить элемент input за пределами элемента form , вы можете связать смещенный элемент, используя атрибут form и применяя значение, которое соответствует примененному атрибуту id к форме. Изменить поведение кнопки отправки формы Существует пять атрибутов, которые могут быть применены к типам ввода submit и image для переопределения атрибутов, примененных к родительскому элементу form . Эти атрибуты включают в себя:

    • formaction : Определите URL-адрес, отличный от URL-адреса, указанного в атрибуте action родительской формы, для обработки отправки формы. Часто используется, когда формы могут обрабатываться более чем одним способом, чтобы предоставить множество вариантов отправки формы.
    • formenctype : укажите тип кодировки, который следует использовать для отправки формы. Используемое значение переопределяет значение, примененное к атрибуту enctype родительского элемента form .
    • formmethod : этот атрибут используется для указания значения метода get или post и переопределит атрибут method , примененный к родительской форме .
    • formnovalidate : если вы не хотите, чтобы введенные в форму данные проверялись при отправке, вы можете использовать этот атрибут.
    • formtarget : переопределить атрибут target , примененный к родительскому элементу form , применив этот атрибут к полю типа ввода submit или image .

    Определите размер type = "image" : если вы используете тип ввода image для создания кнопки отправки формы, вы можете управлять размером изображения, используя высоту и ширину атрибуты.В качестве альтернативы вы можете сделать то же самое с CSS. Большинство разработчиков и дизайнеров рекомендуют избегать использования этих атрибутов и управлять внешним видом кнопок с помощью CSS. Установка пределов и приращений для числовых значений : вы можете использовать атрибуты мин. , макс. и шаг , чтобы определить минимальные и максимальные значения, а также допустимые приращения между этими значениями для любого входа , который принимает числовые значения. ценности.

    Раскрывающиеся списки, текстовые области и кнопки

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

    Предварительно заполненные раскрывающиеся списки

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

       , принимать только одну строку текста. Однако, если вы хотите создать большую текстовую область для более длинного ввода текста, однострочное поле ввода не будет работать.Элемент  textarea  - правильный выбор для создания большой области ввода текста, способной принимать ввод текста, который не будет хорошо отображаться в одной строке. Текстовое поле  состоит из трех частей : 

    1. Текстовое поле создается путем вставки открывающих и закрывающих тегов. Любой текст, вложенный между тегами, будет загружен в текстовую область при загрузке формы и будет отправлен вместе с формой, если посетитель, отправивший форму, не удалит текст из текстового поля .
    2. Если вы хотите определить размер текстовой области, используйте атрибут rows , чтобы определить количество строк текста, которые должны отображаться без изменения размера текстовой области.
    3. Чтобы установить предопределенную ширину, используйте атрибут cols . Применяемое значение будет количеством символов, которые появятся в одной строке перед переносом во вторую строку.

    Размер элементов текстовой области можно изменять. Однако атрибуты rows и cols будут определять размер textarea , когда оно сначала отображается браузером, а также задают минимальное пространство, которое может быть изменено по размеру.

       

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


    Введите текст здесь

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

    Гибкие кнопки

    Есть два способа создания кнопок для форм:

    Мы уже говорили об элементе input и различных типах, которые можно использовать для создания кнопок. Так почему есть еще одна кнопка? Существует как минимум два способа, которыми элементы button отличаются от своих собратьев input .

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

    Элементы формы добавлены в HTML5

    Три новых элемента формы были добавлены в HTML5: datalist : используйте этот элемент, чтобы предоставить список предлагаемых значений автозаполнения для элемента ввода.Чтобы использовать элемент datalist , сначала создайте элемент input с атрибутом list . Затем создайте элемент datalist с атрибутом id . Значение, применяемое к атрибуту входного списка, должно соответствовать идентификатору списка данных. Значения добавляются в список данных путем добавления элементов option между открывающим и закрывающим тегами datalist . Вот пример того, как все это работает:

      

    Какая ваша любимая веб-технология?

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

    Какая ваша любимая веб-технология?

    output : Используйте этот элемент для отображения результата вычисления или ввода данных пользователем. Свяжите его с входным элементом , используя атрибут для со значением, которое соответствует id соответствующего входного элемента , или свяжите его с формой , добавив атрибут формы с использованием значения который соответствует идентификатору id соответствующей формы .Элемент output также может быть соединен с элементом range , чтобы пользователи формы знали точное значение, представленное текущей позицией ползунка элемента range . Использование выходных элементов и диапазона таким образом выходит за рамки этого вводного руководства, но если вы хотите использовать эти два элемента вместе, вы можете узнать больше об этой технике в HTML5 Doctor.

    Следующие шаги

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

    Часто задаваемые вопросы

    Как ограничить поле формы только цифрами?

    Раньше для ограничения поля числами требовалось только использование JavaScript. Однако с выпуском HTML5 теперь просто ограничить поле только числовым вводом.Просто примените значение number к атрибуту type соответствующего элемента input . Например:

        

    При визуализации создает поле ввода текста, которое будет принимать только числа.

    Как ограничить поле формы только буквенно-цифровыми символами?

    Раньше единственным способом ограничить ввод поля буквенно-цифровыми символами было использование jQuery или JavaScript и создание специальной функции.Однако HTML5 добавил атрибут шаблона для входных элементов, которые можно использовать для ограничения поля формы для приема только буквенно-цифрового ввода. Вот код, который поможет:

           

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

    Принцип работы таков: когда вы пытаетесь отправить значения, не соответствующие указанному шаблону, отображается атрибут title . Поэтому вам следует поместить некоторые инструкции в атрибут pattern , чтобы пользователи могли понять, что они сделали не так. Браузер поддерживает этот относительно новый атрибут действительно очень хорошо.IE 9 и более ранние версии IE не поддерживают его, и Opera Mini также не поддерживает. Однако все остальные браузеры поддерживают этот атрибут.

    Как сделать так, чтобы форма была отправлена, когда пользователь нажимает клавишу ввода?

    Если вы столкнулись с формой, которая не отправляется, когда вы нажимаете клавишу ввода, значит, кто-то намеренно разработал форму, чтобы вести себя таким образом - и им на самом деле не следовало этого делать. Спецификации веб-доступности ясны: проектируйте формы, позволяющие неявное подчинение. Что такое неявное подчинение? Отправка формы нажатием Enter.Браузеры предназначены для поддержки неявной отправки. Вот как это работает. Возьмем, к примеру, эту форму:

      

    . Если бы вы сфокусировались на любом элементе в этой форме и нажали Enter, форма быть представленным. Это неявная отправка, и все современные браузеры поддерживают такое поведение.Используйте элемент button в форме, и вам даже не нужно использовать значение submit для атрибута type . Нажмите Enter, пока вы сфокусированы на любом элементе в этой форме, и форма все равно будет отправлена.

      

    Итак, как разработчики могут изменить такое поведение? Один из способов обойти это поведение - и, чтобы быть ясным, мы не рекомендуем этого - это отбросить из элементов .Браузер знает, что отправлять, группируя все между тегами form . Отбросьте эти теги, и браузер не знает, что отправить. Другой способ, которым некоторые разработчики манипулируют поведением браузера, - это использовать CSS для создания кнопок, а не правильных HTML-элементов, как это.

      <стиль> .submitButton {padding: 10px 20px; маржа сверху: 10 пикселей; цвет фона: #ddd; радиус границы: 5 пикселей; дисплей: встроенный блок; } .submitButton: hover {цвет фона: #ccc; }.submitButton: active {background-color: #ddd; }  

    Что, при отображении в браузере, создаст кнопку, которая выглядела бы как кнопка, но не работала что угодно, когда нажата клавиша ввода.

    .submitButton {padding: 10px 20px; маржа сверху: 10 пикселей; цвет фона: #ddd; радиус границы: 5 пикселей; дисплей: встроенный блок;}.submitButton: hover {background-color: #ccc;}. submitButton: active {background-color: #ddd;} Имя:
    Возраст:
    Отправить

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

      document.getElementById ('name'). AddEventListener ('keypress', function (event) {if (event.keyCode == 13) {/ * Run Form Validation JavaScript * /}};  

    Этот код оставляет неявная отправка не повреждена, но по-прежнему запускается код проверки, когда пользователь нажимает клавишу ВВОД.

    Джон - писатель-фрилансер, энтузиаст путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

    HTML-форма регистрации - HTML-форма входа

    Регистрационная форма в HTML 5

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

     
    
     Таблица HTML 
    
    
    
    Регистрационная форма
    Введите свое имя
    Введите свою фамилию
    Введите свой пароль
    Введите пароль еще раз
    Введите свой адрес электронной почты
    Введите свой мобильный
    Введите свой адрес
    Выберите свой пол мужской женский
    Выберите свое хобби hobby1 hobby2 hobby3
    Выберите дату рождения
    Выберите свою страну
    Загрузите свою фотографию
    Выход:

    Попробуйте сами

    Запускаем нашу программу с тега html.сначала создайте таблицу с border = 1, align = center. объявить двенадцать различных полей. внутри первого поля мы определяем со свойством maxlength = "10" и заполнителем, пароль определяется внутри тега с type = password, он принимает каждый ввод в форме пароля (****) . Теперь создайте поле электронной почты внутри тега type = "email", оно принимает строковую форму ввода. создать номер мобильного телефона с помощью type = "number". создать поле адреса: определить внутри текстового поля, в котором cols = 20 и row = 8.он генерирует адресную область (несколько строк). Теперь сгенерируйте поле выбора пола. переключатель input type = "radio" используется для выбора пола. из радиобокса со значением = мужской или женский. Еще одно поле для создания выберите хобби. Кнопка флажка используется, потому что позволяет множественный выбор значений. Создать другое поле (Дата рождения) D-O-B. здесь type = "date" определяет внутри он автоматически генерирует вызывающий объект. Создайте поле раскрывающегося списка: начинайте с тега с type = "file". это позволяет загружать файл. Теперь создайте две кнопки: первая - type = "submit", а вторая - type = "reset" внутри type. Теперь закройте все теги один за другим. output создаст полную регистрационную форму.

    Веб-приложение

    - HTML-форма

    HTML-формы

    Для сбора информации от пользователей - мы делаем это с помощью элемента HTML form .

    Информация о пользователе собирается в форме HTML через веб-браузер, а затем отправляется на веб-сервер для обработки - здесь показано, как контроллеры могут использоваться для обработки данных формы.

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

    Пользователи «заполняют» форму, изменяя ее элементы управления (вводя текст или делая выбор).

    Когда заполненная форма отправляется, ее данные сначала обрабатываются пользовательским агентом, работающим как часть браузера, прежде чем они будут фактически отправлены агенту обработки (например, веб-серверу или почтовому серверу) на стороне сервера.

    Базовая структура элемента формы выглядит следующим образом:

     
    • Атрибут действия используется для указания URL-адреса агента обработки на стороне сервера, который будет получать данные, собранные в форме.
    • Атрибут method используется для указания метода HTTP-запроса, который пользовательский агент будет использовать для отправки данных. Пользовательские агенты HTML должны поддерживать:
    1. GET - в этом случае данные формы должны быть отправлены как часть URL-адреса, т. Е. Данные закодированы в URL-адресе и добавлены к URL-адресу запроса.
    2. POST - в этом случае данные формы должны быть включены в тело запроса HTTP-сообщения.

    Подача формы - запрос GET

    Кодировка URL-адреса

    работает следующим образом: данные формы отделяются от URI знаком «?», Каждая пара имя / значение разделяется знаком «&», а каждое имя отделяется от своего значения знаком «=» («небезопасно» персонажи, e.g., «/» и «&» экранируются).
    Пример:

     
    <метка> Имя:
    <метка> Фамилия:

    Приведенный выше код дает в браузере следующее:

    Вот что происходит при отправке формы:

    Метод GET следует использовать, когда форма идемпотентна (т.е.е., не вызывает побочных эффектов). Например, если данные формы используются для поиска в базе данных, побочных эффектов нет.

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

    Метод GET не следует использовать, если имеется большой объем данных формы или если данные формы содержат символы, отличные от ASCII, или двоичные данные.

    Метод GET нельзя использовать, если форма содержит элемент управления загрузкой файлов - файлы нельзя передавать в URL-адресе.

    Отправка формы - запрос POST

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

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

    Пример:
     
    <метка> Имя:
    <метка> Фамилия:

    Форма теперь содержит метод пост-запроса:

    И параметры теперь включены в тело сообщения:

    Процесс подачи формы

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

    Набор данных формы кодируется пользовательским агентом в соответствии с типом содержимого, указанным в атрибуте enctype элемента формы.

    • - application / x-www-form-urlencoded - это значение по умолчанию, данные формы кодируются как пары имя-значение.
    • - multipart / form-data - данные формы кодируются как сообщение, с отдельной частью для каждого элемента управления.
    • - текст / простой - данные формы кодируются как простой текст.

    Агент пользователя передает набор закодированных данных агенту обработки, работающему на стороне сервера, с использованием метода протокола HTTP, указанного в атрибуте action в форме.

    Элементы управления формой

    Пользователи взаимодействуют с формами через именованные элементы управления формами.

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

    и
    .

    Имя элемента управления указывается с помощью атрибута name .

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

    Доступные элементы управления формы включают: текст , дата , кнопки , флажки , переключатели , поля выбора (раскрывающиеся списки) , поля выбора файлов , скрытые элементы управления и т. Д. .(полный список см. на сайте www.w3schools.com).

    Элементы управления формы - Кнопки

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

    • submit - вызывает отправку формы.
    • reset - Вызывает сброс формы, т.е. всем элементам управления
    • присваиваются их начальные значения.
    • button - Создает кнопку, с которой обычно связан клиентский скрипт через атрибут события. Когда кнопка нажата и отпущена, выполняется связанный сценарий.

    Для элемента input атрибут type может быть указан как image . Это создает графическую кнопку отправки. Атрибут src указывает URL-адрес файла изображения, который будет украшать кнопку.

    Элементы управления

    Button имеют множество атрибутов, поддерживающих программирование, управляемое событиями.

    Этот стиль программирования поддерживает интерактивность в браузерах, т. Е. Вы нажимаете кнопку (событие), событие обрабатывается (обычно путем запуска скрипта) и что-то происходит в окне браузера.

    Некоторые из атрибутов событий, которые можно указать для кнопки, включают: onblur , onfocus , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onkeypress , onkeydown , onkeyup , onreset .

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

    Элементы управления формой - флажки, радиокнопки

    Флажки и переключатели указываются с помощью элемента ввода.

    • По сути, это переключатели «вкл / выкл», которые может переключать пользователь.
    • Некоторые из этих элементов управления могут иметь одно и то же имя.
    • Переключатель находится в положении «включено», когда установлен атрибут checked элемента управления.
    • Когда форма отправляется, только элементы управления флажком и переключателем считаются успешными.
    • Если несколько элементов управления переключателями имеют одно и то же имя, они рассматриваются как взаимоисключающие. То есть, когда один включен, все остальные с таким же именем выключаются.
    • Несколько флажков с одинаковым именем могут быть одновременно включены в форму.

    Элементы управления формой - ввод текста и выбор файла

    Существует два типа текстовых элементов управления, оба из которых используют элемент input и указываются с помощью атрибута type:

    • текст - создает элемент управления вводом текста в одну строку.
    • textarea - создает элемент управления вводом многострочного текста.

    Элемент управления выбором файла также использует элемент input , а атрибут типа имеет значение file . Этот элемент управления позволяет пользователю выбрать файл, содержимое которого будет отправлено вместе с формой.

    Пароль input control использует элемент input, а атрибут type имеет значение password .С помощью этого элемента управления вводимые пользователем данные отображаются в браузере в виде точек или звездочек.

    Элементы управления формой - поля выбора

    Выпадающие поля выбора задаются с помощью элемента выбора.

    • Каждый вариант, предлагаемый в меню, представлен элементом option , и каждый элемент select должен содержать по крайней мере один элемент option.
    • Элемент optgroup позволяет сгруппировать несколько пунктов меню.Они должны появляться непосредственно в элементе select, т.е. группы, как правило, не могут быть вложенными.
    Пример:
      
    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *