С помощью  неконтейнерноговнутристрочного тега     можно  создать элементы различных  типов: поля ввода данных,  кнопки  и переключатели (флажки  и радиокнопки).  Тип элемента  определяется атрибутом type. В зависимости от типа элемента могут использоваться те или иные  дополнительные  атрибуты. Некоторые типы предусмотрены  специально для передачи на сервер данных, ассоциированных с элементами.         Атрибут  type тега может принимать  следующие значения:

• Text- текстовое поле ввода данных; дополнительные  атрибуты:

• Maxlength -  максимальное число вводимых символов (по  умолчанию -  не огарничено);
• Size – ширина  поля, выраженная в  количестве одновременно видимых символов;
• Value- значение (содержимое поля);

Элементы, заданные  тегом

• Checkbox-  переключатель типа флажок; дополнительные  атрибуты:

• Value- значение, ассоциированное с флажком;
• Checked=”checked” -   если указан,  то флажок установлен;

• Radio – селекторный переключатель (радиокнопка); дополнительные  атрибуты:

• Value- значение, ассоциированное с переключателем;
• Checked=”checked” -  если указан,  то переключатель установлен  (выбран);

• File-  текстовое поле ввода данных с кнопкой  Обзор, щелчок  на который открывает  диалоговое окно выбора файла; полное имя выбранного  файла отображается в  поле ввода. Дополнительные атрибуты maxlength, size и valueтакие  же,  что и для обычного поля ввода данных, задаваемого атрибутом type=”text”;
• Password – текстовое поле ввода данных, в котором все символы отображаются в виде «звездочки» (*) или закрашенного кружка. Дополнительные атрибуты maxlength, size и value те же, что и для обычного поля ввода данных, задаваемого атрибутом type=”text”. Обычно в такое поле вводят пароль. Однако, хотя вводимые в поле типа password символы маскируются «звездочками», передача их на сервер не шифруется;
• Button – кнопка; дополнительный атрибут value принимает в качестве значения строку, отображаемую на кнопке. По умолчанию на кнопке нет надписи;
• Submit – кнопка, щелчок на которой приводит к отправке данных, содержащихся в форме, на сервер; дополнительный атрибут value  принимает в качестве  значения строку, отображаемую на кнопке. По умолчанию на кнопке  находится надпись Подача запроса, Отправить запрос, Начали или Submitв зависимости  от браузера. Передача данных произойдет только  при определенных  условиях.
• Image-  графическое изображение,  играющее такую же роль, что и кнопка типа submit; адрес графического файла указывается как значение атрибута src;
• Reset – кнопка, щелчок  на которой отменяет все изменения в элементах, содержащихся в форме (восстанавливает исходные  значения); дополнительный атрибут value принимает в качестве значения строку, отображаемую на кнопке. По умолчанию на кнопке находится надпись Сброс, Сбросить или Reset  в зависимости от  браузера;
• Hidden-  невидимый элемент; пользователь не может изменить данные, сохраняемые как значение атрибута value. Если этот элемент находится в форме, то его данные можно передать на сервер. Данные (значения атрибута value) невидимого элемента могут быть сформированы сценарием.

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

Тег

имеет множество  атрибутов,  среди которых  отметим основные:

