Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо, отправки електронной почты.
Принцип работы форм следующий: посетитель, зашедший к вам на страничку заполняет форму, а после нажатия определенной кнопки форма берет данные из заполненых полей и отправляет их в назначенное место.
Формы размещаются между тегами <FORM></FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег <FORM> может содержать следующие атрибуты:
| ACTION |
Обязательный атрибут. Определяет, где находится обработчик формы. |
| METHOD |
Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET. |
| ENCTYPE |
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. |
Для внесения информации пользователем в форму используется элемент <INPUT> Это и есть поля, в которые пользователь вводит информацию. Каждый элемент <INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов <INPUT>:
| TYPE=text |
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):
<INPUT TYPE=text SIZE=20 NAME=User VALUE=\"LENIN INC\">
Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить. |
| TYPE=password |
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):
<INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10>
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. |
| TYPE=radio |
Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:
<INPUT TYPE=radio NAME=Question VALUE=\"Yes\" CHECKED> Да
<INPUT TYPE=radio NAME=Question VALUE=\"No\"> Нет
<INPUT TYPE=radio NAME=Question VALUE=\"Possible\"> Возможно
Да
Нет
Возможно
Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible. |
| TYPE=checkbox |
Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:
<INPUT TYPE=checkbox NAME=Comp VALUE=\"CPU\"> Процессоры
<INPUT TYPE=checkbox NAME=Comp VALUE=\"Video\" CHECKED> Видеоадаптеры
<INPUT TYPE=checkbox NAME=Comp VALUE=\"Scan\"> Сканеры
<INPUT TYPE=checkbox NAME=Comp VALUE=\"Modem\" CHECKED> Модемы
Процессоры
Видеоадаптеры
Сканеры
Модемы
Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem. |
| TYPE=hidden |
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело.
<INPUT TYPE=hidden NAME=version VALUE=\"1.1\">
Определяет скрытую переменную version, которая передается обработчику со значением 1.1. |
| TYPE=submit |
Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:
<INPUT TYPE=submit VALUE=\"Отправить\">
|
| TYPE=reset |
Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:
<INPUT TYPE=reset VALUE=\" Сброс \">
|
Формы могут содержать поля для ввода большого текста <TEXTAREA>:
<TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA>
Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами <TEXTAREA></TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом <SELECT> (содержит обязательный атрибут NAME, определяющий имя меню) и завершается закрывающимся </SELECT>. Между ними находятся теги <OPTION>, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <OPTION> может включать атрибут selected, показывающий, что данный элемент выбран/отмечен по умолчанию.
<SELECT NAME=\"имя\">
<OPTION VALUE=\"option_1\" selected>текст 1
<OPTION VALUE=\"option_2\">текст 2
<OPTION VALUE=\"option_n\">текст n
</SELECT> |
|
Тег <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE=число.
<SELECT MULTIPLE SIZE=3 NAME=\"имя\">
<OPTION VALUE=\"option_1\" selected>текст 1
<OPTION VALUE=\"option_2\">текст 2
<OPTION VALUE=\"option_n\">текст n
</SELECT> |
 |
|
 |
 |
|
|
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст. |
|
|
|
Большинство HTML документов имеют заголовок. Для его создания используют теги , где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера... |
|
|
|
Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно... |
|
|
|
Для вставки изображений в HTML документ используется следующая конструкция (представлена полная)... |
|
|
|
Карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие... |
|
|
|
Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки... |
|
|
|
Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами . Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные... |
|
|
|
Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д. |
|
|
|
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя... |
|
|
|
Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо, отправки електронной почты. |
|
|
 |
 |
 |
 |
|
|