Что такое HTML?





Урок7. Работа с формами.


  • Назначение форм.

  • Формы служат для обмена данными между клиентом и веб-сервером по протоколу CGI. Другими словами говоря, вы заполняете форму нажимаете кнопку, и ваши данные уходят на сервер в виде: [имя_переменной]=[значение_переменной].
    CGI - программа на сервере обрабатывает эти данные и выполняет в зависимости от результата какие-либо действия. Это может быть обработка сообщения конференции, подписка на новости сайта, работа с базой данных посетителей сайта и т.д.

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

  • Задание формы.

  • Форма задается тэгами <form></form> и состоит из управляющих элементов (текстовое поле, кнопка, список и т.д.).

    Атрибуты тэга <FORM>:
    action="URL"URL-адрес CGI-программы, выполняющей обработку данных.
    methodСпособ передачи данных веб-серверу. Может принимать значения:
    • get -программа CGI, указанная в параметре ACTION, получит данные из формы через переменную среды с именем QUERY_STRING;
    • post -программа CGI получит данные из формы через стандартный поток ввода;
    enctypeТип передаваемых данных данных. Значение по умолчанию - application/x-www-form-urlencoded.

  • Создание списка.

  • Список создается тэгом <select></select>

    Атрибуты тэга <SELECT>:
    nameимя списка, которое передается веб-серверу в паре с выбранной строкой
    sizeвысота списка в строках. По умолчанию список раскрывающийся т.е. видна только одна строка.

    Для записи строк в список используется тэг <OPTION>.
    Строка, отмеченная параметром selected, будет выбрана в списке по умолчанию.

    Пример:
    Пример списка:
    <select name="months" size="3">
    <option>Январь
    <option>Февраль
    <option selected>Март
    </SELECT>

    Пример раскрывающегося:
    <select name="months">
    <option>Январь
    <option>Февраль
    <option selected>Март
    </SELECT>

  • Поле для ввода многострочного текста.

  • Создается тэгом <textarea></textarea>

    Атрибуты тэга <TEXTAREA>:
    nameимя поля
    rowsЧисло строк по вертикали.
    colsЧисло символов по горизонтали.

    Пример:
    Текст программы:
    <textarea name="multytext" rows="4" cols="50">

    Здесь
      введен
        многострочный
          текст.
     
    <textarea>

    Результат выполнения:

  • Другие элементы управления.

  • Создаются с помощью тэга <input></input>

    Атрибуты тэга <INPUT>:
    typeТип элемента управления.
    nameИмя элемента управления.
    valueНачальное значение или состояние элемента управления.
    checkedУстановка начального значения переключателей.
    sizeШирина текстового поля в символах. По умолчанию 20 символов.
    maxlenghtМаксимальное количество символов в текстовом поле.
    alignВыравнивание текста, около формы.
    srcURL графического изображения, если оно используется в элементе управления

    Параметры атрибута <TYPE>:
    textоднострочное поле для ввода текста.
    passwordаналогичен элементу управления text, но символы, вводимые в этот элемент управления, не отображаются на экране.
    checkboxЭлемент управления переключатель.
    radioЭлемент управления радиокнопка.
    fileЭлемент управления для выбора и передачи файлов.
    buttonОрган управления кнопка.
    submitКнопка для пересылки данных из заполненной формы веб-серверу.
    resetКнопка для сброса содержимого формы в начальное значение.
    imageЗамена кнопки submit графическим изображением.
    hiddenСкрытое текстовое поле.

    Примеры:
    Текстовое поле:
    <input name="Text_Exmpl" type="text" value="текстовое поле">

    Поле ввода пароля:
    <input name="Psw_Exmpl" type="password" value="password">

    Переключатель:
    <input name="ChkBox_Checked" type="checkbox" checked>

    <input name="ChkBox_Unchecked" type="checkbox">

    Группа радиокнопок:
    <input name="radio_btn" type="radio" value="rb1">
    <input name="radio_btn" type="radio" value="rb2" checked>
    <input name="radio_btn" type="radio" value="rb3">

    Отдельные радиокнопки:
    <input name="radio_btn1" type="radio" value="rb1">
    <input name="radio_btn2" type="radio" value="rb2" checked>
    <input name="radio_btn3" type="radio" value="rb31">

    Произвольная кнопка:
    <input name="Btn" type="button" value="Кнопка">

    Графическое изображение вместо кнопки:
    <input name="ImgBtn" type="image" src="url" border="0">

    При нажатии мышью на такую кнопку CGI программе будут переданы две переменные : name.x (где name - имя кнопки, а x - x- координата точки нажатия в пикселях), и name.y. Начало координат - левый верхний угол рисунка. Все значения атрибута VALUE игнорируются. Картинка задается тэгом < SRC> и по синтаксису совпадает с тэгом <IMG>.

    Передача файлов:
    Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов! Например:

    <FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD="POST">
    Отправить данный файл: <INPUT NAME="myfile" TYPE="file"> <P>
    <INPUT TYPE="submit" VALUE="Отправить файл">
    </FORM>

    Отправить данный файл:

  • Создание работающих форм без написания CGI-обработчика.

  • HTML имеет механизм пересылки содержимого формы по электронной почте. Для этого в тэге <FORM>, укажем следующие значения атрибутов:
    method="post", action="mailto:adress@domain.ru?subject=Message", enctype="text/plain".
    В этом случае произойдет передача данных формы по электронному адресу "adress@domain.ru" в незакодированном "text/plain" виде. Заметьте, что параметром ?subject можно указать почтовой программе тему (Subject) сообщения

    Пример работающей формы:

    Следующая форма отправит содержимое формы на мой eMail:
    Чтобы не захламлять форму, я не стал указывать в тексте тэги таблицы оставив лишь тэги, относящиеся к форме.
    <form name="sendtome" method="post" action="mailto:valery@ropnet.ru?subject=Message" enctype="text/plain">
    Ваш возраст
    <input style="width:100px;border:2px solid red;"name="old" type="text">
    Откуда Вы узнали про этот сайт
    <select name="Where_You_Find_This_Site" cols="30">
    <option>из поисковой системы
    <option>нашел по ссылкам
    <option>случайно
    </select>
    Следует ли дальше продолжать уроки HTML?
    да
    <input name="To_Continue_Lessons" type="radio" value="yes" checked>
    нет
    <input name="question" type="radio" value="no">
    не знаю
    <input name="question" type="radio" value="hz">
    Какие разделы Вы хотели бы видеть еще?
    JavaScript
    <input name="js" type="checkbox" value="yes">
    MySQL
    <input name="MySQL" type="checkbox" value="yes">
    Perl
    <input name="perl" type="checkbox" value="yes">
    VBScript
    <input name="vbs" type="checkbox">
    DHTML
    <input name="dhtml" type="checkbox" value="yes">
    Никакие
    <input name="no" type="checkbox" value="yes">

    <input type="submit" value="Проголосовать">
    <input type="reset" value="Обнулить">
    </FORM>

    Ваш возраст:
    Откуда Вы узнали
    про этот сайт
    Следует ли дальше продолжать уроки HTML?
    да  
    нет  
    не знаю  
    Какие разделы Вы хотели бы видеть еще?
    JavaScriptMySQL
    PerlVBScript
    DHTMLНикакие

    Письмо придет приблизительно такого содержания:
    old=33
    Where_You_Find_This_Site=из поисковой системы
    To_Continue_Lessons=yes
    js=yes

    Еще один способ заставить форму работать - применить к ней обработку событий JavaScript. При нажатии на кнопку в ней возникает событие "OnClick", которое можно обработать написав функцию-обработчик.
    Например, создадим простейшую форму, складывающую два числа по нажатию кнопки.
    Создадим форму для ввода чисел:
    <FORM name="calc">
    <input name="val1" type="text" value="0" size="4">+
    <input name="val2" type="text" value="0" size="4">
    <input type="button" value="  +  " onclick="adding(val1, val2)">
    <input name="is" type="text" value="0">
    </FORM>

    И напишем функцию, получающую аргументы из полей val1 и val2 и выводящую результат в поле is:
    <script language="JavaScript"> function adding(val1, val2)
    {
    document.calc.is.value=eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value));
    }
    </script>

    Теперь попробуйте сложить два числа используя эту форму.

    +










     |  Анимация, картинки  |  Астрология, гороскопы  |  Аудиокниги  |  Вебкамеры России  |  Вебкамера на МКС  |  Выживание  |  Гороскопы  |  Заговоры  |  Иллюзии  |  Игры  |  Очищение  |  Календарь  |  Конвертер валют Мира  |  Лунный календарь  |  Мировая пресса  |  Мировая статистика  |  Население Земли  |  Народная медицина  |  Нетрадиционная медицина  |  Новости в России и Мире  |  Онлайн полеты самолётов  |  Омоложение  |  Очищение  |  Погода в России и Мире.  |  Поздравления  |  Прогнозы по дате рождения.  |  Сейсмический монитор  |  Сонник.  |  Страны Мира.  |  Телевидение  |  100 лучших фильмов  |  Улыбнись  |  Фильмотека  |  Ретро музыка  |  Ретро фильмы  |  Радио онлайн  |  Мини TV  |  Лунный день  |  Вечный календарь  |