WEB-технологии

<FORM method="get" или "post" action="mailto:name@domen.ru" >  
<INPUT type="submit" value="послать"></FORM>

 
Пример: 

Начало формы

Конец формы

RESET 
Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.  
 
Синтаксис: <INPUT type="reset" value="очистка">  
Пример:  
 

IMAGE 
Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:

src. Задаёт URL файла с изображением.

align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.

name. Задаёт имя  карты, которое так же пересылается  сценарию вместе с координатами.

 
Синтаксис: <INPUT type="image" src="knopka.gif">  
 
Пример:  

BUTTON  
Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.  
Синтаксис: <INPUT type="button"value="кнопка">  
Пример:  

FILE  
Создает управляющий элемент выбор файла.  
Синтаксис: <INPUT type="file">  
Пример:  

ACCESSKEY  
Задает кнопку, при нажатии которой происходит обработка поля.  
Синтаксис: <INPUT accesskey="a">  
Пример: нажмите Alt+a:

ID  - Задает имя для ссылки.  
Синтаксис: <INPUT id="имя">

SIZE - Задает ширину элемента в пикселях.  
Синтаксис: <INPUT size="число">

DISABLED - Отключает возможность изменять содержимое поля или положение кнопки.  
Синтаксис: <INPUT disabled"> 
Пример: 

 

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:

name. Задаёт ключевое  слово, по которому сценарий  может обращаться к его содержимому.

rows. Задаёт высоту  области в строках.

cols. Задаёт ширину  области в символах.

Синтаксис:

<FORM><H3>Введи  текст 
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста 
</TEXTAREA></H3> 
<INPUT type="reset" value="очистка"></FORM>

Пример: 

 

 

Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:

name. Задаёт имя.

size. Задаёт максимальное  количество элементов списка, одновременно  отображаемых на экране.

multiple. Задаёт  возможность одновременного выбора  нескольких значений.

Элемент <OPTION>.

Элемент же <OPTION> задает возможные варианты выбора меню <SELECT>  
Синтаксис: <OPTION value="n" selected>значение 
имеет атрибуты:

selected. Задаёт  изначально выбранное слово.

value. Задаёт значение  выбранного слова для сценария.

Пример:

<H3>Выбери нужное</H3> 
<SELECT multiple> 
<OPTION value=a>Первый</OPTION> 
<OPTION value=b>Второй</OPTION> 
<OPTION value=c>Третий</OPTION> 
<OPTION value=d>Четвертый</OPTION> 
</SELECT>

 
Выбери нужное 

Конец формы

 

Пример:

<SELECT size=1> 
<OPTION selected value=1>Выберите:</OPTION> 
<OPTION value=2> Первый</OPTION>  
<OPTION value=3> Второй</OPTION> 
<OPTION value=4>Третий</OPTION>  
<OPTION value=5> Четвертый</OPTION> 
</SELECT>

 
           

Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

<SELECT size=1> 
<OPTGROUP label="Первая группа"> 
<OPTION selected value=1>Выберите:</OPTION> 
<OPTION value=2> Первый</OPTION>  
<OPTION value=3> Второй</OPTION> 
</OPTGROUP> 
<OPTGROUP label="Вторая группа"> 
<OPTION value=4>Третий</OPTION>  
<OPTION value=5> Четвертый</OPTION> 
</OPTGROUP> 
</SELECT>

 

Элемент <ISINDEX>.

Элемент <ISINDEX>Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.

Пример: <ISINDEX prompt=" строка для ввода критерия поиска"> Допустим, что на текущей странице задан базовый URL при помощи элемента <BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен.

Строка для  ввода критерия поиска

 

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста.  
Синтаксис: <BUTTON ><IMG src=...> </BUTTON>

name задает имя элементу.

value задает значение элементу.

type при использовании в качестве кнопки принимает значения: button, submit и reset.

disabled делает недоступным данный элемент

tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.

accesskey задает клавишу доступа.

id задает имя для ссылки.

Пример:  
<BUTTON name="submit" type="submit">отправить</BUTTON >

Начало формы

отправить

Конец формы

 

Элемент <LABEL>.

Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы. Поддерживает атрибут for, который связывает элемент <LABEL> с другим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.

Пример:

<FORM action="URL" method="post"> 
<TABLE> 
<TR> 
<TD><LABEL for="fname"Имя</LABEL> 
<TD><INPUT type="text" name="firstname" id="fname"> 
<TR> 
<TD><LABEL for="lname">Фамилия</LABEL> 
<TD><INPUT type="text" name="lastname" id="lname"> 
</TABLE> 
</FORM>

 
Начало формы

Имя
Фамилия

Конец формы

 

Пример:

<FORM action="URL" method="post">  
<LABEL for="firstname">Имя: </LABEL> 
<INPUT type="text" id="firstname"><BR> 
<LABEL for="lastname"Фамилия: </LABEL> 
<INPUT type="text" id="lastname"><BR> 
<LABEL for="email">e-mail: </LABEL> 
<INPUT type="text" id="email"><BR> 
<INPUT type="radio" name="sex" value="Мужской">Мужской<BR> 
<INPUT type="radio" name="sex" value="Женский">Женский<BR> 
<INPUT type="submit" value="Отправить"> <INPUT type="reset"> 
</FORM>

 

