HTML
.pdf
Элемент LABEL
Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.
<input id="идентификатор"><label for="идентификатор">Текст</label> <label><input type="..."> Текст</label>
accesskey Доступ к элементам формы с помощью горячих клавиш. for Идентификатор элемента, с которым следует установить связь.
Элемент FIELDSET
Элемент <fieldset> предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.
Браузеры для повышения наглядности отображают результат использования тега <fieldset> в виде рамки. Ее вид зависит от операционной системы, а также используемого браузера (рис. 1, 2).
<fieldset>
<input type="checkbox"> 1<br> <input type="checkbox"> 2<br> <input type="checkbox"> 3<br> <input type="submit"> </fieldset>
disabled Блокирует поля формы в группе. form Связывает группу с формой.
title Добавляет всплывающую подсказку к группе формы.
Элемент LEGEND
Тег <legend> применяется для создания заголовка группы элементов формы, которая определяется с помощью тега <fieldset>. Группа элементов обозначается в браузере с помощью рамки, а текст, который располагается внутри контейнера <legend>, встраивается в эту рамку.
<fieldset>
<legend>Работа со временем</legend> <input type="checkbox">1<br>
<input type="checkbox">2<br> <input type="checkbox">3<br> </fieldset>
accesskey Переход к группе элементов формы с помощью комбинации клавиш. align Определяет выравнивание текста.
title Добавляет всплывающую подсказку к тексту заголовка.
Обработка формы
Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.
Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить.
<form action=''login.php'' method="get"> <input name="login">
<input type="password" name="pass"> <input type="submit">
</form>
http://login.php?login=text_in_a&b=pass
GET и POST
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге <form> используется атрибут method, а его значениями выступают ключевые слова get и post. Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В таблице показаны различия между этими методами.
GET http://login.php?login=text_in_a&b=pass
Передача небольших текстовых данных на сервер; поиск по сайту.
POST http://login.php
Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.
Задача
1.Сформировать форму опроса. Форма должна содержать текстовые поля, переключатели, флажки, поля для загрузки файлов, списки многострочные и выпадающие, кнопки submit/reset.
2.Проверить на валидность полученый код.
Типы тегов
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы:
теги верхнего уровня(<html> <head> <body>); теги заголовка документа(<title> <meta>); блочные элементы(<h1>,...,<h6> <p> <hr> <pre>); cтрочные элементы(<a> <b> <i> <img> <span>); универсальные элементы(<del> <ins>); списки(<ol> <ul> <li>); таблицы(<table><td><th><tr>).
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.
Блочные и строчные элементы
В HTML большинство элементов можно разделить на две группы: блочные (block) и строчные (inline).
Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского) блочного элемента.
<blockquote> <h1>,...,<h6> <hr> <p> <pre>
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
<b> <big> <em> <i> <small> <span> <strong> <sub> <sup>
<a> <img> <br>
Теги для логического
разделения содержимого
<div></div>
Этот контейнер предназначен для того, чтобы объединять некий текст в логический блок, отделенный от остального содержимого страницы. Если вы возьмете текст простейшего документа и заключите текст из тела документа в этот контейнер, то никаких внешних изменений не заметите. Однако, они, все же, есть. Для текста, заключенного в контейнер div, можно задать одно стилевое оформление. Этот блок можно сделать определенной ширины, задать для него другой шрифт, сделать выравнивание по правому краю или что угодно еще.
<span></span>
Контейнер span предназначен для выделения некоторой части текста. Его использование так же, заметно только после придания тегу особых свойств.
Блочные элементы
● может быть дочерним элементом тега <body>;
уточнение: тут нужно не забывать о правилах HTML кода. Например, <li> — блочный элемент, но не может быть дочерним элементом body, т.к. обязательно должен находится в <ul>, а , к примеру, <ul> может содержать только <li>.
● может содержать внутри себя элементы любого типа;
уточнение: это утверждение справедливо не для всех блочных элементов. Например, <p>
— блочный, но содержать другие блочные элементы не может.
● по умолчанию занимает всю доступную ему ширину;
уточнение: есть исключения из этого правила: <table>, плавающие блоки — ширина этих по умолчанию зависит от содержимого.
●генерирует переводы строк до и после своего содержимого, поэтому располагается на отдельной строке;
может иметь отступы в любом направлении: margin-top, margin-bottom, margin-left, marginright, padding-top, padding-bottom, padding-left, padding-right;
уточнение: есть исключения из этого правила: <table> — padding вообще не применяется.
●можно явно задавать размеры width и height (по умолчанию эти значения равны auto).