Организация ввода данных от пользователя

Современный сайт не может существовать без обратной связи. Пользователь может ответить на некоторые вопросы и ввести данные в контейнере form (форма для ввода). У тега form два атрибута: action – имя файла, которому будет передан введенный пользователем текст, и атрибут method – тип передачи данных web-серверу (get – в командной строке, post – во входном потоке, с завершающим символом).

При применении метода get в адресной строке формируется после имени сервера последовательность пар [«имя элемента» = «значение»;], причем имена элементов – это значения атрибутов name. Т.к. на размер адресной строки существует ограничение (не более 255 символов), то метод get не всегда применим.

При использовании метода post ограничений на объем передаваемых данных нет, можно передавать и длинные тексты и файлы разного формата.

На форме могут быть расположены разные элементы. Для правильного формирования сообщения web-серверу необходимо, чтобы у каждого элемента был атрибут name. Значение будет помещено в атрибут value.

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

Значение text (по умолчанию) – однострочное текстовое поле, чей видимый размер (в символах) может быть установлен атрибутом size. Пользователи могут вводить более длинный текст, прокручивая бегунок. Вы можете задать максимальное количество символов атрибутом maxlength.

Тип password (пароль) подобен text, но все вводимые символы заменятся на *.

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

Тип radio предназначен для формирования меню из нескольких альтернатив. У всех элементов типа radio должно быть одно имя, т.к. на сервер будет передаваться единственное выбранное пользователем значение. Радио-кнопки требуют явного атрибута value. Одна радио-кнопка должна иметь атрибут checked, она будет отмечать умалчиваемый выбор.

Тип submit определяет кнопку, которую пользователь может нажать, чтобы передать содержимое формы серверу. Текст-подсказка на кнопке задается атрибутом value. Если атрибут name задан, то на сервер будет передана пара наименование = значение. После нажатия на кнопку обратите внимание на строку Address в браузере, в ней должен появиться некоторый текст.

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

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

Тип hidden (скрытый) задает не показываемое пользователю поле. Используется при программировании на JavaScript.

Тип image – аналог типа submit, только позволяет использовать вместо обычной кнопки некоторое изображение. Файл изображения задается атрибутом src. Выравнивание изображения может быть задано атрибутом align.

Кроме типа input есть еще выпадающее меню, задаваемое тегом-контейнером select. Пункты меню указываются при помощи тегов-контейнеров option.

Наконец, многострочное текстовое поле задается тегом-контейнером textarea, имеющим атрибуты rows и cols.

Далее показан пример небольшой формы.

Ваше имя <input type="text" name="user">

Пароль <input type="password" name="psw">

<br> Какие темы сайта Вам понравились?

<input type="checkbox" name="t1">Обзор новинок

<input type="checkbox" name="t2">Рекомендации по уходу

<input type="checkbox" name="t3">Обмен опытом

<br> Ваш возраст:

<input type="radio" name="age" value="a1">до 20 лет

<input type="radio" name="age" value="a2">от 21 до 50 лет

<input type="radio" name="age" value="a3">от 51 года

<br> Как вы оцениваете сайт?

<input type="radio" name="ball">не удовлетворительно

<input type="radio" name="ball">удовлетворительно

<input type="radio" name="ball">хорошо

<input type="radio" name="ball">отлично

<br>

Прокомментируйте, пожалуйста, вашу оценку:

<br>Файл с описанием Вашего опыта<input type="file" name="s1"

value="файл">

<br>

В какой раздел поместить ваши рекомендации?

<option name="part1" value="p1">Цветы</option>

<option name="part3" value="p3">Огород</option>

<option name="part4" value="p4">Разное</option>

</select>

</form>

Пока вы не можете написать серверную программу правильность формы, да и ее необходимость, остаётся не проверенной. Немного поможет вам тестовая php-программа try_form.php. Не забудьте вставить ее имя в качестве значения атрибута action тега form. Папку со своим сайтом обязательно разместите на web-сервере (см. «Базовая структура html-документа. Местоположение документа») и обязательно скопируйте тестовую программу в свой каталог. После этого вызовите браузер и наберите в адресной строке адрес вашего сайта, наконец, щелкните по кнопке «Отправить».

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

Дата добавления: 2016-04-19; просмотров: 561;