Html скрипт формы ввода

Создание простой формы на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1.

Для начала, давайте определимся, для чего мы будем создавать форму. Если бы мы создавали форму для регистрации на крупном портале, то нам пришлось бы разместить на ней поля для ввода имени, фамилии, логина пользователя, его адреса электронной почты, и, возможно, для его реального адреса, поле для пароля, и т.д. В общем, нам придется разместить на форме целую кучу полей, в которых мы запутаемся, а гости нашего сайта – тем более. Я решил сделать простейшую форму для самой простой гостевой книги, для этого мне понадобится:

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

Источник

Работа с формами HTML

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

Пример 1. Отображение формы и обработка полученных данных

 else < formResult(); >//вывод формы function formShow() < echo '
'."\n"; echo 'Введите имя:
'."\n"; echo '
'."\n"; echo ''."\n"; echo '
'."\n"; > //обработка ввода function formResult() < echo '
'."\n"; echo 'Привет, '.htmlentities($_POST['name'], ENT_QUOTES).'. 
'."\n"; echo ''."\n"; echo '
'."\n"; >

Всё просто. Принятие решения, какую страницу выводить, отделяем от вывода формы и от обработки результата.

Глобальная переменная $_SERVER[‘REQUEST_METHOD’] содержит метод, который был использован для запроса страницы: ‘GET’ — при вводе адреса страницы в браузере, затем после отправки формы — ‘POST’.

$_SERVER[‘SCRIPT_NAME’] — содержит путь к текущему исполняемому скрипту. Это позволяет не менять код программы при её переименовании.

Функция htmlentities преобразует все символы в html-сущности, как указано в описании. Это позволяет корректно выводить в браузере введенные пользователем знаки разметки html и защищает от межсайтовых сценарных атак. Помимо экранирования одиночных кавычек (параметр ENT_QUOTES), необходимо также проверять пользовательский ввод и на соответствие введенных символов кодировке. Однако с последним будем разбираться позднее.

Можно применить для вывода html-кода формат heredoc:

function formShow() < $script = htmlentities($_SERVER['SCRIPT_NAME']); echo Введите имя: 
 
  FORM; >

Мне кажется, что heredoc затрудняет чтение, однако, если вам проще такой код — используйте его.

Результат вывода формы будет примерно таким:

Далее разберемся как проверять пользовательский ввод.

При написании использовал книгу PHP. Рецепты программирования

Источник