W e b - м а с т е р у: 
  В с е   о   х о с т и н г е: 
  Р е к о м е н д у е м: 
  Р е к л а м а: 





  Р е к л а м а: 











  Главная > Уроки по HTML в примерах > HTML формы (часть I)

Google   
 


Профессиональный хостинг от REG.RU - от 99 рублей за месяц!!!
  • 10 Гб дискового пространства
  • Бесплатный трафик
  • До 30 размещенных сайтов на одном хостинге
  • Неограниченное количество почтовых ящиков и многое другое!

>> Смотреть подробнее






HTML Формы (часть 1)

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

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

Форма состоит из элементов формы заключенных между тегами <Form> и </Form>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой.

Элемент Form
Используется для создания заполяемой формы. Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.

Имеет атрибуты:
Атрибут: Name

Определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм.
Атрибут: Action
Обязательный параметр. Определяет URL, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к скрипту сервера, обслуживающему данную форму.
Атрибут: Method
Определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST. Хотя способ GET принят значением по умолчанию, в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
Атрибут: Enctype
определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".
Атрибут: Target
определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре "Target" элемента "A".
Со всеми атрибутами, элемент "Form" записывается так;

<Form method="get" action="http://site.ru/cgi-bin/form.pl" name="form1" target="_blank">
Элементы формы
</Form>

Или для отправки по электронной почте;

<Form method="get" action="mailto:info@site.ru" name="form1" target="_blank">
Элементы формы
</Form>



Элемент Textarea
Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле.

Имеет атрибуты:
Атрибут: Name

Обязательный параметр. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.
Атрибут: Rows
Определяет количество строк текста, видимых на экране.
Атрибут: Cols
Определяет ширину текстового поля - в печатных символах.
Атрибут: Wrap
Определяет способ переноса слов в заполняемой данной заполняемой форме.

Возможные значения:
Значение: Off

При этом значении перенос слов не происходит (значение по умолчанию)

Значение: Virtual

При этом значении перенос слов не происходит (значение по умолчанию)

Значение: Physical

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

Записывается так:

<FORM>
<TEXTAREA NAME="readonly_text" WRAP="virtual" COLS="40" ROWS="3" readonly>
Попробуйте изменить содержимое данного поля.
</TEXTAREA>
</FORM>

Эффект:

Атрибут: Disabled
Данный атрибут указывает на то, что данное поле является неактивным и в нем таже запрещено изменение содержимого формы. Этот атрибут не имеет значений, являясь просто флагом внутри тега "Textarea".

Записывается так:

<FORM>
<TEXTAREA NAME="readonly_text" WRAP="virtual" COLS="40" ROWS="3" disabled>
Поле как бы закрыто пеленой. Попробуйте изменить содержимое данного поля.
</TEXTAREA>
</FORM>

Эффект:

В случае если текст помещенный в поле не помещается в указанные размеры поля, полоса прокрутки все равно не появится. Так как поле является не активным.



Элемент Select
Элемент 'Select" создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента "Form" и иметь как начальный, так и конечный тэги. Содержит несколько элементов "Option".

Имеет атрибуты:
Атрибут: Multiple

Дает возможность выбора нескольких пунктов меню. Если этот атрибут не установить то можно выбрать только один пункт меню, что является значением по умолчанию. Не имеет значений и является флагом.
Атрибут: Name
Определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом "Option".
Атрибут: Size
Определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.


Элемент Option
Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Конечный тег не обязателен.

Имеет атрибуты:
Атрибут: Selected

Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом "Selected" может быть помечен лишь один пунктов меню.
Атрибут: Value
Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра "Name" в элементе "Select".

Полностью элемент "Select" записывается так:

<form action="Url сценария" method="get" name="select">
<select name="menu" size="1">
<option selected value="1">Первый пункт
<option value="2">Второй пункт
<option value="3">Третий пункт
<option value="4">Четвертый пункт
</select>
</form>

Эффект:

Или:

<form action="Url сценария" method="get" name="select">
<select multiple name="menu" size="3">
<option selected value="1">Первый пункт
<option value="2">Второй пункт
<option value="3">Третий пункт
<option value="4">Четвертый пункт
</select>
</form>

Эффект:



Продолжение »»





[Рекомендовать другу]  [Содержание  


Вывоз мусора в Уфе на автомобилях ГАЗель, Услуги грузчиков, Утилизация старой мебели


Щелкните здесь, чтобы узнать, как повысить тИЦ и Page Rank Вашего сайта. Бесплатно!

© Rusws™ 2007-2012. Разработка и техническая поддержка: RUSWS.RU
Хостинг от SpaceWeb

Перепечатка любых материалов с портала www.rusws.ru только с письменного разрешения администрации и с размещением ссылки на портал!

Техническая поддержка: rusws[собака]mail.ru
Rambler's Top100