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