Перейти на главную   
  helloworld.ru - документация и книги по программированию  
helloworld.ru - документация и книги по программированию
    главная     хостинг    
Поиск по сайту:  
Смотрите также
Языки программирования
C#
MS Visual C++
Borland C++
C++ Builder
Visual Basic
Quick Basic
Turbo Pascal
Delphi
JavaScript
Java
PHP
Perl
Assembler
AutoLisp
Fortran
Python
1C

Интернет-технологии
HTML
VRML
HTTP
CGI
FTP
Proxy
DNS
протоколы TCP/IP
Apache

Web-дизайн
HTML
Дизайн
VRML
PhotoShop
Cookie
CGI
SSI
CSS
ASP
PHP
Perl

Программирование игр
DirectDraw
DirectSound
Direct3D
OpenGL
3D-графика
Графика под DOS

Алгоритмы
Численные методы
Обработка данных

Сис. программирование
Драйверы

Базы данных
MySQL
SQL

Другое

Хостинг


Друзья
demaker.ru
Реклама

Лучший хостинг. Аренда серверов




helloworld.ru

Формы

Понятие формы
Работа с тэгами форм
Тэг <FORM>
Тэг <TEXTAREA>
Тэг <SELECT>
Тэг <INPUT>
Разработка форм

Понятие формы

Формы являются наиболее популярным способом интерактивного взаимодействия во Всемирной паутине. С помощью HTML можно создавать простые формы, предполагающие ответы типа “да” и “нет”, можно разрабатывать сложные формы для заказов или для того, чтобы получить от читателей какие-либо комментарии и пожелания.

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую либо опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Скрипт - это короткая программа, специально созданная для обработки каждой формы. Существует также возможность создавать формы непосредственно в окне браузера читателя.

Работа с тэгами форм

  • <TEXTAREA> - определяет поле, в которое пользователь вводит многострочную текстовую информацию

  • <SELECT> - позволяет пользователю сделать выбор в окне с полосой прокрутки либо в раскрывающемся меню

  • <INPUT> - обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы.

Любое количество этих тэгов может быть размещено в контейнере FORM.

Тэг <FORM>

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

  • ACTION - определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма.

  • METHOD - указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение POST, тогда информация посылается отдельно от URL. Если указано значение GET, информация посылается вместе с URL.

Тэг <TEXTAREA>

Этот тэг предназначен для построения поля для ввода многострочной текстовой информации. Тэг <TEXTAREA> имеет следующие атрибуты:

  • NAME - обязательный атрибут, определяющий название информации.

  • ROWS - устанавливает высоту поля, т.е. число строк в нем.

  • COLS - устанавливает ширину поля, т.е. число столбцов в нем.

Между тэгами <TEXTAREA> и </TEXTAREA> можно разместить любой текст, выводящийся в поле по умолчанию.

Ниже приведен фрагмент HTML - кода и его интерпретация браузером

HTML - код 

Интерпретация

<FORM METHOD="POST">
   <P>
         <TEXTAREA  NAME="S1"
           ROWS="3" COLS="12">
             DefaultText
         </TEXTAREA>
   </P>
</FORM>

Тэг <SELECT>

Этот тэг используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Как и тэг <TEXTAREA>, тэг <SELECT> требует обязательного определения имени в атрибуте NAME. Ниже перечислены атрибуты тэга <SELECT>:

  • NAME - определяет название информации

  • SIZE - определяет вертикальный размер окна для опций выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано значение больше 1, то опции выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем добавляются пустые поля.

  • MULTIPLE - этот атрибут позволяет производить выбор сразу нескольких опций.

Список опций включается в контейнер <SELECT> при помощи тэгов <OPTION>. Этот тэг имеет два атрибута:

  • VALUE - указывает значение, возвращаемое программе обработки в случае выбора опции пользователем

  • SELECTED - указывает на опцию, выделенную по умолчанию.

Ниже приведен фрагмент HTML - кода и его интерпретация браузером

HTML - код 

Интерпретация

<FORM METHOD="POST">
<P>
      <SELECT NAME="D1" SIZE="1">
        <OPTION VALUE="1">Item1</OPTION>
        <OPTION VALUE="2">Item2</OPTION>
        <OPTION SELECTED VALUE="3">Item3</OPTION>
        <OPTION VALUE="4">Item4</OPTION>
        <OPTION VALUE="5">Item5</OPTION>
      </SELECT>
</P>
</FORM>

Тэг <INPUT>

Тэг <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тэгом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и очистки формы (Reset, Clear).

Тэг <INPUT> располагает следующими атрибутами:

  • NAME - определяет имя данных. Является обязательным для всех видов данных, кроме представляемых по нажатию кнопок Submit и Clear

  • SIZE - указывает размер поля в символах

  • MAXLENGTH - определяет максимально возможное число символов, вводимых в поле

  • VALUE - для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке

  • CHECKED - устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тэгов <INPUT> не употребляется

  • TYPE - устанавливает тип поля.

Атрибут TYPE тэга <INPUT> может принимать следующие значения:

  • TEXT - является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE

  • PASSWORD - Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE

  • CHECKBOX - Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции “галочкой”. Может использоваться совместно с атрибутами NAME (обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных

  • RADIO - позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Также используются атрибуты VALUE и CHECKED

  • RESET - позволяет создать кнопку для очистки формы. Атрибут VALUE может быть использован здесь для наименования этой кнопки ( по умолчанию кнопка имеет надпись RESET).

  • SUBMIT - Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой - скриптом. В атрибуте VALUE можно указать название для этой кнопки.

Ниже приведены фрагменты HTML - кода и их интерпретация браузером

TYPE (тип поля) HTML - код Интерпретация
TEXT <FORM METHOD="POST">
   <P>
      <INPUT TYPE="TEXT"  NAME="T1"
                   SIZE="20"VALUE="InitialText">
  </P>
</FORM>

PASSWORD <FORM METHOD="POST">
   <P>
      <INPUT TYPE="PASSWORD"     
                   NAME="T2" SIZE="20"
                         VALUE="InitialText">
   </P>
</FORM>

CHECKBOX <FORM METHOD="POST" >
   <P>
      <INPUT TYPE="CHECKBOX"   
                NAME="C1" VALUE="ON"   
                CHECKED>Check1<BR>
      <INPUT TYPE="CHECKBOX"   
                NAME="C2" VALUE="ON1">   
                Check2<BR>
       <INPUT TYPE="CHECKBOX"    
                NAME="C3" VALUE="ON">     
                Check3
   </P>
</FORM>

 

Check1
Check2
Check3

RADIO

<FORM METHOD="POST">
   <P>
      <INPUT TYPE="RADIO" VALUE="V1"           CHECKED NAME="R1">Radio1<BR>
      <INPUT TYPE="RADIO" NAME="R1"           VALUE="V2">Radio2<BR>
      < INPUT TYPE="RADIO" NAME="R1"           VALUE="V3">Radio3<BR>
   </P>
</FORM>

Radio1
Radio2
Radio3

SUBMIT <FORM METHOD="POST">
   <P>
       <INPUT TYPE="SUBMIT"  
         VALUE="Submit" NAME="B1">
   </P>
</FORM>

Разработка форм

Для более красивого расположения элементов тэга <FORM> и более удобного их восприятия пользователями внутри тэга <FORM> можно использовать различные тэги HTML, например: перевода строки (<BR>), предварительно отформатированного текста (<PRE>), использовать таблицы, списки.


[ Оглавление ]









helloworld.ru © 2001-2021
Все права защищены
Rambler's Top100