Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
В данной статье будет описан процесс создания простой веб-формы с использованием выпадающего списка (select). Форма будет отправлять данные на сервер, где они будут обрабатываться с помощью PHP. Это может быть полезно для создания интерактивных форм, таких как заказ блюд в ресторане или выбор параметров в любой другой онлайн-системе.
Для реализации этой задачи используются следующие технологии:
HTML — язык разметки для создания структуры страницы.
CSS — язык стилей для оформления внешнего вида.
JavaScript — необязательный компонент, но может быть использован для добавления динамических функций.
PHP — серверный язык программирования для обработки данных, переданных через форму.
Шаг 1: Создание HTML-формы
Первым шагом является создание HTML-формы с выпадающим списком. Ниже приведен пример кода:
<!DOCTYPE html><html lang=”ru”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Форма с выпадающим списком</title>
</head>
<body>
<h1>Выберите блюдо</h1>
<form method=”post” action=”">
<label for=”dinner”>Выберите блюдо:</label><br>
<select name=”dinner” id=”dinner”>
<option value=”" disabled selected>Выберите блюдо</option>
<option value=”Каша”>Каша</option>
<option value=”Винегрет”>Винегрет</option>
<option value=”Пирог”>Пирог</option>
<option value=”Компот”>Компот</option>
</select><br><br>
<input type=”submit” value=”Отправить”>
</form>
Появиться выпадающий список (рисунок 1).
Рисунок 1. Выпадающий список
<?php // Обработка данных формы
if (isset($_POST["dinner"])) {
echo “<p>Мой заказ: ” . htmlspecialchars($_POST["dinner"]) . “</p>”;
}
?>
</body>
</html>
Описание кода:
<form> : Элемент формы, который определяет метод отправки (method=”post”) и адрес обработчика (action=”" — текущая страница).
<select> : Выпадающий список с несколькими вариантами (<option>).
Первый <option> имеет атрибут disabled и selected, чтобы он был дефолтным значением и недоступным для выбора.
<input type=”submit”> : Кнопка для отправки формы.
PHP-обработка : Если форма была отправлена, PHP проверяет наличие данных из поля dinner и выводит их на экран.
Шаг 2: Обработка данных на сервере (PHP)
PHP используется для обработки данных, переданных через форму. В данном случае, если пользователь выбрал блюдо и нажал кнопку “Отправить”, PHP выведет сообщение с выбранным блюдом (рисунок 2).
<?php
if (isset($_POST["dinner"])) {
echo “<p>Мой заказ: ” . htmlspecialchars($_POST["dinner"]) . “</p>”;
}
?>
isset($_POST["dinner"]) : Проверяет, была ли передана переменная dinner.
htmlspecialchars() : Защищает от XSS-атак, преобразуя специальные символы в HTML-сущности.
Рисунок 2 – Кнопка “Отправить”
Шаг 3: Отображение результата
После отправки формы пользователь увидит выбранное блюдо на странице. Например, если выбрано “Пирог”, результат будет выглядеть так (рисунок 3):
Мой заказ: Пирог
Рисунок 3. Результат
В данной статье был описан процесс создания простой формы с выпадающим списком на HTML и PHP. Такая форма может быть использована для различных целей, таких как заказ товаров, выбор параметров или любых других ситуаций, где необходимо предоставить пользователю возможность выбрать один из нескольких вариантов.
Библиографический список
- Диков, А.В. Клиентские технологии веб-программирования: JavaScript и DOM: учебное пособие / А. В. Диков. – Санкт-Петербург: Лань, 2020. – 124 с. – ISBN 978-5-8114-4074-0. – Текст: электронный // Лань: электронно-библиотечная система. – URL: https://e.lanbook.com/book/126934 – Режим доступа: для авториз. пользователей.
- Маркин, А.В. Основы web-программирования на PHP: учебное пособие / А.В. Маркин, С.С. Шкарин. – Москва: Диалог-МИФИ, 2012. – 252 с.: табл., схем., ил. – Режим доступа: по подписке. – URL: https://biblioclub.ru/index.php?page=book&id=229742– Библиогр.: с.238. – ISBN 978-5-86404-241-0. – Текст: электронный.
- Строганов, А.С. Ваш первый сайт с использованием PHP-скриптов: учебное пособие / А.С. Строганов. – 3-е изд. испр. и доп. – Москва: Диалог-МИФИ, 2015. – 288 с.: ил. – Режим доступа: по подписке. – URL: https://biblioclub.ru/index.php?page=book&id=447998 – ISBN 978-5-86404-226-7. – Текст: электронный.