Як зробити форму зв’язку част. І (HTML/PHP)

maque.org.ua - Українською про PHP

Привіт. Сьогоднішнім дописом я розпочинаю серію статей про те, як можна за допомогою HTML/PHP зробити форму зв’язку. Для цього Вам потрібен PHP редактор (наприклад Дримвівер) та сервер з увімкненою функцією mail().

Рівень: початківець
Тривалість: 06 хв 26 с

Відео на YouTube можна дивитись у HD якості. Як саме.

Також можна завантажити це відео з YouTube.com на власний комп’ютер. Як завантажити відео з YouTube.com на власний ПК

Як зробити форму зв’язку част. І (HTML/PHP)

Передовсім просто зробимо форму та кнопку, щоб можна було певне значення надсилати на сервер.

Створюємо порожній документ з розширенням .php (приміром contact.php).

Додамо до нашого документа початковий теґ <form> і в ньому вкажемо action та method:

[code lang=”HTML”]

[/code]

Таким чином ми почали створювати форму та вказали:

  1. За допомогою атрибута action до якого файлу направляти дані з форми. Оскільки це значення у нашому випадку відсутнє (action=””), то дані з цієї форми направлятимуться до цього ж файлу (contact.php).
  2. За допомогою атрибута method ми вказали спосіб передачі даних з нашої форми: method=”get”. До речі, про цей метод є окремий допис.

Тепер додамо одне текстове поле та кнопку, натиснувши на яку можна надіслати наше значення текстового поля безпосередньо на сервер для обробки.

Отже, додаємо текстове поле зі значенням “personsName” для атрибута”name”:

[code lang=”HTML”]

[/code]

і кнопку для надсилання введених даних:

[code lang=”HTML”]

[/code]

і нарешті закриваємо нашу форму за допомогою кінцевого теґу форми:

[code lang=”HTML”]

[/code]

Тепер можна зберегти зроблені зміни у нашому файлі (ctrl-S) та переглянути результат у оглядачі. Ви повинні бачити поле для вводу тексту та кнопку для надсилання даних з нашого текстового поля. Зараз кнопка не працюватиме, бо ми ще не додали PHP код до нашої сторінки. Зробімо це зараз.

Вставляємо до нашого документа після зробленої форми початковий

[code lang=”PHP”]

[/code]

РHP теґи.

Тобто Ваш файл зараз повинен виглядати ось так:

[code lang=”HTML,PHP”]



[/code]

Передовсім слід створити змінну $name_entered) значнням якої буде $_GET[‘personsName’];

[code lang=”PHP”]
$entered_name = $_GET[‘personsName’];
[/code]

Кілька слів про цю конструкцію. Функція $_GET застосовується для отримання даних з форм, надісланих за допомогою метода get. Вказавши, що нас цікавить саме значення з індексом (ключем) ‘personsName’ (Пам’ятаєте, ми текстовому полю дали ім’я ‘personsName’?) ми отримуємо те, що було введено користувачем у текстове поле нашої форми.

І тепер, аби побачити наш результат, ми маємо отримане значення вивести на екран. Це можна зробити за допомогою echo:

[code lang=”PHP”]
echo $entered_name;
[/code]

Перед збереження та переглядом результату переконайтесь, що Ваш файл має такий вигляд:

[code lang=”HTML,PHP”]




[/code]

Тепер можна зберегти файл, завантажити його на сервер (локальний чи віддалений) і, ввівши значення у текстовому полі, натиснути на кнопку «Надіслати». Якщо все зробили правильно, то зразу під формою побачите щойно введене в текстове поле значення.

Подивитись приклад можна ось тут

Завантажити файл з цим скриптом можна за цим посиланням.

У наступній частині цієї серії ми застосуємо функцію mail() для надсилання значення нашого текстового поля на електронну пошту. Не перемикайтеся! ~:-)

До речі, раджу подивитись цікавий допис на цю саму тему ЯК ЗРОБИТИ КОНТАКТНУ ФОРМУ НА САЙТІ


You may also like

6 коментарів

  1. Мені кодити на пхп в дрімвіевері чомусь не зручно..
    Я віддаю перевагу phpDesigner або NetBeans.
    ХТМЛ в дрімвіевері це самий кращий варіант, але для пхп він не зручний. ІМХО

  2. @ symfony:
    А що саме не зручно? І чим саме запропоновані застосунки зручніші? Заздалегідь дякую за відповідь. 🙂

  3. Дуже цікава публікація. Чекаю на продовження.