Создание форм HTML

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:

Элемент <FORM>.
Элемент <INPUT>.
Элемент <TEXTAREA>.
Элемент <SELECT>.
Элемент <OPTION>.
Элемент <OPTGROUP>.
Элемент <ISINDEX>.
Элемент <BUTTON>.
Элемент <LABEL>.
Элемент <FIELDSET>.
Элемент <LEGEND>.

Элемент <FORM>.

Элемент <FORM> является необходимым условием для всех форм.
Он может иметь следующие атрибуты:

method- Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
action- Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
enctype- Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария:

<FORM method="get" или "post" action="URL сценария" >Отправить</FORM>

Синтаксис формы для почты:

<FORM method="get" или "post" action="mailto:адрес" >Отправить</FORM>

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

Синтаксис:

<FORM action="mailto:имя@домен.ru?subject=Comment from Home Page" method="post" enctype="text/plain">
Комментарии:
<TEXTAREA type="text" NAME="комментарий" ROWS=15 COLS=25>объект</TEXTAREA>
Имя:
<INPUT type="text" NAME="имя" SIZE="15">
E-mail:
<INPUT type="text" name="e-mail" size="15" maxlength="360">
<INPUT type="reset" VALUE=Сброс >
<INPUT type=SUBMIT VALUE=Послать> </FORM>

Пример:
Комментарии:
Имя:
E-mail:

наверх

Элемент<INPUT>

. Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:

TEXT

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

Атрибут может иметь значения:

maxlength- Задаёт максимально допустимую длину вписываемого значения в символах.
size- Задаёт максимально допустимую длину поля в символах.
value- Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">

Пример:

PASSWORD
Однострочное поле, в котором вместо вводимых символов отображаются звездочки.

Элемент может иметь атрибуты:

maxlength- Задаёт максимально допустимую длину вписываемого значения в символах.
size- Задаёт максимально допустимую длину поля в символах.
value- Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">

Пример:

HIDDEN

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

Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:

<INPUT type="HIDDEN" name="file" value="anyfile.html">

CHECKBOX

Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички.
Элемент может иметь атрибуты:

checked- Задаёт начальный статус флажка по умолчанию.
value- Задаёт значение по умолчанию, которое можно менять.

Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>

Пример:

RADIO

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

Синтаксис:

<INPUT type="radio" name="payment_type" value="visa">
Mastercard
<INPUT type="radio" name="payment_type" value="mastercard">
American Express
<INPUT type="radio" name="payment_type" value="AmEx" checked>

Пример:

- Visa
- Mastercard
- American Express

SUBMIT

Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>.
C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.

Синтаксис:

Пример:

RESET

Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.

Синтаксис:

Пример:

IMAGE

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

src- Задаёт URL файла с изображением.
align- Задаёт выравнивание изображения относительно текста при помощи значений
TOP,
MIDDLE
BOTTOM.
name- Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.

Синтаксис: <INPUT type="image" src="knopka.gif">

Пример:

BUTTON

Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.

Синтаксис:

<INPUT type="button"value="кнопка">
Пример:

FILE

Создает управляющий элемент выбор файла.

Синтаксис:

Пример:

ACCESSKEY

Задает кнопку, при нажатии которой происходит обработка поля. Синтаксис:

Пример: нажмите Alt+a:

Задает имя для ссылки.

Синтаксис:

SIZE

Задает ширину элемента в пикселях.

Синтаксис:

DISABLED

Отключает возможность изменять содержимое поля или положение кнопки.

Синтаксис: <INPUT "disabled">

Пример:

наверх
Элемент <TEXTAREA>.

При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:

NAME- задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
ROWS- задаёт высоту области в строках.
COLS- задаёт ширину области в символах.

Синтаксис:

<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM>

Пример:

наверх
Элемент <SELECT>.

Может принимать форму раскрывающегося списка или меню элементов.
Имеет вложенный тэг <OPTION> и атрибуты:

NAME- задаёт имя.
SIZE- задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
multiple- задаёт возможность одновременного выбора нескольких значений.

наверх
OPTION Элемент <OPTION>.

Элемент же <OPTION> задает возможные варианты выбора меню <SELECT>

Синтаксис:
<OPTION value="n" selected>значение
имеет атрибуты:

selected- задаёт изначально выбранное слово.
value-задаёт значение выбранного слова для сценария.

Синтаксис:

<H3>Выбери нужное</H3>
<SELECTmultiple>
<OPTION value=a>Первый</OPTION>
<OPTION value=b>Второй</OPTION>
<OPTION value=c>Третий</OPTION>
<OPTION value=d>Четвертый</OPTION>
</SELECT>

Пример:1

Выбери нужное

Cинтаксис:

<SELECT size=1>
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</SELECT>

Пример:2

наверх
Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

<SELECT size=1>
<OPTGROUP label="Первая группа">
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
</OPTGROUP>
<OPTGROUP label="Вторая группа">
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</OPTGROUP>
</SELECT>

Пример:

наверх
Элемент <ISINDEX>.

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

Синтаксис:

<ISINDEX prompt=" строка для ввода критерия поиска"> Пример:

Допустим что на текущей странице задан базовый URL при помощи элемента <BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде:

http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен. -------------------------------------------------------------------------------- Строка для ввода критерия поиска --------------------------------------------------------------------------------

наверх
Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста.

Синтаксис: <BUTTON ><IMG src=...>..</BUTTON>

name- задает имя элементу.
value- задает значение элементу.
type- при использовании в качестве кнопки принимает значения:
button,
submit
reset.
disabled- делает недоступным данный элемент
tabindex- определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
accesskey- задает клавишу доступа.
id- задает имя для ссылки.

Пример:

наверх
Элемент <LABEL>>.

Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы. Поддерживает атрибут for, который связывает элемент <LABEL> с другим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.

Синтаксис:
<FORM action="URL" method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">Имя</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Фамилия</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

Пример:

Имя
Фамилия

Синтаксис:

<FORM action="URL" method="post">
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname">
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname">
<LABEL for="e-mail">e-mail: </LABEL>
<INPUT type="text" id="e-mail">
<INPUT type="radio" name="sex" value="Мужской">Мужской
<INPUT type="radio" name="sex" value="Женский">Женский
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</FORM>

Пример:2

Имя:
Фамилия:
e-mail:
Мужской
Женский

наверх
Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать элементы формы.

Синтаксис: <FIELDSET> имя</FIELDSET>

наверх
Элемент <LEGEND>.

Элемент позволяет давать наименования логическим группам элементов формы.

Синтаксис: <LEGEND> имя</LEGEND> Пример:

наверх

Далее мы рассмотрим лишь некоторые
Цвета определяемые с помощью английских названий и числового кода. которые применяются при оформлении Web-сраницы.