• Accesskey-  определяет  клавишу быстрого доступа к раскрывающемуся списку; значение атрибута- строка, содержащая букву или цифру. Если нажать на указанную клавишу в сочетании с клавишей ,  то элемент  получит фокус. Например, ;
  Name-  имя (идентификатор) списка;
  Disabled=”disabled”- делает список недоступным пользователю;
  Multiple=”multiple” – обозначает  возможность выбора из  списка одновременно нескольких элементов;
  Size -   число одновременно видимых элементов списка; по умолчанию-1. Если это число больше единицы, то список снабжается полосой прокрутки;
  Tabindex- целое число,  определяющее порядок перехода к элементу с помощью клавиши ;  обычно используется,  когда в форме присутствуют несколько элементов интерфейса,  а порядок ввода данных  в них важен.

  Атрибуты тега :

  • Selected=”selected” – обозначает выбранный (выделенный) элемент списка;
  • Value – значение, ассоциированное с элементом списка.

  Текстовое  содержимое  элемента списка указывается сразу после тега .

  Пример  раскрывающегося списка:

  Первый

  Второй

  Третий

  Четвертый

  
  
  

  Один

  Два

  Три

  Четыре

  
  

  Оценитеэтотсайт:

  Отлично

  Хорошо

  Таксебе

  Плохо

  Текстовая область  -  это прямоугольное поле с  полосами  прокрутки,  внутри которого можно разместить многострочный текст. Его можно сделать как редактируемым,  так и доступным только для просмотра. Для создания текстовой области применяют контейнерный внутристрочный тег . Важная особенность этого тега в том, что все теги, заключенные в него, не выполняются браузером, а отображаются как обыкновенный текст.</span></p><p class="c8 c20"><span class="c0">Основные атрибуты тега <textarea>:</span></p><ul class="c25 lst-kix_list_10-0 start"><li class="c8 c14 c27"><span class="c0 c11">Accesskey- определяет клавишу быстрого доступа к  текстовой области; значение атрибута – строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишей <Alt>, то элемент получит фокус. Например, <textareaaccesskey=”T”>.</span></li><li class="c8 c27 c14"><span class="c0 c11">Cols-  число символьных позиций по горизонтали для отображения текста;</span></li><li class="c8 c27 c14"><span class="c0 c11">Rows- число строк, одновременно видимых в окне текстовой области;</span></li><li class="c8 c27 c14"><span class="c0 c11">Readonly=”readonly” – устанавливает текстовую область в режим просмотра (только для чтения); если этот атрибут опустить, то текстовая область будет работать как поле ввода и редактирования данных;</span></li><li class="c8 c27 c14"><span class="c0 c11">Name- имя (идентификатор) текстовой области;</span></li><li class="c8 c27 c14"><span class="c0 c11">Disabled=”disabled”-делает область недоступной пользователю;</span></li><li class="c8 c27 c14"><span class="c0 c11">Tabindex-  целое число,  определяющее порядок перехода к элементу с помощью клавиши <TAB>; обычно необходимо, когда в форме присутствует несколько элементов интерфейса, а порядок ввода данных в них важен;</span></li><li class="c8 c27 c14"><span class="c0 c11">Wrap – определяет  режим автоматического переноса символов на другую строку; возможные значения:physical, virtual и off (выключено). По умолчанию  включен автоматический перенос посимвольно.</span></li></ul><p class="c8"><span class="c0">Пример:</span></p><p class="c8"><span class="c0"><html></span></p><p class="c8"><span class="c0"><head><title>текстоваяобласть</title></head></span></p><p class="c8"><span class="c0"><body style=”background:#e0e0e0”></span></p><p class="c8"><span class="c0"><textarea cols=15 rows=5></span></p><p class="c8"><span class="c0">Привет</span></p><p class="c8"><span class="c0">

  
  
  

  </span></p><p class="c8"><span class="c0"><html></span></p><p class="c8"><span class="c0"><h1>Примерhtml- кода</h1></span></p><p class="c8"><span class="c0"><select name=”List1”></span></p><p class="c8"><span class="c0"><option value=”1”>Первый</span></p><p class="c8"><span class="c0"><option value=”2”>Второй</span></p><p class="c8"><span class="c0"><option value=”3”>Третий</span></p><p class="c8"><span class="c0"></select></span></p><p class="c8"><span class="c0"></html></span></p><p class="c8"><span class="c0">

  Тег используется  в качестве контейнера для элементов пользовательского интерфейса (, , и <button>),  образуя так называемую форму. Благодаря специальным атрибутам этого тега с помощью кнопки типа submit (<inputtype=”submit”>) можно передать на сервер данные, содержащиеся в элементах формы.</span></p><p class="c8"><span class="c0">Атрибуты тега <form>:</span></p><ul class="c25 lst-kix_list_11-0 start"><li class="c8 c13"><span class="c0 c11">Action –URL- адрес сервера или конкретного серверного приложения, обрабатывающего переданные ему данные формы. Для передачи данных этот атрибут обязателен: если он не указан или его значение пусто, данные формы не будут отправлены никаким способом.</span></li><li class="c8 c13"><span class="c0 c11">Method-  метод передачи данных на сервер:get или post</span></li><li class="c8 c13"><span class="c0 c11">Enctype- метод кодирования данных, передаваемых на сервер;</span></li><li class="c8 c13"><span class="c0 c11">Name- имя формы</span></li><li class="c8 c13"><span class="c0 c11">Target- строка, содержащая имя (значение атрибута name) окна или фрейма, в котором следует показать ответ сервера; возможны также и следующие значения:</span></li></ul><ul class="c25 lst-kix_list_13-0 start"><li class="c8 c13"><span class="c0 c11">_parent – родительский фрейм,  а если фреймов нет, то данный параметр работает как self</span></li><li class="c8 c13"><span class="c0 c11">_blank-  новое окно браузера</span></li><li class="c8 c13"><span class="c0 c11">_top- отменяет все фреймы и загружает ответ сервера в главное окно браузера, а если фреймов нет, то данный параметр  работает как self</span></li><li class="c8 c13"><span class="c0 c11">_self- загружает ответ сервера в текущее окно или фрейм</span></li></ul><p class="c8"><span class="c0">Пример:</span></p><p class="c8"><span class="c0"><html></span></p><p class="c8"><span class="c0"><head><title>Форма</title></head></span></p><p class="c8"><span class="c0"><body></span></p><p class="c8"><span class="c0"><form action=</span><span class="c36 c0"><a class="c21" href="https://www.google.com/url?q=http://anyserver.ru/anyprogram.php&sa=D&ust=1465981143475000&usg=AFQjCNESvd8FmkID1SLncuzmp5k7y2FgZw">http://anyserver.ru/anyprogram.php</a></span><span class="c0"> method=”post”></span></p><p class="c8"><span class="c0"><h2>Сообщение автору </h2></span></p><p class="c8"><span class="c0">Вашe-mail:</span></p><p class="c8"><span class="c0"><input type=”text” name=”from” value=”” size=30></span></p><p class="c8"><span class="c0"><br></span></p><p class="c8"><span class="c0">Сообщение: <br></span></p><p class="c8"><span class="c0"><textarea name=’text’ cols=30 row=8>

  
  

  Тема 1.5 Таблицы.

          

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

          Таблица:

  …..

          Это основные  теги,  описывающие таблицу. Все элементы  таблицы должны  находиться внутри этих двух тэгов.  По  умолчанию  таблица не имеет  обрамления  и разделителей. Обрамление добавляется атрибутом BORDER.

          Строка таблицы: ….

          Количество   строк таблицы определяется количеством встречающихся пар тэгов ….. Строки могут иметь атрибуты align и valign, которые описывают визуальное положение содержимого строк в таблице по горизонтали и  вертикали соответственно.

          Ячейка таблицы: ……

          Описывает  стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Если в строке отсутствует одна или  несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами align=left и valign= middle. Данное  расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

          Заголовок таблицы: ……

          Ячейка заголовка таблицы имеет ширину всей таблицы. Текст  в данной ячейке выравнен по центру и отображается жирным шрифтом.

          Подпись: ……

          Данный тег описывает название таблицы (подпись). Тэг должен присутствовать внутри

  …..., но снаружи описания какой – либо строки или ячейки. По умолчанию  имеет атрибут align=top,  но  может быть явно установлен в align=bottom. Align определяет, где – сверху или снизу таблицы -  будет  поставлена   подпись. Подпись  всегда центрирована в рамках ширины таблицы.

  Основные  атрибуты  таблицы:

          Border= число

          Атрибут  используется в теге table. Если данный атрибут присутствует,  граница таблицы прорисовывается для всех ячеек и для таблицы  в целом.  BORDER может принимать числовое значение в пикселях, определяющее ширину границы, однако  ширина внутренних рамок всегда равна 1, даже если толщина границы 10. Поэтому  используют  обычно два значения:0 или 1. В первом случае рамки нет, таблица не видна и может служить каркасом страницы, во втором – рамка видна, как у обычных таблиц.

          Align= left/right/center/justify

           Если  атрибут align присутствует внутри тегов ….., то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию align=top. Если атрибут  align  встречается внутри , или , он управляет положением данных в ячейках по горизонтали. Может  принимать значения left(слева), right(справа), center(по  центру) или  justify (по   формату).

          Valign=  число

          Данный атрибут  встречается внутри тегов , и . Он определяет   вертикальное размещение данных  в ячейках. Может принимать значения top (вверху), bottom(внизу), middle(посередине) и baseline (центр симметрии совпадает с базовой линией шрифта).

          Nowrap

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

          Colspan=число

          Указывает,  какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию – 1.

          Rowspan = число.

          Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию – 1.

          Colspec

          Данный  параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например colspec=”20%”.

  Background=URL

   Задает фоновый рисунок в таблице

  BGColor=color

   Цвет  фона таблицы

  Bordercolor=color

  Задает  цвет рамки

  Пример таблицы с рамками   и без  рамок:

  DC nationals

  offense	defense	goalie
  husmann	O’Donnell	Weinberg Weinberg Weinberg      Weinberg Weinberg Weinberg
  popplewell
  McGilly	longo
  Donahue	Seymour
  camillo	Walsh Walsh Walsh

  Список используемой  литературы:

  1. Дронов В.А. HTML5, CSSи Web 2.0. Разработка  современных Web- сайтов. – СПб.: БХВ- Петербург,2011
  2. Евсеев Д.А. web-  дизайн в примерах и задачах: учебное пособие; под  редакцией В.В. Трофимова – М. :КНОРУС,2014.
  3. Влад  МержевичHTMLи CSS на примерах БХВ – Петербург,2005
  4. Дунаев В.В. Основы Web- дизайна. Самоучитель.-2-е изд., перераб. И доп. –СПб.: БХВ- Петербург,2013
  5. Фельке-Моррис Т. Большая книга веб- дизайна; пер. с анг. Н.А. Райтмана.-М.:Эксмо, 2012