Начало формы

Имя:   
Фамилия:   
e-mail:   
Мужской 
Женский 
 

Конец формы

 

Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать элементы формы.  
Синтаксис: <FIELDSET> имя</FIELDSET>

Элемент <LEGEND>.

Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы. Синтаксис: <LEGEND> имя</LEGEND>

Пример:

<FORM> 
<FIELDSET> 
<LEGEND>Группа 1</LEGEND> 
<INPUT type="text" id="name1"><BR> 
<INPUT type="text" id="name2"><BR> 
</FIELDSET> 
<FIELDSET> 
<LEGEND>Группа 2</LEGEND> 
<INPUT type="text" id="name3"><BR> 
<INPUT type="text" id="name4"><BR> 
</FIELDSET> 
</FORM>

 

Начало формы

Группа 1

 
 
Группа 2

 
 

Лекция 11. Каскадные таблицы стилей CSS

 

В лекции даются основные сведения о синтаксисе CSS, рассматриваются основные способы внедрения CSS в HTML. Также описываются основные селекторы, псевдоэлементы и псевдоклассы, затрагиваются такие фундаментальные концепции CSS как наследование и каскадирование.

Синтаксис CSS

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

Каждое объявление включает в себя свойство и соответствующее этому  свойству значение. Любое свойство является обобщенным параметром оформления и должно отделяться от значения двоеточием. Свойства могут быть достаточно разнообразны: они могут определять цвет элемента и фона, поля, заполнение, тип и размер шрифта и т.п. Набор допустимых значений для каждого конкретного свойства должен быть определен индивидуально. Правило может быть задано следующим образом:

P {font-family: arial; color: red}

В приведенном примере свойству font-family, определяющему вид шрифта, присваивается значение arial, а свойству color, определяющему цвет шрифта, – значение red. Поскольку блок объявлений соотносится с селектором P, то областью применения данного стилевого правила будут являться все элементы <P>…</P>.

Существует несколько различных  селекторов, каждый из которых соответствуют различным частям разметки. Четырьмя наиболее общими селекторами являются универсальные селекторы, селекторы элементов, селекторы классов и селекторы идентификаторов.

Универсальные селекторы. Универсальные  селекторы позволяют применить стилевое оформление сразу ко всем элементам на странице. Например, следующее правило устанавливает сплошную границу толщиной 1 пиксел для каждого элемента на странице:

* {border: 1px solid;}

Селекторы элементов. Для определения  информации о представлении элементов HTML большинство стилевых правил используют в качестве селекторов имена этих элементов. Например,

P {font-size: 1.2em; margin: 10px 20px;}

Приведенное выше правило будет  применяться ко всем элементам <P>…</P>.

Селекторы классов. Напомним, что Спецификация HTML 4.01 предусматривает для всех элементов специальный атрибут class, который позволяет особым образом отметить некоторые структурные элементы в документе, например

<P class="important">...</P>

Каскадные таблицы стилей позволяют  использовать в качестве селекторов значения атрибутов class. Названия классов в селекторах предваряются точкой и указываются после имен элементов:

P.important {padding-left: 20px;}

В приведенном примере стилевое правило будет применяться только к тем элементам <P>…</P>, атрибут class которых имеет значение important.

Каскадные таблицы стилей также  позволяют использовать в селекторах названия классов без указания имен элементов:

.important {padding-left: 20px;}

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

Селекторы идентификаторов. Помимо классов, Спецификация HTML предусматривает для  всех элементов еще один специальный  атрибут id, с помощью которого любому элементу можно назначить уникальный идентификатор, например:

<DIV id="header">...</DIV>

Главное отличие идентификаторов  от классов заключается в том, что каждое значение атрибута id должно быть уникальным. Идентификаторы в селекторах указываются после имен элементов и предваряются символом #:

DIV#header {width: 1000px;}

Данное стилевое правило будет  применяться к единственному  экземпляру элемента <DIV>…</DIV>, которому назначен атрибут id со значением header. Если в селекторе используется идентификатор без указания конкретного элемента, то такое стилевое правило будет применяться к единственному экземпляру любого элемента, значение id которого равно header:

#header {width: 1000px;}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила. Например, запись

P.warning{}

соответствует всем параграфам со значением class равным warning;

DIV#example{}

соответствует элементу DIV со значением атрибута id равным example;

P.info, LI.highlight{}

соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

Группировка селекторов

Если нескольким разным селекторам необходимо сопоставить одинаковые объявления, такие селекторы можно  сгруппировать в список. Имена  селекторов в данном случае должны разделяться запятыми:

P, UL {font-size: 1.2em; line-height: 1.5em;}

В приведенном примере для двух элементов P и UL назначается одинаковый размер шрифта и межстрочный интервал. Синтаксис каскадных таблиц стилей позволяет легко группировать не только простейшие селекторы с именами элементов, но также и другие типы селекторов. В некоторых случаях подобная группировка позволяет значительно сократить размер CSS-файла.

Дополнительные селекторы CSS

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

Селекторы атрибутов. Селекторы атрибутов  позволяют выбирать элементы на основе содержащихся в них атрибутов. Например, можно выбрать каждый элемент IMG с атрибутом alt с помощью следующего селектора: