HTML-формы. PHP и формы Переключатель страниц php

HTML-формы. PHP и формы Переключатель страниц php

Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть, html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.

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


Рассмотрим подробнее варианты для разных типов полей.

Текстовые поля

Под текстовыми полями в этой статье понимаются элементы, создаваемые тегам input со значением параметра type равным text и тегом textarea . Организовать обработку формы состоящей из нескольких таких полей проще всего. На листинге ниже приведен листинг с html-разметкой для такой формы.






Как видно из листинга, имена для элементов формы, с точки зрения PHP , являются элементами массива. Поэтому PHP -сценарий, который будет обрабатывать эту форму, будет воспринимать все множество текстовых полей этой формы как единый массив. К отдельным элементам можно обращаться по индексам или использовать перечисление при помощи команд list и each , как это сделано в следующем примере.

n"; ?>

Переключатели

Переключателями (checkbox ) в этой статье называются элементы, создаваемые тегам input со значением параметра type равным checkbox . Форма для использования переменного количества «переключателей » строится абсолютно так же. Обратите внимание, что выбор конкретного значения переключателя (то есть значение свойства value) не важен. Пример приведен в листинге ниже:






Однако обработка такой формы отличается от обработки, описанной для текстовых полей. В данном случае необходимо определить, включил или нет посетитель сайта тот или иной переключатель. Если включил — то соответствующий элемент массива существует, если нет — то отсутствует. В следующем листинге приведен пример PHP сценария, который распечатывает включенные переключатели:

Радио-кнопки

Перед тем как описывать обработку радио-кнопок необходимо вспомнить, как они работают. Суть радио-кнопок (элементы созданные тегами input со значением параметра type равным radio ) заключается в том что, выбирая одну кнопку, пользователь автоматически снимает выделение с другой кнопки из этого же набора. Кнопки объединяются в набор очень просто: у всех кнопок в наборе одно и тоже имя.

А вот значения (то есть параметры value ) у кнопок в наборе — разные. И на сайт будет отправлено значение выбранной кнопки с именем набора. Так же как и в случае с текстовыми полями и переключателями имена наборов радио-кнопок должны оформляться как имена элементов массива в PHP. Пример такой формы приведен в следующем листинге:

// первый набор кнопок
// второй набор кнопок
// третий набор кнопок

Обработка радио-кнопок объединяет идеи, использование при обработке, как текстовых полей, так и переключателей. Если автор html-страницы не установил значение по умолчанию, а пользователь не выбрал определенную кнопку в наборе радио-кнопок, то данный элемент будет отсутствовать в массиве (как для переключателей).

Если же кнопка выбрана, то соответствующий элемент массива будет содержать ее значение (как для текстовых полей). Ниже приведен листинг примера, обрабатывающего форму с несколькими наборами радио-кнопок.

n"; ?>

Таким образом, ничего сложного в обработке сложных форм нет.

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

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

Теги

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

Замечание

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

$text = nl2br ($_POST [ "mytext" ]);
?>

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

Обсуждение:

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

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

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

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

Описание:

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




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

Затем необходимо написать сценарий обработчик action.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 вернет пустое значение:


Синий
Черный
Белый

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




Есть еще вопросы или что-то непонятно - добро пожаловать на наш

Во всех языках мира есть слово «включатель»,
и только в русском - «выключатель»!
Михаил Задорнов

Сегодня мы поговорим о таком элементе синтаксиса PHP , как переключатели. Не стоит путать его с HTML-тегом , который тоже создаёт переключатели. Итак,

Оператор switch

Задача: в зависимости от того, что выбирает пользователь, вывести ему необходимый вариант. Смотрим код:

Пример 1. HTML-страница с формой:

Соцопрос

Введите Вашу оценку по русскому языку:

А вот код обработчика:

Пример 2. Обработчик формы (файл cup6.php):

if (! $score ) {
echo ();
} elseif ($score == 1 ) {
echo ("Ужас!" );
} elseif ($score == 2 ) {
echo ("Неуд %-(" );
} elseif ($score == 3 ) {
echo ("Уд..." );
} elseif ($score == 4 ) {
echo ("Хорошо" );
} elseif ($score == 5 ) {
echo ("Отлично!" );
} else {
echo ("Интересная оценка..." );
}
?>

Думаю, что все вы легко разобрались с кодом и поняли как он действует. Вообще говоря, код этот правильный, и в нём нет ошибок (вроде бы...), но уж очень он неудобен: целая куча условий, уследить где что достаточно тяжело. Что же делать? Сейчас нам и пригодится переключатель switch .

Внешний вид переключателя такой:

Пример 3. Внешний вид переключателя switch:

switch (выражение ) {
case значение1 :
// команды, которые выполняются, если выражение = значение1
break; // необязательно
case значение2 :
// команды, которые выполняются, если выражение = значение2
break; // необязательно
...
default:
// команды, которые выполняются, если не было найдено
// ни одного совпадения
break; // необязательно
}

