Во многих случаях вы создаете веб-страницы, на которых вам нужно обрабатывать вводимые пользователем данные, такие как страница входа, создание новой учетной записи или отправка вопросов или комментариев. Пользовательский ввод собирается и отправляется на веб-сервер с помощью формы HTML. Формы легко добавлять с помощью встроенных инструментов KompoZer. Все типы полей формы, которые поддерживает HTML 4.0, можно добавлять и редактировать с помощью KompoZer, но в этом руководстве мы будем работать с текстом, текстовой областью, кнопками отправки и сброса.
Создать новую форму
KompoZer имеет богатые инструменты для форм, которые вы можете использовать для добавления форм на свои веб-страницы. Вы получаете доступ к инструментам формы, нажимая кнопку Форма или соответствующее раскрывающееся меню на панели инструментов.
Если вы не пишете свои собственные сценарии обработки форм, вам потребуется получить некоторую информацию для этого шага из документации или от программиста, написавшего сценарий.
Вы также можете использовать формы mailto, но они не всегда работают.
- Поместите курсор в то место, где вы хотите, чтобы ваша форма отображалась на странице.
- Нажмите кнопку Форма на панели инструментов. Откроется диалоговое окно «Свойства формы».
- Добавьте имя для формы. Имя используется в автоматически сгенерированном HTML-коде для идентификации формы и является обязательным. Вам также нужно сохранить свою страницу, прежде чем вы сможете добавить форму. Если вы работаете с новой несохраненной страницей, KompoZer предложит вам сохранить.
- Добавьте URL-адрес в сценарий, который будет обрабатывать данные формы, в поле «URL-адрес действия». Обработчиками форм обычно являются скрипты, написанные на PHP или аналогичном серверном языке. Без этой информации ваша веб-страница не сможет ничего сделать с данными, введенными пользователем. KompoZer предложит вам ввести URL для обработчика формы, если вы его не вводите.
- Выберите метод , используемый для отправки данных формы на сервер. Два варианта – ПОЛУЧИТЬ и ПОСТИТЬ. Вам нужно будет знать, какой метод требует скрипт.
- Нажмите ОК , и форма будет добавлена на вашу страницу.
Добавить текстовое поле в форму
После того как вы добавили форму на страницу с помощью KompoZer, форма будет выделена на странице светло-синей пунктирной линией. Вы добавляете поля формы внутри этой области. Вы также можете ввести текст или добавить изображения, как и в любой другой части страницы. Текст полезен для добавления подсказок или меток в поля формы для руководства пользователя.
- Выберите, куда вы хотите, чтобы текстовое поле для перехода в обведенной области формы. Если вы хотите добавить метку, вы можете сначала набрать текст.
- Нажмите стрелку вниз рядом с кнопкой Форма на панели инструментов и выберите Поле формы в раскрывающемся меню.
- Откроется окно Свойства поля формы. Чтобы добавить текстовое поле, выберите Текст в раскрывающемся меню с меткой Тип поля .
- Дайте имя текстовому полю. Имя используется для идентификации поля в коде HTML, а сценарию обработки формы требуется имя для обработки данных. В этом диалоговом окне можно изменить ряд других необязательных атрибутов, нажав кнопку Дополнительные свойства/меньше свойств или нажав кнопку Расширенное редактирование , но сейчас мы просто введите имя поля.
- Нажмите ОК , и на странице появится текстовое поле.
Добавить текстовую область в форму
Иногда в форму необходимо вводить много текста, такого как сообщение или поле вопросов/комментариев. В этом случае текстовое поле просто не подходит. Вы можете добавить поле формы текстовой области, используя инструменты формы.
- Поместите курсор в контур формы, где вы хотели бы, чтобы ваша текстовая область была. Если вы хотите ввести метку, часто рекомендуется набрать текст метки, нажать клавишу ввода, чтобы перейти к новой строке, а затем добавить поле формы, поскольку размер текстовой области на странице делает его неудобным для пользователя. метка находиться слева или справа.
- Нажмите стрелку вниз рядом с кнопкой Форма на панели инструментов и выберите Область текста в раскрывающемся меню. Откроется окно Свойства текстовой области.
- Введите имя для поля текстовой области. Имя идентифицирует поле в HTML-коде и используется сценарием обработки форм для обработки предоставленной пользователем информации.
- Введите количество строк и столбцов, которые вы хотите отображать в текстовой области. Эти размеры определяют размер поля на странице и объем текста, который можно ввести в поле перед прокруткой.
- С помощью других элементов управления в этом окне можно указать более сложные параметры, но пока достаточно имени поля и размеров.
- Нажмите ОК , и текстовая область появится в форме.
Добавить кнопку Отправить и сбросить в форму
После того, как пользователь заполнил форму на вашей странице, должен быть какой-то способ для передачи информации на сервер. Кроме того, если пользователь хочет начать все сначала или допустил ошибку, полезно включить элемент управления, который сбросит все значения формы по умолчанию. Специальные элементы управления формой обрабатывают эти функции, называемые кнопками Submit и Reset соответственно.
- Поместите курсор в выделенную область формы, где вы хотите, чтобы была кнопка отправки или сброса. Чаще всего они будут расположены ниже остальных полей формы.
- Нажмите стрелку вниз рядом с кнопкой Форма на панели инструментов и выберите Определить кнопку в раскрывающемся меню. Откроется окно свойств кнопки.
- Выберите тип кнопки в раскрывающемся меню «Тип». Вы можете выбрать «Отправить», «Сбросить» и «Кнопка». В этом случае мы выберем тип Отправить .
- Дайте имя кнопке, которая будет использоваться в HTML и коде обработки формы для обработки запроса формы. Веб-разработчики обычно называют это поле «отправить».
- В поле с надписью Значение введите текст, который должен появиться на кнопке. Текст должен быть коротким, но описывать, что будет происходить при нажатии кнопки. Что-то вроде «Отправить», «Отправить форму» или «Отправить» являются хорошими примерами.
- Нажмите ОК , и в форме появится кнопка.
Кнопка Сброс может быть добавлена в форму с использованием того же процесса, но выберите Сброс в поле Тип вместо Отправить .
Редактирование формы с помощью KompoZer
Редактировать форму или поле формы в KompoZer очень просто. Просто дважды щелкните по полю, которое вы хотите редактировать, и появится соответствующее диалоговое окно, где вы можете изменить свойства поля в соответствии со своими потребностями. Диаграмма выше показывает простую форму с использованием компонентов, описанных в этом руководстве.
