Язык HyperText Markup Language. Заработок Веб - мастеру. Вторник, 21.11.2017, 13:10







Как продвинуть сайт

Что такое форма.

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

Формы - это бланки для заполнения. К ним относятся бланки заказов, регистрационные карточки, формальные запросы, экзаменационные бланки и другое. Браузер пересылает введенную информацию по указанному электронному почтовому адресу.
Иногда форму используют для задания параметров поиска. Браузер отправляет то, что вы ввели, для обработки на сервер. Результат возвращается и выводится на экран.
Формы используются и как диалоговые окна. Сделанный Вами выбор определяет, в какую часть документа Вы попадете.

Как работает форма.


Форма работает вместе с установленным на сервере сценарным приложением, которое обрабатывает введенную информацию. Написание таких приложений требует больших знаний и опыта программирования, чем тот, который можно получить на данном сайте. Для знакомства с созданием серверных приложений знакомьтесь со специальными учебными пособиями.

Если вы не знаете никаких языков программирования, кроме HTML, проще всего обратиться за помощью к тем, кто занимается обслуживанием вашего сервера. Спросите, нет ли у них сценарного приложения, наиболее подходящего для Вашей цели.


Основные элементы программирования форм

Формы встраиваются в «тело» документа HTML. Это означает, что любой документ-форма имеет в начале и конце те же теги, которые обходимы для любого документа HTML. Форма состоит из трех основных частей: открывающего тега, объявления типов полей ввода и кнопки отправки. Открывающий тег <FORM> определяет способ, которым информация передается сценарному приложению сервера, и имя этого приложения. Типы полей ввода объявляются тегом <INPUT TYPE=...> и включают текстовые поля, флажки, переключатели, раскрывающиеся списки, а также некоторые специальные типы полей ввода. Специальный тип поля ввода HIDDEN позволяет послать сценарному приложению сервера дополнительную информацию. Кнопка отправки ( <INPUT TYPE=SUBMIT VALUE="Отправить">) используется для пересылки информации от формы к серверному приложению. Встроенное изображение может работать и как графическая кнопка отправки, и как ссылка. Кроме того, используется кнопка отмены (<INPUT TYPE=RESET УАLUЕ="Очистить">), которая служит для очистки полей ввода и восстановления значений, заданных по умолчанию. В документ HTML можно включать несколько форм, а в форму -любое количество полей ввода разных типов, но вложение форм не допускается.

<FORM METHOD="POST" ACTION="/bin/who">
<INPUT TYPE=”HIDDEN” NAME=''WhoForm" VALUE=”ShortForm”>
Фамилия: <INPUT TYPE=”TEXT" SIZE=40 NAME="Last">
<INPUT TYPE=SUBMIT VALUE="Далее">
<INPUT TYPE=RESET VALUE ="Очистить">
</FORM>

Пояснение написания формы:

  1. Начните форму с тега <FORM>.
  2. POST - это метод передачи информации сценарному приложению сервера.
  3. Укажите URL-адрес сценарного приложения сервера, которое будет обрабатывать информацию, с помощью атрибута ACTION, заключив его значение в кавычки.
  4. Если нужно переслать сценарному приложению дополнительную информацию, невидимую для пользователя, укажите тип поля ввода HIDDEN.
  5. Все остальные записи и типы полей ввода помещаются после открывающего тега.
  6. Включите в форму кнопку отправки для пересылки информации сценарному приложению сервера.
  7. Текст, который будет виден на кнопке отправке заключите в кавычки.
  8. Включите в форму кнопку отмены, которая позволит очистить форму.
  9. Текст, который будет виден на кнопке отмены залючите в кавычки.
  10. Все формы должны кончаться тегом </FORM>


Текстовые поля

Текстовые поля в формах позволяют ввести слово, фразу или набор чисел. Вводимый текст появляется в поле. Если указан тип поля «пароль» (password), введенный текст скрывается от постороннего взгляда звездочками (символ «*»).
Для каждого поля необходимо ввести его размер и название. Максимальный размер набираемого текста и значение, принятое по умолчанию, задаются дополнительными атрибутами. Это значение появляется в поле при первой загрузке формы, а также в случае щелчка на кнопке отмены.
При щелчке на кнопке отправки браузер пересылает информацию, введенную в поле. При этом к введенной информации в качестве идентификатора присоединяется название соответствующего поля.

<INPUT TYPE="TEXT"

SIZE="20" NAME="NAME" MAXLENGTH="10" VALUE="Фамилия">

<1NPUT TYPE="PASSWORD" SIZE="20" NAME="PASS" MAXLENGTH="5">

