Распродажа складских остатков ключей Corel Выбирайте настоящее ПО Microsoft

 

 

 

 

 

 

 

Зачастую на 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="Тип" value="Значение">

Группа флажков состоит из элементов  <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  предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

<input name="Имя переключателя" type="Тип" value="Значение">

Переключатель ( 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)

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса( 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)

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

<input type="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов">

При создании обычного текстового поля размером  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="Значение">

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

Пример:

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

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

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

<input type="Тип" name="Имя кнопки" value="Текст кнопки">

При создании кнопки для отправки формы необходимо указать 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 "Выберите значение"; 
?>

 

Ссылки по теме

• Каталог программ Microsoft
• Купить программу Microsoft Visual Studio Professional 2010
• Задать вопрос ONLine по покупке программ в интернет магазине ITShop
• Подписаться на рассылку "Все о PHP и даже больше"