Лого SiteHere.ru

Урок 9. Формы. Часть 2

Урок 9. Формы. Часть 1

Здравствуй, уважаемый читатель.

Это вторая часть девятого урока изучения 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 необходимо присвоить значение атрибуту type="radio".

Далее перейдем к текстовой области. Это не просто маленькое поле для ввода имени, а большая область. Она задается с помощью отдельного тега <textarea></textarea>. Рассмотрим пример кода страницы:

1
2
3
4
<form>
    <p>Дополнительная информация</p>
    <textarea name="other" cols="40" rows="6"></textarea>
</form>

Как это выглядит в браузере:

Главная

Дополнительная информация


Рассмотрим атрибуты текстовой области.

name="other" — имя элемента. Данный атрибут обязательно писать и его имя должно быть уникальным.

cols="40" — количество столбцов. Определяет ширину текстовой области.

rows="6" — количество строк. Определяет высоту текстовой области.

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

Последнее что хотел рассказать о формах это какие бывают методы передачи из формы и про файл обработчик.

Рассмотрим пример кода:

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>

Как это выглядит в браузере:

Передача данных в браузере

Для того чтобы отправить данные формы, необходимо разместить ВНУТРИ формы элемент <input> с атрибутом type="submit". Тогда форма поймет что по нажатию на эту кнопку необходимо передать данные одним из методов(POST или GET), которые описаны ниже.

В атрибуте method="" задается тип передачи данных формы. Он бывает POST и GET. Отличие заключается в том, что при передаче методом GET данные формы передаются в адресной строке. То есть их можно увидеть. А при передаче методом POST данные скрываются и пользователь их не может увидеть. Вот как это выглядит:

Метод GET

Метод GET в браузере

Метод POST

Метод POST в браузере

Чтобы стало еще более понятно. Посмотрите примеры прямо в браузере:

Метод GET

Посмотреть примерСкачать

Метод POST

Посмотреть примерСкачать

Посмотреть работу вы сможете прямо в браузере. Но когда скачаете архив и распакуете прямо на рабочий стол, оно работать у вас не будет, так как там есть php файл. А это компилируемый файл, для которого необходим сервер. У себя на компьюетере под windows вы можете установить Denwer.

И после того как нажата кнопка «Отправить», форма переходит на файл обработчик. Он указывается в атрибуте action="handler.php". Это должен быть php файл, для того чтобы обработать поступившие данные из формы.

За два урока мы полностью рассмотрели создание формы, ее элементы, атрибуты элементов формы, какие методы отправки бывают и куда данные отправляются при нажатии кнопки «Отправить». Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.

Больше практикуйтесь!

9 комментариев к записи
  • Максим

    Не понятно с атрибутом action=»handler.php», что именно здесь указывать,какой файл и для чего этот атрибут?

     
    • Юрий

      В него «полетят» данные, которые ввели в форму.

       
      • Мади

        А откуда этот файл нам брать? И каким образом он работает?

         
        • Юрий Немец

          Добрый день! В статье есть 2 архива с примерами POST и GET запросов.

           
  • WARWING

    и для кого этот способ, как сделать чтобы на почту приходило?

     
  • Анатолий

    Чтобы ушло на емейл для этого есть стандартный код специально для емейл.
    А вот как отправить на ПК, например на СОМпорт?

     
  • Никита

    А чем radio button отличается от checkbox? Выглядит одинаково в итоге прост

     

     

     
    • Сергей

      Вот тем как выглядит и отличается)) и по-моему в чекбоксе можно нескольк вариантов выбирать а в радио нет

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *