РАЗРАБОТКА ВЕБ-ФОРМ

Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

№1 Создание формы.

Тег <form> используется для создания HTML-формы. В нём находится всё содержимое формы: поля для ввода, подписи к этим полям и кнопка отправки.

Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST. Если использовать метод GET, параметры формы будут отображаться в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.

№2 Выбор пунктов.

Атрибут type тега <input> со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.

Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются, когда выбраны.

Элементы <input> типа checkbox по умолчанию отображаются как флажки, которые отмечаются (отмечены) при активации. Флажок позволяет выбрать отдельные значения для отправки в форму.

Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label>, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс.

№3 Выпадающий список.

Тег <option> в HTML используется для выбора опции из раскрывающегося меню, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей.
Группу опций можно создать с помощью тега <optgroup>. Он создает группу связанных пунктов меню.

№4 Текстовые поля.

HTML-элемент <textarea> представляет собой многострочный элемент управления для редактирования обычного текста, который полезен, если вы хотите, чтобы пользователи могли вводить значительный объем текста в произвольной форме.

Параметр rows регулирует высоту, а параметр cols – длину

№6 Кнопка отправки.

submit — кнопка для отправки формы. Обычно ставится в конце формы. Хотя на практике часто используют <button type=”submit”>, так как кнопку проще стилизовать. <input type=”submit” value=”Отправить”>.

№6 Переход в среду php.

Даже если PHP код помещён в файл с расширением .php, то для того, чтобы он обрабатывался интерпретатором именно как PHP код, он должен быть размещён после тэга: <?php

Закрывающий тег пишется так: ?>

Закрывающий тег не является обязательным. Тем не менее, закрывающий тег может использоваться когда заканчивается PHP код и начинается, например, HTML код.

Пары <?php и ?> могут использоваться в одном файле несколько раз, отделяя PHP код от HTML кода.

Важная вещь, которую нужно знать про закрывающий тег ?>: он выбросит вас из PHP в HTML даже если он закомментирован с помощью //. Однако комментарий /* */ справляется — тег ?> теряет своё специальное значение. Помните об этой интересной особенности, поскольку при комментировании блоков кода, вы можете столкнуться с необычной ситуацией, когда ?> продолжит работу не смотря на то, что вы этого не ожидаете.

№7 Вывод переменных в среде php.

Команда echo отвечает за вывод информации на экран. После оператора указывается значение, которое нужно вывести. Чтобы вывести текст, его нужно указать в одинарных или двойных кавычках.

Команды в PHP разделяются точкой с запятой. Для удобства чтения каждую команду принято писать с новой строки.

Для обработки запросов типа POST в PHP используется встроенная глобальная переменная $_POST. Она представляет ассоциативный массив данных, переданных с помощью метода POST. Используя ключи, мы можем получить отправленные значения. Ключами в этом массиве являются значения атрибутов name у полей ввода формы.

При выводе не только одной переменной, используется знак « . ». Также это касается постоянных в одной строке с  $_POST.

Для вывода переменной при помощи POST, она должна быть записана в квадратных скобках.

Итог работы

 

Комбинируя все вышеуказанные способы ввода и вывода, получается следующее:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<body bgcolor=”#C4C4C4″>

<h1 style=”text-align: center;”>Форма Салихова Салавата</h1>

<hr><form action=”index.php” method=”POST”>

<p>Вы любите животных?</p>

<label><input name=”kapch” value=”Вы любите животных?: Да” id=”kapch1″ type=”radio”>Да</label>

<Br><label><input name=”kapch” value=”Вы любите животных?: Нет” id=”kapch” type=”radio”> Нет</label>

<p>С кем Вы предпочитаете проводить свободное время?</p>

<label><input type=”checkbox” name=”kapcha1″ value=”С семьей “> С семьей</label>

<Br><label><input type=”checkbox” name=”kapcha2″ value=”С друзьями “> С друзьями</label>

<Br><label><input type=”checkbox” name=”kapcha3″ value=”Предпочитаю быть один “> Предпочитаю быть один </label>

<p>Где Вы предпочитаете проводить свободное время?</p>

<select name=”kiti”>

<option selected disabled value=”">выберите место</option>

<option value=”Где Вы предпочитаете проводить свободное время?: Дома”> Дома</option>

