Пример создания html-формы и передачи данных в php
html, PHP

Пример создания html-формы и передачи данных в php

Привет всем! Какое изучение php без создания html-формы и передачи данных в php? Подумал я, и быстренько наваял генератор поддельных электронных адресов, который ранее был доступен в виде Python-кода, а сейчас — и как просто php-страница. Сейчас расскажу чуть подробнее, как все устроено — надеюсь, это поможет вам разобраться в работе с формами.
Итак, логика процесса следующая:
1. С помощью html создаем необходимую нам форму.
2. Передаем даннные из формы на страницу с php-кодом, который обрабатывает данные из формы нужным образом и выдает результат.
Как видите — все очень просто. Теперь реализуем это.

Для примера я решил создать форму в виде анкеты, где у нас будут поля:
1. Имя
2. Возраст
3. Город проживания
4. Хобби

Данные никуда сохранять не будем — у нас задача научиться передавать данные и немного их обрабатывать.
Форма в html создается с помощью тега <form>.

Элементы, доступные для управления формами и их описание — чуть ниже:

Однострочное текстовое поле: <input type=»text»>
Сам код выглядит следующим образом:

<input maxlength="12" name="text" size="45" type="text" value="Подсказка" />

где:
value — подсказка для пользователя
size — размер формы
maxlength — максимальное количество символов, которые можно ввести
а в наглядном виде форма смотрится так:

позволяет создать однострочное поле для ввода текста. Причем, если для атрибута type указать значение password — все символы, которые мы будем вводить — будут показываться в виде звездочек или точек.
<input type=»password»>
Код формы для ввода пароля:

<input maxlength="12" name="text" size="45" type="password" value="Подсказка" />

Форма в наглядном виде:

Многострочное текстовое поле: <textarea>…</textarea>
создает текстовое поле размером в несколько строк текста. Многострочное текстовое поле в наглядном виде:

И сам код многострочной формы:

<textarea cols="22" name="text_area" rows="2"></textarea>

где:
— textarea name — имя многострочной формы
— cols — количество символов по горизонтали
— rows — количество символов по вертикали

Флажок: <input type=»checkbox»>
создает поле флажка, кликом на который его можно установить или очистить
Визуально это выглядит так:

И сам код:

<input id="checkbox" name="checkbox" type="checkbox" />

Переключатель: <input type=»radio»>
создает переключатель — некий управляемый элемент в виде точки, которую можно включить-выключить. Нужно это для группы переключателей с одиннаковым значением атрибута name, благодаря чему можно выбрать один из них.

<input name="radio_button" type="radio" />

А визуально:

Кнопка: <input type=»submit»> — стандартная кнопка, которая реагирует на клик мышки. Если тип кнопки submit — она собирает всю информацию с формы и отправляет ее для обработки.
Выглядит визуально кнопка так:

или: <input type=»image»> — кнопка этого типа делает тоже самое, но вместо текста на кнопке можно добавить изображение.
а еще вот так: <input type=»reset»> — этот тип кнопки очищает все поля формы от введенной пользователем информации.
и тоже вариант: <input type=»button»> — ничего не делает 🙂 Для того, что бы кнопка начала что-то делать — для нее нужно добавить сценарий JavaScript.

Список: <select>…</select>
организует список, в котором пользователь может выбрать одно из нескольких значений. Для каждого значения списка нужно добавить элемент <option>
Например, список ниже:


в виде кода выглядит следующим образом:

<label for="drinks">Ваш любимый напиток:</label>
<select name="drink" id="drink" form="drinkform">
<option value="bier">Пиво</option>
<option value="tea">Черный чай</option>
<option value="kwas">Квас</option>
<option value="water">Минералка</option>
</select>

С элементами управления формой разобрались, теперь вернемся к нашей форме. Напомню — нам нужно сделать поля:
1. Имя
2. Возраст
3. Город проживания
4. Хобби

Делаем… и получаем код формы в следующем виде:

<form action="https://lavrynenko.com/anketa.php" method="post">
<label for="name">Имя</label>
<input name="name" type="text" size="25" maxlength="99"><br>
<label for="age">Возраст</label>
<input name="age" type="text" size="2"><br>
<label for="sity">Город проживания</label>
<input name="sity" type="text" size="25"><br>
<label for="hobbys">Хобби</label>
<select id="hobby" name="hobby">
<option value="bier">Пиво</option>
<option value="tekila">Текила</option>
</select>
<input type="submit" value="Отправить информацию">
</form>

Визуально это будет выглядеть следующим образом:










Итак, форма есть… теперь давайте напишем обработчик готовой информации — страницу под названием anketa.php — которая будет находиться (в моем случае) по адресу: https://lavrynenko.com/anketa.php и будет выводить введенную в анкету информацию.
Код страницы выглядит следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример работы анкеты</title>
</head>
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$sity = $_POST['sity'];
$hobby = $_POST['hobby']; #обращаемся по имени, а тот в свою очередь автоматом взял выбранный пользователем пункт
echo nl2br("В анкете вы указали данные:\r\n");
echo nl2br("Имя: ").$name;
echo nl2br("\r\n");
echo nl2br("Возраст: ").$age.("\r\n");
echo nl2br("\r\n");
echo nl2br("Город проживания: ").$sity;
echo nl2br("\r\n");
echo nl2br("Хобби: ").$hobby;
?>
<br />
<form method="link" action="https://lavrynenko.com/spisok-poddelnyx-email-adresov-generator/"><input type="submit" value="Вернуться в блог"></form>
</body>
<body>
</body>
</html>

На этом все… Больше сказать по теме создания html-формы и передачи данных в php я пока не могу (сам учусь 🙂 ).
В случае возникновения вопросов пишите на почту, или в Телеграм.