Как действует весь этот блок:

  1. Вычисляется значение выражения.
  2. Значение выражения сверяется со значением 1 . Если они равны, то выполняется код, находящийся после команды case значение1:
  3. Если не значение выражения не равно значению 1 оно сверяется со значением 2, 4 и так далее.
  4. Если не было найдено ни одного совпадения, то выполняется код блока default .

Блок default не является обязательным: его можно не указывать.

Команда break(); после каждого блока кода нужна для того, чтобы после того, как код был выполнен, все последующие case-ы просто пропускались.

Теперь давайте изменим код второго примера на более удобный! Например, такой:

Пример 4. Изменённый код примера 2 (файл cup6.php):

switch ($score ) {
case 0 :
echo ("Вы всё-таки введите оценку-то..." );
break;
case 1 :
echo ("Ужас!" );
break; case 2 :
echo ("Неуд %-(" );
break;
case 3 :
echo ("Уд..." );
break;
case 4 :
echo ("Хорошо" );
break;
case 5 :
echo ("Отлично!" );
break;
default:
echo (
"Интересная оценка..." );
}
?>

Вот так. Просто и удобно. Результаты этой работы изображены на рисунках:

До После

Подключение

Зачастую гораздо удобнее разбить код на несколько частей и выводить их в нужных местах. Чтобы включить содержимое одного файла в другой файл мы можем пользоваться двумя командами: require(); и include();

require()

Внешний вид команды:

Пример 6. Внешний вид команды require():

require("имя файла" );

Перед началом выполнения скрипта PHP находит все команды require(); и заменяет их (команды) на содержимое указанного файла .

Замена происходит только один раз перед началом работы скрипта, так что Вы не сможете включить команду require(); в тело цикла!

Файл, который Вы подключаете командой require(); может содержать в себе PHP -код. Этот код будет выполнен.

include()

Внешний вид команды:

Пример 7. Внешний вид команды include():

include("имя файла" );

Команда include(); вставляет и выполняет содержимое указанного файла, причём происходит это во время выполнения скрипта каждый раз при встрече команды inlcude(); .

Несмотря на явную схожесть, команды require(); и include(); серьёзно различаются: команда require(); выполняется единожды перед началом выполнения скрипта, а команда inlcude(); каждый раз когда встречается в коде и Вы легко можете помещать команду inlcude(); в циклы.

Как это может помочь в жизни: почти на каждом сайте есть такие части страницы, которые не изменяются во всём сайте - это, например, header (заголовок, шапка) сайта и footer («подвал», низ) сайта. Чтобы не печатать их в каждой странице заново стоит вынести их в два отдельных файла (например, header.php и footer.php) и подключать по мере необходимости.

Код такой страницы может выглядеть, например, так:

Пример 8. Подключение заголовка и низа страницы из внешних файлов:

require("header.php" ); // здесь находится текст текущей страницы
require("footer.php" );
?>

Использование require() в этом примере предпочтительнее: мы ведь включаем эти файлы только один раз.

require_once() и inlcude_once()

Если Вам нужно сделать так, чтобы некоторый файл включался в код только один раз, то вместо require(); и include(); нужно использовать require_once(); и require_once();

Посмотрите примеры:

Пример 9. Двойное использование include_once():

include_once("top.php" );
// здесь какой-нибудь код include_once("top.php" );
?>

В предыдущем примере файл top.php будет включён в код страницы только один раз, несмотря на то, что в коде есть две команды.

Вот и всё...

Ну вот, вроде бы и всё, что я хотел рассказать Вам на сегодня. Будут какие-нибудь проблемы с PHP - пишите мне, я помогу!

В качестве домашнего задания: сделать простейший калькулятор. В качестве подсказки, вот Вам рисунок:

И вот ещё что: стоит ли вообще задавать подобные «домашние задания»?

В данном уроке мы создадим простой переключатель шаблонов оформления с помощью PHP переменных и в CSS.

Существует множество подобных переключателей, и пару раз я уже переводил уроки на эту тему. Можно менять оформления полностью с помощью специальных PHP скриптов, можно использовать JavaScript. При этом скрипты просто меняют таблицы стилей. А что если нам необходимо сменить всего несколько стилей на странице? Не будем же мы из-за этого создавать несколько разных CSS файлов.

К счастью, есть выход из этой ситуации. В этом нам помогут PHP переменные, которые будут менять некоторые строки в таблице стилей и соответственно у нас будет меняться оформление.

Первым делом нам необходимо создать PHP файл для содержания нашей страницы. Мы сделаем его предельно простым, но Вы можете разработать более сложные схемы применения. Обратите внимание, что таблица стилей у нас имеет расширения .php, и находится в папке CSS.


< html >

PHP Variables In CSS Demo
< meta http -equiv="Content -Type" content="text /html; charset = utf-8" />










Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





Я создал немного контента с небольшой навигацией, которая позволит нам менять шаблон (в нашем случае будет меняться шапка).