Пояснение написания формы:
  1. Начните с тега <INPUT.
  2. В качестве типа поля ввода укажите в кавычках ключевое слово TEXT.
  3. В кавычках задайте желаемое значение атрибута SIZE=, определяющего длину текстового поля.
  4. Поставьте метку, которой будут помечены данные из этого поля. В качестве метки служит название поля, заключенное в кавычки.
  5. В кавычках задайте значение атрибута MAXLENGHT=, определяющего максимальное количество символов, которое можно ввести в это поле.
  6. В кавычках задайте знаение атрибута VALUE=, определяющего тот текст, воторый появится в данном поле по умолчанию. Завершите тег закрывающим символом >.
  7. Если необходимо, что бы введенные символы появлялись на экране в виде звездочек, используйте поле ввода типа PASSWORD.


Текстовые области

Текстовые области в формах подобны текстовым полям. Однако текстовые области имеют полосы прокрутки, а текстовые поля — нет. Внутри текстовой области обычно можно напечатать больше информации, чем в текстовом поле.
Вы определяете название каждой текстовой области, а также ее- размеры по ширине и высоте. Атрибут ROWS определяет высоту, а атрибут COLS — ширину. Текст, выдаваемый по умолчанию, можно ввести как часть тега <TEXTAREA>. Этот текст появится в текстовой области, когда страница будет выведена на экран впервые.
Задав атрибут WRAP™ в теге <TEXTAREA>, можно также управлять тем, как текст переходит со строки на строку по мере ввода в текстовую область. Если задан аргумент OFF, текст продолжается как одна длинная строка, вынуждая пользователя нажимать клавишу ENTER для создания новых строк или использовать горизонтальную прокрутку для чтения текста. Если установить WRAP=VIRTUAL или WRAP=PHYSICAL, то текст автоматически разбивается на строки при достижении правой границы текстовой области, что соответствует ожиданиям большинства людей.
Если установить WRAP=VIRTUAL, то символы конца строки не будут пересылаться серверу после щелчка на кнопке отправки. Если установить WRAP=PHYSICAL, то все символы конца строки будут пересылаться серверу при отправке. При обработке информации это может оказаться важным.
Броузер пересылает информацию из текстовой области серверу при щелчке на кнопке отправки. Для идентификации этой информации к ней присоединяется название соответствующего поля.

<TEXTAREA NAME="Resume" ROWS=10 COLS=60 WRAP=VIRTUAL>

напечатайте свое резюме </TEXTAREA>

Пояснение написания формы:

  1. Откройте тег <TEXTAREA
  2. Укажите название области, заключив его в кавычки. оно будет использовано в качестве метки, которой будут помечены данные, введенные в огбласть
  3. Задайте высоту текстовой области в атрибуте ROWS=
  4. Задайте ширину текстовой области в атрибуте COLS=
  5. Укажите способ перехода текста со строки на строку в атрибуте WRAP=. Выбери аргумент VIRTUAL, PHYSICAL или OFF
  6. Между символом > и закрывающим тегом </TEXTAREA> введите текст, который должен появиться в области по умолчанию


Переключатели

Переключатели (Radio Buttons) позволяют выбрать из предлагаемого списка что-то одно. При; выборе такого переключателя автоматически снимается отметка с другого переключателя, выбранного ранее.
Для каждого такого переключателя надо указать название и значение. Выбор, предлагаемый по умолчанию, изображается при первичной загрузке формы и восстанавливается в случае щелчка на кнопке отмены. Броузер посылает название и текущее значение для каждого переключателя при щелчке на кнопке отправки.

<UL>

<INPUT TYPE="RADIO" NAME="CARD" VALUE="HTML" CHECKED> HTML <BR>

<INPUT TYPE="RADIO" NAME="CARD" VALUE="CSS"> CSS <BR>

<INPUT TYPE="RADIO" NAME="CARD" VALUE="FTP"> FTP <BR>

</UL

Пояснение написания формы:

  1. Начните с создания списка
  2. Перед каждым переключателем откройте тег <INPUT
  3. В качестве типа поля выбора укажите в кавычках RADIO
  4. Всем переключателям дайте одно и то же название (в кавычках)
  5. Текстовую метку, которую вы хотите задать каждому переключателю, задайте в качестве атрибута VALUE (в кавычках)
  6. Для переключателя, который будет выбран по умолчанию, добавьте ключевое слово CHECKED
  7. После закрывающего символа > введите текст, который должен воспроизводиться рядом с переключателем
  8. Завершите список тегом </UL


Флажки

