Привет всем! Какое изучение 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 я пока не могу (сам учусь 🙂 ).
В случае возникновения вопросов пишите на почту, или в Телеграм.
Support the Blog!
Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️