HTML-формы

Источник: php

Мухаметшин Д.Ф.

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

1) Создание простой формы

Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .

Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

<form method="post" action="../admin/add_story.php">

</form>

2) Флажок (checkbox)

Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

Группа флажков состоит из элементов <input> , имеющих одинаковые атрибуты name и type(checkbox) . Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked . Если элемент выбран, то сценарию поступит строка имя=значение , в противном случае в обработчик формы не придет ничего , т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

Пример:

<input name="mycolor" type="checkbox" value="red" checked>Красный(выбран по умолчанию) <input name="mycolor" type="checkbox" value="blue">Синий <input name="mycolor" type="checkbox" value="black">Черный <input name="mycolor" type="checkbox" value="white">Белый

3) Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

Переключатель ( radio ) имеет атрибуты name , type и value . Атрибут name задает имя переключателя, type задает тип radio , а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение . При необходимости можно указать параметр checked , который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Пример:

<input name="mycolor" type="radio" value="white"> Белый <input name="mycolor " type="radio" value="green" checked> Зеленый (выбран по умолчанию) <input name="mycolor " type="radio" value="blue"> Синий <input name="mycolor " type="radio" value="red"> Красный <input name="mycolor " type="radio" value="black"> Черный

4) Кнопка сброса формы(Reset)

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

Пример:

<input type="reset" name="Reset" value="Очистить форму">

5) Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select> . Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected , то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple , то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

<select name="Имя списка" size = "Размер" multiple> <option value="Значение">Отображаемый текст в списке</option> </select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN .

6) Текстовое поле (text)

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

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text . Если указан параметр value , то поле будет содержать отображать value -текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Пример:

<input type="text" name="txtName" size="10" maxlength="5" value="Текст по умолчанию">

7) Поле для ввода пароля (password)

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

Пример:

<input type="password" name="txtName" size="10" maxlength="5">

8) Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

<textarea name="Имя поля" cols="Ширина поля " rows="Число строк">Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea> . Тэг name задает имя многострочного поля. Также можно указать ширину поля( cols ) и число строк( rows ). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea> .

Пример:

<textarea name="txtArea" cols="15" rows="10" readonly> Текст, который изначально будет отображен в многострочном поле ввода и который нельзя изменять, т.к. указан атрибут readonly </textarea>

9) Скрытое текстовое поле

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

Скрытое поле начинается с тега <input> , атрибуты которого являются name , type и value . Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.

Пример:

<input name="email" type="hidden" value="spam@nospam.ru">

10) Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

При создании кнопки для отправки формы необходимо указать 2 атрибута: type="submit" и value="Текст кнопки" . Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки .

11) Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов <form></form> . Начинающий тэг <form> содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data , который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла - " file ".

<form enctype="multipart/form-data" action="upload.php" method="post"> Загрузить файл: <input name="my_file" type="file"> <input type="submit" value="Отправить"> </form>

12) Рамка (fieldset)

Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset> . Заголовок указывается в тэгах <legend></legend> . Основное назначение объекта - задавание различных стилей оформления.

Пример:

<fieldset> <legend>Программное обеспечение(заголовок рамки)</legend> Текст, который будет помещен внутри рамки.</fieldset>

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET , в зависимости от указанного в атрибуте method метода передачи данных.

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

Обсуждение:

Создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с текстовым полем mytext и текстовой областью msg :

<form action="action.php" name="myform" method="post"> <input type="text" name="mytext" size="50"> <textarea name="msg" cols="20" rows="10" ></textarea> <input name="Submit" type=submit value="Отправить данные"> </form>

В этой html-форме нас интересует 3 атрибута: action который указывает путь к обработчику формы, имя текстового поля ( mytext ) и имя многострочного поля вода ( msg ). Также в форме присутствует кнопка, при нажатии на которую происходит передача данных.

После того как html-форма готова нам необходимо создать обработчик формы action.php:

<?php $text = ($_POST['mytext']; $msg = ($_POST['mytext']; echo $text; // Выводим содержимое текстового поля ?>

После того как мы введем любые значение в текстовые поля и нажмем на кнопку " Отправить данные " html-форма отправить значения сценарию action.php.
После этого в переменных $text и $msg будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST .

Если вы хотите, чтобы в многострочном текстовом поле соблюдалось html-форматирование, то используйте функциюnl2br():

<?php $text = nl2br($_POST['mytext']); ?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP - сценарий для обработки формы.

Обсуждение:

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

I. Ввод данных вручную:

<select class="input" type=text name=years> <option value='2000'>2000</option> <option value='2001'>2001</option> <option value='2002'>2002</option> …………………………………………… <option value='2050'>2050</option> </select>

II. Ввод данных через цикл:

<select class="input" type=text name=years> <?php $year = 2000; for ($i = 0; $i <= 50; $i++) // Цикл от 0 до 50 { $new_years = $year + $i; // Формируем новое значение echo '<option value='.$new_years.'>'.$new_years.'</option>'; //Формируем новую строчку } ?> </select>

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

Задача: Загрузка файла на сервер
Решение: Необходимо создать HTML форму и PHP - сценарий для обработки файла.

Описание:

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

<FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST> <INPUT NAME="myfile" TYPE="file"> <INPUT TYPE="submit" value="Передать файл"> </FORM>

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

Затем необходимо написать сценарий обработчик action.php. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

<?php if(isset($_FILES["myfile"])) // Если файл существует { $catalog = "../image/"; // Наш каталог if (is_dir($catalog)) // Если такой каталог есть { $myfile = $_FILES["myfile"]["tmp_name"]; // Времменый файл $myfile_name = $_FILES["myfile"]["name"]; // Имя файла if(!copy($myfile, $catalog)) echo 'Ошибка при копировании файла '.$myfile_name // Если неудалось скопировать файл } else mkdir('../image/'); // Если такого каталога нет, то мы его создадим } ?>

Замечание

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

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox "a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

<FORM ACTION="file.php" METHOD=POST> <input name="mycolor" type="checkbox" value="blue">Синий <input name="mycolor" type="checkbox" value="black">Черный <input name="mycolor" type="checkbox" value="white">Белый <input name="Submit" type=submit value="Выбрать"> </FORM>

<?php if (!empty($_POST['mycolor'])) echo $_POST['mycolor']; // Если выбран хоть 1 элемент else echo "Выберите значение"; ?>