Мы будем использовать строку запроса для того, чтобы изменить текущую тему оформления передавая значение имени к тому же PHP файлу. Нам также необходимо, чтобы скрипт помнил какое оформление мы сейчас используем и оно оставалось на всем сайте.

Вставьте следующий код перед указанием doctype:

session_start();


$_SESSION["template"] = $_GET["template"];

} elseif (isset($_SESSION["template"])) {
$template = "?template=".$_SESSION["template"];
} else {
$template = "";
}
?>

Итак, вот что этот код делает. Поскольку мы используем сессии, для начала нам необходимо начать сессию. Далее мы проверяем не содержит ли строка запроса значение переменной шаблона. Если не содержит, мы тогда придаем переменной сессии значение шаблона. Далее мы создаем локальную переменную со строкой, которую мы добавим к местонахождению CSS файла. Она позволит нам передать название шаблона, который мы хотим использовать в PHP файл, создавай стили CSS.

Теперь мы можем создать переключатель шаблонов. Мы используем цифры 1-3 для идентификации нужного шаблона:

switch theme:
1
2
3

Нам также необходимо изменить местонахождение PHP файла, который отвечает за создание CSS.

Теперь мы готовы создать PHP файл, который будет отвечать за создание нашего шаблона. Нам необходимо в самом начале файла дать знать браузеру, что здесь будут содержаться CSS стили. Поможет нам в этом следующая строка кода:

Header("Content-type: text/css; charset: UTF-8");

Теперь Вы можете просто использоваться этот файл, как нормальную таблицу стилей с возможностью вставлять PHP переменные. Это открывает перед Вами большие возможности не только изменения внешнего вида страницы, но и динамическая замена содержимого.

Поскольку у нас всего 3 возможных шаблона, нам необходимо убедиться, чтобы можно было использовать только эти 3 цифры. Если вдруг, кто-либо в строке запроса попробует передать другое значение, у него перед глазами откроется шаблон по умолчанию (в нашем случае - это "1").

$numberoftemplates = 3;
if (isset($_GET["template"])) {
$template = $_GET["template"];
if ((!is_numeric($template)) || ($template > $numberoftemplates) || ($template < 0)) {
$template = 1;
} else {
$template = round($template);
}
} else {
$template = 1;
}

Теперь у нас есть локальная переменная $template, которая содержит номер шаблона для использования. Для ясности можете проверить это, используя ее в качестве комментария к CSS коду:

Echo "/*====== template used: ".$template." ======*/";

Можете после этого обратится к файлу style.php и увидите в исходном коде такую надпись: “/*====== template used: 1 ======*/”. Если в брайзере обратиться к style.php?template=2, тогда будет другое значение.

Поскольку мы не создаем отдельно таблицу стилей для каждого шаблона, нам достаточно указать лишь разницу между нашими оформлениями в одном файле. Можем вписать эти изменения в массив:

$css = array(
"header-background" => array(
1 => "url(../images/header-bg-1.jpg) no-repeat",
2 => "url(../images/header-bg-2.jpg) no-repeat",
3 => "url(../images/header-bg-3.jpg) no-repeat"
),
"header-h1-colour"=> array(
1 => "#fff",
2 => "#fff",
3 => "#666"
),
"header-h1-font"=> array(
1 => "bold normal 35px Helvetica, Arial, sans-serif",
2 => "bold normal 35px Trebuchet MS, Arial, sans-serif",
3 => "normal normal 35px Georgia, serif"
);

Как Вы видите, я выделил 3 элемента в массиве к каждому CSS селектору.

Теперь в нужном месте нам достаточно подставить:

Background: ;

и у нас, в зависимости от шаблона, будет разное фоновое изображение.

Вот все что необходимо. Используйте такие конструкции по всему файлу. Таким образом можете заменить множество разных элементов на странице. Полная таблица стилей:

* {
margin:0;
padding:0;
}
body {
font-size:.8em;
background:#F3F4F9;
font-family:Arial;
text-align:center;
}
#wrap {
width:990px;
margin:0 auto;
text-align:left;
}
#nav {
padding:10px 0;
width:990px;
overflow:auto;
}
#logo {
float:left;
}
#switcher {
float:right;
width:170px;
text-align:right;
padding:45px 20px 0 0;
}
#switcher span {
float:left;
padding:6px 10px 0 0;
}
#switcher a {
display:block;
float:left;
padding:4px 8px;
border:1px solid #ccc;
background:#eee;
margin:0 0 0 2px;
}
#switcher a:hover {
background:#fff;
}
#header {
clear:both;
background: ;
height: 206px;
}
#header h1 {
text-align:right;
padding:155px 25px 0 0;
color: ;
font:;
}
#col1 {
width:450px;
float:left;
margin:20px 0 0 0;
}
#col2 {
width:450px;
float:right;
margin:20px 0 0 0;
}

Вот и все готово! Наслаждайтесь!



top