Теги HTML для работы с таблицами и формами

Теги HTML для работы с таблицами и формами Лекция № 14

Рассматриваемые вопросы Представление таблиц в коде HTML Теги таблицы, строки и ячейки Объединение ячеек таблицы Назначение форм в HTML Элементы формы Принципы работы формы

Часть 1: таблицы

Назначение таблиц Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Но это не совсем правильный подход, т. к. каждый объект HTML, в том числе и таблица, создан для решения определённых задач. Назначение таблиц – представление табличных данных. Сейчас на смену табличной вёрстке пришёл метод блочной вёрстки.

Создание таблицы Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег

. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов и " src="https://present5.com/presentation/1/34616655_180093357.pdf-img/34616655_180093357.pdf-6.jpg" alt="Пример таблицы

. Таблица должна содержать хотя бы одну ячейку. Тег	позволяет создавать ячейку-заголовок столбца. Текст в ней – полужирный по умолчанию.
Ячейка 1

" loading="lazy" width="760" height="570" class="lazyOwl imgdescription" />

Ячейка 1

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Тег

Используется для создания таблицы. Служит контейнером для других элементов таблицы. Парный тег, должен быть закрыт обязательно. Атрибуты: align - Задает выравнивание таблицы по краю окна браузера. (left|right|center) bgcolor - Устанавливает цвет фона таблицы border - устанавливает толщину границы в пикселах вокруг таблицы. cellpadding - Определяет расстояние между границей ячейки и ее содержимым cellspacing - Задает расстояние между внешними границами ячеек. width - Задает ширину таблицы в пикселах или процентах.

служит контейнером для создания строки таблицы Атрибуты: align – определяет выравнивание содержимого ячеек по горизонтали. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. valign Выравнивание содержимого ячеек по вертикали.

, который в свою очередь располагается внутри тега

Предназначен для создания одной ячейки таблицы. Тег	должен размещаться внутри контейнера

. Атрибуты: align – определяет выравнивание содержимого ячеек по горизонтали. background - Задает фоновый рисунок в ячейке. bgcolor Цвет фона ячеек. bordercolor Цвет рамки. colspan - Объединяет горизонтальные ячейки rowspan - Объединяет вертикальные ячейки nowrap - Запрещает перенос строк. valign - Выравнивание содержимого ячейки по вертикали. width, height – ширина и высота ячейки

Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки

. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали Атрибут rowspan устанавливает число ячеек объединяемых по вертикали Так,

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

или конструкция вида

…

…

" loading="lazy" width="760" height="570" class="lazyOwl imgdescription" />

Ячейка 1		Ячейка 2
Ячейка 3	Ячейка 4

Описание цветов в HTML Для описания цвета можно использовать: Символьные константы Числовые коды в 16 -ричной системе (#12 FFD 2)

Часть 2: формы

Назначение Формы – механизм обратной связи от пользователя (его ответная реакция на информацию, размещённую на странице) С помощью форм можно отправить письмо на адрес электропочты Отправить запрос для обработки информации пользователя сценарием на сервере (например, передача данных анкеты для сохранения в БД на сервере)

Тег

Создаёт форму в документе Является контейнером для элементов формы Атрибуты: Action - Адрес CGI-программы или документа, который обрабатывает данные формы. Name – имя формы Method – метод протокола HTTP, кот. будет использоваться для передачи данных Enctype - MIME-тип информации формы. Target – имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Методы протокола HTTP GET (по умолчанию) Позволяет передавать параметры через строку запроса (URI). Запрос GET имеет ограничение 4 Кб. Русские символы кодируются (%шестн_код) Все параметры видны в адресной строке (это небезопасно) Можно сохранить запрос и использовать его в дальнейшем POST Позволяет передавать параметры с помощью специальной структуры. При этом адрес URI не меняется (строка запроса не добавляется). Длина запроса не ограничена Параметры не видны (можно передавать пароли) Сохранить такой запрос нельзя

Элементы формы – тег Позволяет выводить разнообразные элементы интерфейса Атрибуты: Align – выравнивание Name – имя элемента управления Size – ширина (напр. , текстового поля) Readonly – запрещает редактир-е элемента Maxlength – макс. кол-во символов в поле Value – значение элемента Type – задаёт тип элемента интерфейса

Типы элементов Тип элемента опред-ся значением атрибута type тега Button – кнопка Checkbox – флажок File – поле для выбора файла Hidden – скрытое поле Image – поле с изображением Password – поле для ввода паролей Radio – радио-переключатели Reset – кнопка для сброса (очистки) формы Submit – кнопка для отправки данных на сервер Text – текстовое поле (по умолчанию)

Примеры элементов

Текстовое поле Text – значение атриб. Type по умолчанию Отображает однострочное текстовое поле Параметры: Size – размер поля в символах Maxlength – макс. кол-во символов в поле Value – текст в поле по умолчанию Name – имя поля

Флажок checkbox Отображает один флажок Параметры: Value – значение, кот. будет передано на обработку в случае выбора этого флажка Name – имя поля Checked – если этот атрибут присутствует, флажок выбран по умолчанию Подписаться на рассылку

Радиокнопка Отображает одну радиокнопку Параметры: Value – значение, кот. будет передано на обработку в случае выбора этого флажка Name – имя поля Checked – если этот атрибут присутствует, радиокнопка выбран по умолчанию Важно: радиокнопки обычно используются группами. Для того, чтобы при выборе одной кнопки другие теряли выбор, все они должны иметь одинаковое имя (параметр name) Опыт 1 -2 года

Поле для ввода пароля Отображает однострочное текстовое поле для ввода пароля: при вводе любых символов на экране отображаются одинаковые спецсимволы (звёздочки и т. п. ) Параметры: Size – размер поля в символах Maxlength – макс. кол-во символов в поле Name – имя поля

Кнопка для cброса формы Сбрасывает значение всех элементов формы и устанавливает их в значения по умолчанию Параметры: Value – надпись на кнопке Name – имя поля

Кнопка для отправки формы Отправляет информацию из формы на обработку программе, указанной в атрибуте action тега Параметры: Value – надпись на кнопке Name – имя поля

Многострочные поля ввода Текст в поле Значение поля записывается между открывающим и закрывающим тегами Параметры: Name – имя поля Cols – число символов по ширине Rows – число символов по высоте

Выпадающие списки Теги … Позволяет вывести поле с выпадающим или обычным списком для выбора одного или нескольких вариантов Внутри тегов элементы списка задаются тегами Параметры select: Name – имя поля MULTIPLE - Позволяет выбрать более чем одно наименование Size – число видимых на экране значений Параметры option: Value – значение пункта Selected – позволяет отметить пункт по умолчанию

Вариант 1 Вариант 2 Вариант 3 Вариант" src="https://present5.com/presentation/1/34616655_180093357.pdf-img/34616655_180093357.pdf-28.jpg" alt="Пример списка
Выбор

Вариант 1 Вариант 2 Вариант 3 Вариант" loading="lazy" width="760" height="570" class="lazyOwl imgdescription" />

Пример списка
Выбор Вариант 1 Вариант 2 Вариант 3 Вариант 4

Источники информации Официальная спецификация языка HTML 4. 01 - http: //www. w 3. org/TR/1999/REC-html 401 -19991224/ Русский перевод спецификации HTML 4. 01 - http: //www. umade. ru/resources/specifications/html 4 01/index. htm Справочник по HTML (включая теги версии 5) - http: //htmlbook. ru/html Ломов А. HTML, CSS, скрипты. Практика создания сайтов.