- •Самарский институт (филиал) российского государственного торгово-экономического университета
- •Самара – 2003
- •Оглавление
- •Введение
- •1. Интернет – новая среда делового общения
- •Первые шаги по созданию Web-сайта
- •Пример 1.1.
- •Фирма «Гепард»
- •Прайс-лист
- •Задание 1.1
- •2. Основы языка html
- •Формирование основных разделов html-документа
- •Пример 2.1.
- •Теги форматирования текста
- •Пример 2.2.
- •Задание 2.1
- •Создание таблиц
- •Пример 2.3.
- •Задание 2.2
- •Вставка графических изображений
- •Пример 2.4.
- •Задание 2.3
- •Организация гиперссылок
- •Задание 2.4
- •Создание списков
- •Пример 2.5.
- •Пример 2.6.
- •Пример 2.7.
- •Задание 2.5
- •3. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Пример 3.1
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Пример 3.2
- •Задание 3.1
- •Внешние каскадные таблицы стилей
- •Позиционирование элементов страницы с помощью css.
- •Пример 3.3
- •Пример 3.4
- •Задание 3.2
- •Задание цвета в css
- •Задание 3.3
- •4. Формы html
- •Элементы управления формы html
- •Пример 4.1
- •Пример 4.2
- •Пример 4.3
- •Пример 4.4
- •Заголовки и названия
- •Параграфы и строки
- •Стили текста
Элементы управления формы html
Формы предоставляют в распоряжение пользователя несколько типов элементов управления. Некоторые из них представлены в таблице 4.1.
Таблица 4.1
Внешний вид |
Название |
Назначение |
|
Текстовое поле
Флажок
Переключатель
Кнопка
Текстовое поле с прокруткой
Ниспадающее меню
|
Для ввода коротких текстовых сообщений
Для выбора одного из двух возможных значений независимо от других полей Для выбора одного из множества вариантов, сопоставленных группе переключателей Для инициирования определенных действий
Для ввода текста из нескольких строк
Для выбора одного значения из списка значений |
Для создания того или иного элемента управления в форме применяются соответствующие теги.
Тег INPUT
Тег INPUT служит для ввода данных различных типов. Тип данных, вид элемента и его свойства определяются значением атрибута TYPE. В таблице 4.2 указаны значения, которые может принимать атрибут TYPE.
Таблица 4.2
-
Тип элемента
Описание элемента
Текстовое поле
<INPUT TYPE="text">
Текстовое поле для ввода пароля
<INPUT TYPE="password">
Флажок
<INPUT TYPE="checkbox">
Переключатель
<INPUT TYPE="radio">
Кнопка Submit
<INPUT TYPE="submit">
Кнопка произволь-ного назначения
<INPUT TYPE="button">
Кроме рассмотренного атрибута TYPE с тегом INPUT могут использоваться следующие атрибуты:
NAME – для задания имени элемента управления, выступающего в роли переменной,
VALUE – для задания значения, связанного с именем элемента,
SIZE – для задания размера в символах по ширине,
CHECKED – для указания того, что флажок или переключатель выбран по умолчанию.
Пример 4.1
Для создания в форме текстового поля шириной в 40 символов можно использовать следующее выражение:
<INPUT NAME=”Surname” TYPE="text" SIZE="40">
Тег <TEXTAREA>
В отличие от тега <INPUT TYPE="text"> пара тегов <TEXTAREA> и </TEXTAREA> позволяют вводить не одну строку, а несколько строчек в текстовое окно, снабженное линейкой прокрутки. Кроме атрибута NAME рассматриваемый тег имеет атрибуты ROWS и COLS, определяющие высоту и ширину текстовой области, измеряемую в символах.
Пример 4.2
Между парой тегов <TEXTAREA> и </TEXTAREA> можно поместить какой-либо текст по умолчанию. При необходимости текст по умолчанию заменяют на новый.
<TEXTAREA NAME= “address” COLS="50" ROWS="5" >
Введите свой адрес, удалив данный текст.
</TEXTAREA>
Тег <SELECT>
Пара тегов < SELECT > и </ SELECT > используются для создания списка альтернатив в форме ниспадающего меню. Использование атрибута MULTIPLE позволяет выбрать более одной альтернативы. Каждый элемент списка указывается посредством тега <OPTION>. Для выбора элемента списка по умолчанию используется тег <OPTION SELECTED>.