Работа с формами

В этом уроке мы с Вами рассмотрим html формы и не много поработаем с

ними на php.

Форма заключается в теги - <form></form>

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

кнопки.

В этом уроке мы будем создавать простую форму, и в конце урока

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

текста ( конечно же эта форма будет не так сложна как хотелось бы, но

проста в понимании ).

Форма может служить для получения и передачи данных. При помощи формы мы

можем создать регистрацию ( поля для регистрации ), простым примером

может служить регистрация на нашем сайте.

Форма начинается со слова form, после мы должны указать скрипт

обработчика формы словом - action, затем мы должны указать метод

передачи данных, словом - post, давайте рассмотрим на примере:

<form action = "script.php" method = "post">
</form>

В этом примере у нас скрипт обработки - script.php, метод передачи

данных - post.

Давайте разберёмся с методом передачи данных.

Возможны два метода передачи:

- get

- post

При передачи данных методом GET, мы будем их передовать в адресной

строке после знака ?. Посмотрим на примере

mysite.ru/money.php?id=2

В этом примере файлу money.php были переданы данные id равные двум.

Метод POST позволяет передавать данные скрыто, не в адресной строке, что

очень удобно.

Перейдём к формам:

Поля формы начинаются со слова input, после чего идёт тип поля - type, у

текстовых полей тип - text, у кнопок submit. Рассмотрим на примере не

большую форму с текстовым полем и кнопкой.

<form action = "script.php" method = "post">
<input type = "text" name = "text" size = "20" maxlength = 
"40"/><br /><br />
<input type = "submit" name = "submit" value = "отправить"/>
</form>

Как видим из этого примера - у нас есть текстовое поле и кнопка, а

теперь разберём:

Текстовое поле:

Сначала пишем тип - type = "text", после следует указать имя, если не

указывать его, то с чем же тогда будет работать наш скрипт, ведь нужно

будет обработать определённые данные, именно поэтому следует указывать

имя - name = "text", имя может быть любое, именно такое, чтобы потом

можно было понять к чему обращается скрипт.

После имени идёт кол-во символов вмещаемое в это текстовое поле - size =

20. Затем следует максимальное кол-во символов, которое могло бы войти в

это поле - maxlength = "40". И хотелось бы заметить, что знак обратного

слеша - используется в html тегах, которые не имеют закрывающего тега,

это вполне не обязательно писать, но так правильнее.

Теперь рассмотрим кнопку, все поля очень похожи, но только есть разница в

типах и кол-ве атрибутов, у кнопки сначала пишем тип - submit, потом

пишем имя - submit, и в конце текст на кнопке - отправить.

Вообще атрибут value в текстовых полях служит для создания текста по

умолчанию - это когда есть текстовое поле, а на нём написано имя, только

есть одно но, это не очень удобно, если не использовать специальных

скриптов, а именно при нажатии на текстовое поле слово имя не исчезнет, а

пользователю придётся удалять его, что очень не удобно.

Теперь создадим скрипт, который полученные данные из текстового поля

будет выводить на экран, а если текстовое поле пустое, то выведет

соотвествующее сообщение.

<?php
if ( isset ( $_POST["text"] ) and ( $_POST["text"] != '' ) ) {
    
    echo $_POST["text"];
    
}

Мы сначала в условии проверели существует ли в глобальном массиве $_POST

значение text из нашего текстового поля, и проверяем не пустое ли

значение text, то есть проверяем заполнил ли пользователь текстовое

поле, и если всё заполнено, то выводим всё то, что содержится в значении

text.

Но наша форма должна быть безопасной, то есть Вам в форму могут вбить

скрипт и испортить страницу, или же проэксперементировать с размером

шрифта и с чем угодно, во избежание опасности мы изменили код скрипта:

<?php
if ( isset ( $_POST["text"] ) and ( $_POST["text"] != '' ) ) {
    
    $text = $_POST["text"];
    
    $text = trim ( $text );
    
    $text = htmlspecialchars ( $text );
    
    $text = stripslashes ( $text );
    
    echo $_POST["text"];
    
}

Разберём что нового добавили:

Сначала переменной текст присвоили значение глобального массива, для

последующей обработке переданных значений.

Командой trim убрали лишние пробелы по бокам, это нужно например при

регистрации и входе на сайт, пользователь может случайно поставить

лишний пробел с любого бока своего ника, и уже после проверки имена не

совпадут, именно поэтому это важно запомнить.

Командой htmlspecialchars превращаем в текст все исполняемые html теги и

не только в обычный текст, это для того, чтобы продвинутый пользователь

не смог испортить код Вашего сайта, или ввести исполняемый код, html

теги, и т.д.

Команда stripslashes тоже переводит специальные на то кавычки и тому

подобное в обычный текст.

В этом скрипте мы довольно хорошо обезопасили себя от возможных проблем.

Теперь приведём Вам полные коды этих двух файлов, скопировав которые и

сохранив под нужными именами, Вы сможете опробовать на действии и

изменить так, как Вам этого захочется:

Файл text.html

<html>
<head>
<title>Test</title>
</head>
<body>
<form action = "script.php" method = "post">
<input type = "text" name = "text" size = "20" maxlength = 
"40"/><br /><br />
<input type = "submit" name = "submit" value = "отправить"/>
</form>
</body>
</html>

Файл script.php

<?php
if ( isset ( $_POST["text"] ) and ( $_POST["text"] != '' ) ) {
    
    $text = $_POST["text"];
    
    $text = trim ( $text );
    
    $text = htmlspecialchars ( $text );
    
    $text = stripslashes ( $text );
    
    echo $_POST["text"];
    
}

Теперь рассмотрим выпадающий список с возможностью выбора - это очень

простая форма, она создаёт простой выпадающий список.

Сразу же рассмотрим на не большом примере:

<html>
<head>
<title>Test</title>
</head>
<body>
<form action = "script.php" method = "post">
<select name = "color">
<option value = "red">Красный</option>
<option value = "green">Зелёный</option>
<option value = "blue">Синий</option>
</select><br />
<input type = "submit" name = "submit" value = "вперёд"/>
</form>
</body>
</html>

Выпадающий список заключается в теги <select></select>

Внутри этих тегов идут элементы списка заключённые в теги

<option></option>

Для лучшего усвоения материала мы не стали писать подробные объяснения

всех команд попробуйте разобраться сами, здесь всё что мы разбирали в

этом уроке.

И на последок создадим два файла - один с формой выбора цвета, другой со

скриптом обработчиком, который будет выводить текст с выбранным цветом

на странице с формой:

Файл color.html

<html>
<head>
<title>Test</title>
</head>
<body>
<form action = "script.php" method = "post">
<select name = "color">
<option value = "red">Красный</option>
<option value = "green">Зелёный</option>
<option value = "blue">Синий</option>
</select><br />
<input type = "submit" name = "submit" value = "вперёд"/>
</form>
</body>
</html>

Файл script.php

if ( isset ( $_POST["color"] ) and ( $_POST["color"] != '' ) ) {
    
    $color = $_POST["color"];
    
    echo "<font color = '$color'>Цветной текст</font>";
    
} else {
    
    echo "Вы не выбрали цвет";
    
}