Флажки (Check Boxes) позволяют выбрать из предлагаемого списка несколько пунктов. Когда вы переключаете такой флажок, броузер не изменяет состояние других флажков, установленных ранее.
Для каждого флажка надо указать название и значение. Выбор, предлагаемый по умолчанию, изображается при первичной загрузке формы и восстанавливается в случае щелчка на кнопке отмены. Броузер посылает название и значение для каждого установленного флажка при щелчке на кнопке отправки.

<UL>

<INPUT TYPE="CHECKBOX" NAME="V1" VALUE="Yes" CHECKED> HTML <BR>

<INPUT TYPE="CHECKBOX" NAME="V2" VALUE="Yes"> CSS <BR>

<INPUT TYPE="CHECKBOX" NAME="V3" VALUE="Yes"> FTP <BR>

</UL>

Пояснение написания формы:

  1. Начните с создания списка
  2. Перед каждым флажком откройте тег <INPUT
  3. В качестве типа поля ввода укажите в кавычках CHECKBOX
  4. Всем флажкам задайте названия (в кавычках)
  5. Для всех флажков задайте одинаковый текст в качестве аргумента атрибута VALUE=
  6. После закрывающего символа > введите текст, который должен быть виден рядом с флажком
  7. Закончите список тегом </UL>


Раскрывающиеся списки

В дополнение к переключателям и флажкам формы HTML предлагают еще два хорошо известных метода выбора. Это раскрывающиеся списки, более известные как выпадающие меню, и списки с множественным выбором.
Выпадающие меню, подобно переключателям, позволяют выбрать только один пункт из списка. Первый вариант, встретившийся в документе HTML, является выбором, принятым по умолчанию. Он устанавливается при первой загрузке документа или при щелчке на кнопке отмены. Однако с помощью атрибута SELECTED можно заменить значение, принятое по умолчанию, на другое значение, взятое из списка.
Списки с множественным выбором позволяют выбрать один или несколько пунктов. По умолчанию ни один из вариантов не отмечается при загрузке формы или щелчке на кнопке отмены. Однако с помощью атрибута SELECTED вы можете установить отметку, принятую по умолчанию для любых пунктов списка.
Текст каждого отмеченного пункта используется как его значение в выпадающих меню и списках с множественным выбором. Броузер посылает название и значение каждого отмеченного пункта при щелчке на кнопке отправки.

<SELECT NAME="Level">

<OPTION> Легкий

<OPTION SELECTED> Средний

<OPTION> Слоный

</SELECT>

Пояснение написания формы:

  1. Откройте тег <SELECT
  2. Укажите название выпадающего меню в кавычках
  3. Перед текстом каждого пункта выпадающего меню поставьте тег <OPTION>. Что бы по умолчанию выбирался не первый пункт, поставьте атрибут SELECTED после OPTION в нужном вам варианте
  4. Закончите закрывающим тегом </SELECT>

    <SELECT MULTIPLE NAME="Tests" SIZE="3"

    <OPTION> Алгебра

    <OPTION SELECTED> Русский

    <OPTION> Биология

    <OPTION> Английский

    </SELECT>

    Пояснение написания формы:

    1. Откройте тег <SELECT Для списков с множественным выбором добавьте ключевое слово MULTIPLE
    2. Укажите название списка в кавычках
    3. В качестве значения атрибута SIZE укажите размер окна списка, заключив его в кавычки
    4. Перед текстом каждого пункта списка с множественным выбором поставьте тег <OPTION>. Для пунктов, выбираемых по умолчанию, введите атрибут SELECTED в тег <OPTION>
    5. Закончите закрывающим тегом </SELECT>




  • Развлечения: смотреть ТВ слушать Радио онлайн
  • Для детей: раскраски, игры, мультфильмы
  • Создание сайтов в Донецке и области
  • Русские шашки для детей. Интеллектуальное развитие ребёнка в Донецке.
  • Магазины продажи цветов,цветы продажа Киев,продажа цветов цены Борисполь
  • Интернет магазин климатической техники «КлимТехМаркет». Кондиционеры, вентиляция, отопление, водоснабжение, очистители и увлажнители.
  • Строительство бассейнов в Донецке и области
  • Спортивно - кинологический клуб Костюка
  • Продажи цветов,цветы продажа в Макеевке,продажа цветов цены Макеевка
  • Игры всех жанров для компьютера
  • Всё о рыбалке
  • Сайт Донецкого художника Куликова В.В.
  • Продажа недорогой детской и женской одежды в Киеве и области
  • Рефераты




  • WMlink.ru - рекламный брокер

     


    Яндекс.Метрика
    45 Rus © 2017 Создано при помощи