Списки и интерактивные формы на Web-страницах

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

Что касается HTML-кода, то нумерованный список располагается в контейнере <OL>, где каждый элемент списка определяется непарным тегом <LI>.

Ну а что касается нумерации, то по умолчанию она задается арабскими цифрами. Но она может быть и другой, например, в качестве нумерующих элементов могут выступать римские числа, латинские буквы и т.д. Для этого с помощью атрибута TYPE тэга <OL> можно задавать нужный нам тип нумерации. Так для нумерации с помощью прописных римских чисел используют значение "I", для строчных букв используют значение "а".

Маркированные списки - это списки, в которых элементы списка идентифицируются с помощью специальных символов (маркеров).

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

Заметим, что нумерованные и маркированные списки в большинстве браузеров выделяются небольшим отступом.

Итак, мы с вами разобрали только два вида списков: нумерованный и маркированный, остался у нас последний. Это список определений. Данный список позволяет составлять перечни определений в словарной форме.

Этот список находится в контейнере <DL>. Внутри этого контейнера с помощью одинарного тега <DT> записываются термины, а определения, которые следуют за каждым термином, с помощь одинарного тэга <DD>.

Давайте Web-страницу "Словарь" мы представим в виде словаря двух терминов:

Для этого в нашей исходной структуре мы напишем заглавие страницы. Это словарь. Далее в контейнере body, где размещается содержимое страницы, разместим наш список с помощью контейнера <DL>. Далее запишем термин HTML с помощью одиночного тега <DT> и его определение с помощью тега <DD>.

Далее аналогичные действия произведем и с термином CSS.

Если же нам нужно создать многоструктурный список, то существует такая возможность, как создавать вложенные списки, и при этом каждый список может отличаться от основного.

Со списками мы разобрали, теперь перейдем к формам. Но прежде чем мы начнем разговор об их способах размещения, попробуем выяснить, что же такое «Интерактивная форма».

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

Итак, для создания интерактивных вэб-страниц, обеспечивающих обратную связь, используют специальные формы. Форма - это набор элементов, таких как поля ввода, поля выбора, переключатели.

Такая форма создается с помощью тега <form>.

Первое с чего мы начнем - это текстовые поля. Как вы уже знаете, текстовые поля предназначены для ввода текстовой информации.

Текстовое поле создается с помощью одиночного тега <INPUT>. Этот тег имеет несколько атрибутов: это атрибут TYPE со значением "text", атрибут NAME, который является обязательным и служит для идентификации полученной информации, и атрибута SIZE. Этот атрибут задает длину поля в символах, т.е. его значением является число.

Если же мы хотим, чтобы наши поля располагались более удобно и красиво, не забываем переводить строки, это легко делается с помощью тега <br>.

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

Что касается переключателей, то они создаются с помощью тега «INPUT». Он содержит такие атрибуты как TYPE, NAME, VALUE. Атрибуту TYPE соответствует значение ="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME.

Что касается атрибута VALUE, то ему присваивается значение вариантов, один из которых нужно выбрать. Значение этого атрибута должно быть уникальным для каждой радиокнопки, так как при ее выборе именно оно передается серверу.

Теперь разберемся с флажками. Их удобно создавать, если посетителю необходимо из предложенного списка выбрать несколько вариантов.

Флажки создаются с помощью тега «INPUT». Он содержит те же атрибуты что и тег переключателя, только уже значения для этих атрибутов различные. Так атрибуту TYPE присваивается значение "checkbox". Атрибут NAME может иметь различные значения. Например, "group1", "group2" и т. д. А что касается атрибута VALUE, то ему присваиваются значения тех вариантов, которые нужно выбрать. Они должны быть уникальными для каждого флажка, так как при выборе оно передается серверу.

Следующий у нас на очереди это раскрывающийся список. Для его реализации используют контейнер <select>. В нем каждый элемент списка определяется тегом <option>. А с помощью атрибута SELECTED задается элемент по умолчанию.

А теперь обратим внимание на такую форму, как текстовая область, которая может содержать линейку прокрутки.

Текстовая область создается с помощью тега <textarea> с такими атрибутами как NAME, ROWS, COLS. Атрибут NAME - задает имя области, атрибут ROWS - задает количество строк, а атрибут COLS - количество столбцов области.

И в заключении мы рассмотрим, как отправляют и очищают формы. Вспомним нашу регистрацию почтового ящика. Если вы помните, то после того как мы заполнили форму, то нам нужно было нажать на кнопку Зарегистрироваться. С помощью этой кнопки, а точнее с помощью нажатия левой кнопкой мыши по ней, мы отправили свои данные на регистрацию. В данном случае, отправка формы произошла с помощью щелчка по кнопке Зарегистрироваться. Данная кнопка создается с помощью тега "INPUT". Он содержи атрибут TYPE и атрибут VALUE. Атрибуту TYPE присваивается значение «submit», а атрибуту VALUE - значение «Зарегистрироваться», т.е. задается надпись, которая будет написана на нашей кнопке.

Если же мы хотим создать кнопку Очистить, то совершаем все действия аналогично кнопке Зарегистрироваться, только уже атрибутам TYPE и VALUE присваиваем значения «RESET» и «ОЧИСТИТЬ» соответственно.

Если же мы хотим отправить нашу заполненную форму на какой-то электронный адрес, то для этого атрибуту ACTION контейнера "FORM" нужно присвоить значение адреса электронной почты, далее в атрибутах METOD и ENCTYPE нужно указать метод и форму передачи данных.