Взаимодействие формы с PHP программой-обработчиком на примере свойств CSS margin и padding


    В этом уроке на пимере свойств margin и padding применяемых в каскадных таблицах стилей CSS (если кто забыл, что это за свойства, то освежить свою память можно перейдя по ссылке: Свойства CSS margin и padding), я рассмотрю взаимодействие простой формы с PHP программой-обработчиком.
    Страница содержит форму, которую пользователь вначале заполняет, а затем нажимает кнопку "Отправить".
     После этого информация из формы передается методом POST в PHP программу, где производится ее обработка, после чего пользователю возвращается результат - картинка с изменяемой величиной полей и отступов.

Введите значения margin и padding в соответствующие поля формы:

Введите margin:

Введите padding:



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.



<?php
if (isset($_POST['padding'])) {$padding = $_POST['padding'];}
else $padding=50;
if (isset($_POST['margin'])) {$margin = $_POST['margin'];}
else $margin=50;
echo "<p>Начальное значение  <strong>margin: </strong>50px,
начальное значение <strong>padding: </strong>50px.</p><br />"; ?>
    PHP программа-обработчик начинает свою работу с того, что проверяет существование переменных margin и padding в глобальном массиве POST - так называемая защита от серверов не поддерживающих прямую предачу данных, с функцией автоматического создания переменой из формы.
     Если этих переменных не существует, тогда им присваиваются значения по умолчанию. В противном случае они получают значения, которые пользователь вел в поля формы.

<form method="post" action="marg_padd_vyv.php">
    <p>Введите margin:<br />
    <input type="text" name="margin" value="" /></p>
    <p>Введите padding:<br />
    <input type="text" name="padding" value="" /></p>
    <p><input type="submit" name="submit" value="Отправить" /></p>
  </form><br /><br />
    Как только пользователь нажимает кнопу отправки формы, значения всех ее полей собираются в один пакет и передаются в PHP программу-обработчик "marg_padd_vyv.php".
    Обратите внимание на значение атрибута action у формы.

<?php
echo "<p>Введенное значения <strong>margin:  </strong>".$margin."px; введенное значение <strong>padding: </strong>".$padding."px.</p><br />";


echo "<div style='padding:".$margin."px; background: #9ECBFF;' >            
    <div style='margin:0px; padding:".$padding."px; background:#CCCCCC;'>
    <div style='margin: 0px: padding:0px; background:#FFA193;'>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
     </div>
     </div>
</div>";
?>
    Далее программа-обработчик сначала выводит числовые значения margin и pading, а затем подставляет эти значения в параметры margin и padding элементов div.
    В этом казалось бы простом коде использована очень интересная возможность которую предоставляет пользователю PHP. Это конкатенация переменных.
    Не пугайтесь. На самом деле все очень просто!
    Конкатенация - операция соединения нескольких строк символов в одну: style='padding:".$padding."px;', или если использовать значения по умолчанию:
$padding=50, то style='padding:50px;'


Автор: Сергей Зарубин

Дата: 2011-03-30

Колличество просмотров: 5814

Нравится

Комментарии к заметке:



Добавить новый комментарий


Введите число с картинки:

captcha