Май 14, 2020 Запись была обновлена
Урок 9. Формы. Часть 2
Здравствуй, уважаемый читатель.
Это вторая часть девятого урока изучения html, в котором мы продолжим говорить о формах. Из данного урока вы узнаете как и какие параметры передаются, методы передачи данных из формы.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста Урок 9. Формы. Часть 1
Теория и практика
В прошлом части урока мы рассмотрели как создаются формы и ее элементы, а также атрибуты элементов форм. Если вы не прошли прошлый урок, рекомендую его пройти. Сначала закончим с элементами, которые остались нами не рассмотренными в прошлом уроке. Начнём с элемента radio button. В коде он выглядит следующим образом:
1 2 3 4 5 6 7 | <form> <p>Выберите Вашу страну:</p> <input name="country" type="radio" value="blr" checked> Беларусь <input name="country" type="radio" value="rus"> Россия <input name="country" type="radio" value="ukr"> Украина <input name="country" type="radio" value="usa"> США </form> |
Как это выглядит в браузере:
Как вы заметили, для того чтобы создать radio button необходимо присвоить значение атрибуту
.Далее перейдем к текстовой области. Это не просто маленькое поле для ввода имени, а большая область. Она задается с помощью отдельного тега
. Рассмотрим пример кода страницы:1 2 3 4 | <form> <p>Дополнительная информация</p> <textarea name="other" cols="40" rows="6"></textarea> </form> |
Как это выглядит в браузере:
Рассмотрим атрибуты текстовой области.
— имя элемента. Данный атрибут обязательно писать и его имя должно быть уникальным.
— количество столбцов. Определяет ширину текстовой области.
— количество строк. Определяет высоту текстовой области.
Здесь нет ничего сложного. Все атрибуты лучше запомнятся, если вы будете пробовать их писать руками. Пусть сначала подсматривая, но именно писать.
Последнее что хотел рассказать о формах это какие бывают методы передачи из формы и про файл обработчик.
Рассмотрим пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>Главная</title> </head> <body> <form method="POST" action="handler.php"> <p>Ваше имя</p> <input type="text" name="name" size="20" maxlength="15"> <p><input type="submit" name="submit" value="Отправить"><input type="reset" name="Reset" value="Очистить форму"></p> </form> </body> </html> |
Как это выглядит в браузере:
Для того чтобы отправить данные формы, необходимо разместить ВНУТРИ формы элемент
с атрибутом . Тогда форма поймет что по нажатию на эту кнопку необходимо передать данные одним из методов(POST или GET), которые описаны ниже.В атрибуте
задается тип передачи данных формы. Он бывает POST и GET. Отличие заключается в том, что при передаче методом GET данные формы передаются в адресной строке. То есть их можно увидеть. А при передаче методом POST данные скрываются и пользователь их не может увидеть. Вот как это выглядит:Метод GET
Метод POST
Чтобы стало еще более понятно. Посмотрите примеры прямо в браузере:
Метод GET
Посмотреть примерСкачать
Метод POST
Посмотреть примерСкачать
Посмотреть работу вы сможете прямо в браузере. Но когда скачаете архив и распакуете прямо на рабочий стол, оно работать у вас не будет, так как там есть php файл. А это компилируемый файл, для которого необходим сервер. У себя на компьюетере под windows вы можете установить Denwer.
И после того как нажата кнопка «Отправить», форма переходит на файл обработчик. Он указывается в атрибуте
. Это должен быть php файл, для того чтобы обработать поступившие данные из формы.За два урока мы полностью рассмотрели создание формы, ее элементы, атрибуты элементов формы, какие методы отправки бывают и куда данные отправляются при нажатии кнопки «Отправить». Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.
Больше практикуйтесь!
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Не понятно с атрибутом action=»handler.php», что именно здесь указывать,какой файл и для чего этот атрибут?
В него «полетят» данные, которые ввели в форму.
А откуда этот файл нам брать? И каким образом он работает?
Добрый день! В статье есть 2 архива с примерами POST и GET запросов.
Спасибо
и для кого этот способ, как сделать чтобы на почту приходило?
Чтобы ушло на емейл для этого есть стандартный код специально для емейл.
А вот как отправить на ПК, например на СОМпорт?
А чем radio button отличается от checkbox? Выглядит одинаково в итоге прост
Вот тем как выглядит и отличается)) и по-моему в чекбоксе можно нескольк вариантов выбирать а в радио нет