<option value=”Где Вы предпочитаете проводить свободное время?: В гостях”>В гостях</option>

<option value=”Где Вы предпочитаете проводить свободное время?: Гуляю на улице”>Гуляю на улице</option>

</select>

<p>Сколько иностранных языков вы знаете</p>

<textarea rows=”2″ cols=”23″ name =”animals”></textarea>

<p>Есть ли у Вас свободное время, если Да, то сколько? (часов в день)</p>

<textarea rows=”2″ cols=”23″ name=”skrud”></textarea><Br>

<p> Расскажите о себе </p>

<textarea rows=”20″ cols=”140″ name =”pole”></textarea>

<Br><input value=”Отправить” type=”submit”></Br>

</form></body>

<?php echo “<p>Ваши ответы: </p>”;

echo “<p>” . $_POST["kapch"];

if ( $_POST["kapcha1"] == ‘С семьей ‘ and $_POST["kapcha2"] !== ‘С друзьями ‘ and $_POST["kapcha3"] !== ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha1"];}

if ( $_POST["kapcha1"] !== ‘С семьей ‘ and $_POST["kapcha2"] == ‘С друзьями ‘ and $_POST["kapcha3"] !== ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha2"];}

if ( $_POST["kapcha1"] !== ‘С семьей ‘ and $_POST["kapcha2"] !== ‘С друзьями ‘ and $_POST["kapcha3"] == ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha3"];}

if ( $_POST["kapcha1"] == ‘С семьей ‘ and $_POST["kapcha2"] == ‘С друзьями ‘ and $_POST["kapcha3"] !== ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha1"]. ” , “.$_POST["kapcha2"];}

if ( $_POST["kapcha1"] == ‘С семьей ‘ and $_POST["kapcha2"] !== ‘С друзьями ‘ and $_POST["kapcha3"] == ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha1"]. ” , ” .$_POST["kapcha3"];}

if ( $_POST["kapcha1"] !== ‘С семьей ‘ and $_POST["kapcha2"] == ‘С друзьями ‘ and $_POST["kapcha3"] == ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha2"]. ” , ” .$_POST["kapcha3"];}

if ( $_POST["kapcha1"] == ‘С семьей ‘ and $_POST["kapcha2"] == ‘С друзьями ‘ and $_POST["kapcha3"] == ‘Предпочитаю быть один ‘) {

echo “<p>С кем Вы предпочитаете проводить свободное время?:” .$_POST["kapcha1"]. ” , ” .$_POST["kapcha2"]. ” , ” .$_POST["kapcha3"];}

echo “<p>” . $_POST["kiti"];

if ( $_POST["animals"] !== ”) {

echo “<p>Сколько иностранных языков вы знаете:” .$_POST["animals"];}

echo “<p>” .$_POST["vid"];

echo  “<p>” .$_POST["kolvo"];

if ( $_POST["skrud"] !== ”) {

echo  “<p>Есть ли у Вас свободное время, если Да, то сколько? (часов в день):” .$_POST["skrud"];}

if ( $_POST["pole"] !== ”) {

echo  “<p>Вы рассказали о себе следующее: ” .$_POST["pole"];}?>

Используя компилятор, код будет выглядеть так:

В заключение, веб-формы также можно использовать для обратной связи, заявок, оформления заказов, голосования, тестирования, оформления подписки и других областях.

Библиографический список

1. HTML Academy: интерактивные онлайн-курсы по HTML, CSS и JavaScript. [Электронный ресурс]. URL: https://htmlacademy.ru/
2. Responsive Modal Login Form – GeeksforGeeks. [Электронный ресурс]. URL: https://www.geeksforgeeks.org/html-responsive-modal-login-form/?ref=ml_lbp
3. MDN Web Docs (mozilla.org). [Электронный ресурс]. URL: https://developer.mozilla.org/ru/
4. Руководство по PHP 8 (metanit.com). [Электронный ресурс]. URL: https://metanit.com/php/tutorial/
5. Руководство по PHP – Manual. [Электронный ресурс]. URL: https://www.php.net/manual/ru/index.php

---

Количество просмотров публикации: Please wait

Все статьи автора «Салихов Салават Зульфатович»