Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Раздел 1. Язык гипертекстовой разметки HTML

Стр 1 из 14Следующая ⇒

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Поволжский государственный университет телекоммуникаций и информатики»

КОЛЛЕДЖ СВЯЗИ

ВЕБ - ДИЗАЙН

УЧЕБНОЕ ПОСОБИЕ

для специальностей:

09.02.03 – Программирование в компьютерных системах

09.02.04 – Информационные системы (по отраслям)

09.02.07 – Информационные системы и программирование

Самара

2018

Рассмотрено на заседании ПЦК «Информационных систем и технологий» Председатель ____________Шомас Е.А. Протокол №____ от ___________2018г.

Утверждаю: Зам. директора по УВР ____________Логвинов А.В. «_____»______________2018г.

Шомас Е.А.

Веб - дизайн. Учебное пособие. – Самара.: КС ПГУТИ, 2018. - 78c.

Содержание

Раздел 1. Язык гипертекстовой разметки HTML.. 4

Тема 1.1 Структура HTML – документа. 4

Тема 1.2 Теги форматирования текста. 10

Тема 1.3 Ссылки. 14

Тема 1.4 Вставка объектов на веб – страницу. 16

Тема 1.5 Создание таблиц средствами HTML.. 20

Тема 1.6 Создание форм.. 21

Тема 1.7 Семантическая структура страницы.. 36

Раздел 2. Каскадные таблицы стилей CSS. 38

Тема 2.1 Введение в таблицы стилей и язык CSS. 38

Тема 2.2 Основные свойства CSS. 43

Тема 2.3 Оформление HTML – документа средствами CSS. 48

Тема 2.4 Создание макета страницы и верстка. 55

Тема 2.5 Трансформации, переходы и анимации. 59

Тема 2.6 Введение в адаптивный дизайн. 66

Тема 2.7 Canvas. Работа с графикой. 68

Список использованных источников. 78

Раздел 1. Язык гипертекстовой разметки HTML

Тема 1.1 Структура HTML – документа

HTML (Hyper Text Markup Language) – язык гипертекстовой разметки документов, который отвечает за структуру сайта. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

Гипертекстовый документ – это документ, содержащий переходы (гиперссылки) на другие документы. При использовании гиперссылки происходит перемещение от одного документа к другому.

Создать HTML документ можно в любом текстовом редакторе Notepad++, Sublime Text, Brackets и другие. Главный HTML – документ принято называть index.html.

Основой языка HTML является дескриптор (тег), он несет в себе определенную информацию.

Дескриптор HTML – это чаще всего два тега (открывающий и закрывающий) и часть документа между ними.

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

Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер).

Пример элемента HTML:

<h1 align= "center"> Глава 1</h1>

В этом примере:

<h1 align= "center"> – открывающий тег

</h1> – закрывающий тег

h1 – имя тега

align= "center" – атрибут

align – имя атрибута

"center" – значение атрибута

Глава 1 – содержание элемента HTML

Структура HTML – документа

Последняя версия языка считается HTML5.

Для создания документа HTML5 нужно в первую очередь прописать два элемента: doctype и html.

Doctype – указывает на версию документа (html5), а элемент html между своими открывающим и закрывающим тегами содержит весь документ. Внутри элемента html размещаются два других элемента:

Head – содержит метаданные веб – страницы- заголовок веб – страницы, тип кодировки, ссылки на внешние ресурсы – стили, скрипты, если они используются;

Body – определяет содержимое html – страницы.

Базовая структура HTML – документа будет выглядеть следующим образом:

<!DOCTYPE HTML>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

<div>Документ HTML5</div>

</body>

</html>

В элементе head определено два элемента:

- title - представляет заголовок страницы;

- meta - определяет метаинформацию страницы. Для корректного отображения символов русского алфавита предпочтительно указывать кодировку utf-8.

В пределах элемента body используется только один элемент - div, который оформляет блок. Содержимым этого блока является простая строка.

Поскольку выбрана кодировка utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Также необходимо чтобы сам текст документа соответствовал выбранной кодировке, для этого в различных текстовых редакторах есть соответствующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM. Сохраняется HTML – документ с расширением *.html.

В разделе документа body располагается та информация, которая отображается в окне браузера. Данный тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега <BODY>.

< body

text ="цвет текста"

bgcolor ="цвет фона"

background ="адрес фонового рисунка"

link ="цвет непосещенной гиперссылки"

vlink ="цвет посещенной гиперссылки"

alink ="цвет активной гиперссылки">

- Атрибут text задает цвет шрифта для всего документа в формате RGB или в символьной нотации;

- Атрибут bgcolor задает цвет фона окна браузера документа в формате RGB или в символьной нотации;

- Атрибут background позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа;

- Атрибуты link, vlink и alink задают цвета гиперссылок в формате RGB или в символьной нотации.

Пример использования фонового рисунка:

Задание цвета на Web - страницах

Для определения цвета различных элементов HTML-документа необходимо указать значение соответствующих атрибутов. Указывать значения этих атрибутов можно двумя способами:

- определять цвет в формате RGB;

- определять цвет, используя символьную нотацию

Формат RGB – это система указания цвета, которая базируется на смешении трех основных цветов: красном (RED), зеленом (GREEN) и синем (BLUE). Итоговый цвет определяется цифрами в шестнадцатеричном коде. Для каждого цвета задается шестнадцатеричное значение в пределах от 0 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Указывая цвет в формате RGB, можно определить более шестнадцати миллионов цветовых оттенков.

Задание цвета в формате RGB имеет один недостаток – необходимо помнить совокупности цифр для указания цвета. Этого недостатка лишена символьная нотация. Можно указывать название цвета на английском языке. Но у этого способа указания цвета тоже есть недостаток – определено всего шестнадцать имен цветов.

Ниже приведена таблица соответствий указания цвета в символьной нотации и формате RGB.

Символьная нотация	Формат RGB	Цвет
Black	#000000	Черный
Silver	#C0C0C0	Серебро
Gray	#808080	Серый
White	#FFFFFF	Белый
Maroon	#800000	Темно-бордовый
Red	#FF0000	Красный
Purple	#800080	Фиолетовый
Fuchsia	#FF00FF	Розовый
Green	#008000	Зеленый
Lime	#00FF00	Известь
Olive	#808000	Оливковый
Yellow	#FFFF00	Лимонный
Navy	#000080	Темно-синий
Blue	#0000FF	Синий
Teal	#008080	Темно-бирюзовый
Aqua	#00FFFF	Бирюзовый

Таким образом, строка text ="#008000" и строка text ="green" в теге body одинаково определяют цвет шрифта – зеленый.

Основные правила синтаксиса HTML:

- HTML – документ обязательно должен начинаться с DOCTYPE;

- Все теги и атрибуты должны записываться строчными буквами;

- Любые значения атрибутов необходимо заключать в кавычки;

- Все парные теги должны иметь закрывающий тег;

- Каждый тег должен быть корректно вложен в другой;

- Сокращенные атрибуты (без значения) запрещены;

- Для обозначения цели в тегах a, frame, iframe, img, map вместо атрибута name необходимо использовать атрибут id.

Элементы группировки

Элемент div служит для структуризации контента на веб – странице. Он создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку:

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>Текст документа HTML5</div>

</body>

</html>

Параграфы

Параграфы создаются с помощью тегов < p > и </ p >, которые заключают некоторое содержимое. Каждый параграф располагается на новой строке. Если в рамках одного параграфа надо выполнить перевод текста на другую строку, используется элемент < br >.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>

<p>Первый параграф</p>

<p>Второй параграф</p>

</div>

</body>

</html>

Элемент pre

Выводит предварительно отформатированный текст так, как он определен.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<pre>

Первая строка

Вторая строка

Третья строка

</pre>

</body>

</html>

Элемент span

Обтекает некоторый текст по всей его длине и служит для стилизации заключенного в него текстового содержимого. В отличии от блоков div и p, span не переносит содержимое на следующую строку.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>

<p><span style="color:red;">Первый</span> параграф</p>

<p><span>Второй</span> параграф</p>

</div>

</body>

</html>

Сам по себе элемент span ничего не делает. Во втором параграфе он никак не повлиял на внутреннее текстовое содержимое. А в первом параграфе элемент содержит атрибут стиля style =" color: red;", который устанавливает для вложенного текста красный цвет.

Div и p – являются блочными элементами. Div может содержать любые элементы, p – только строчные элементы. Элемент span – является строчным, но встраивает свое содержимое во внешний контейнер – в div или p. При этом нельзя помещать блочные элементы в строчный элемент span.

Создание заголовков

Заголовки – важный элемент сайта, он помогают систематизировать текст. В HTML доступно создание заголовков разных уровней (1-6). Самый важный считается заголовок первого уровня.

Для разметки заголовков используются теги < H 1 >, < H 2 >, < H 3 >, < H 4 >, < H 5 > и < H 6 >. Эти теги требуют соответствующего закрывающего тега. Теги заголовка нельзя использовать для выделения отдельных слов текста с целью увеличения их размера. При использовании тегов заголовков происходит вставка пустой строки до и после заголовка, поэтому тегов абзаца и перевода строки здесь не требуется. Синтаксис тегов заголовков:

< h n align ="выравнивание">

Атрибут align определяет способ выравнивания заголовка. Значения атрибута:

- left – текст выравнивается по левому краю окна браузера. Это значение используется по умолчанию, т.е. когда атрибут не указан;

- center – текст выравнивается по центру окна браузера;

- right – текст выравнивается по правому краю окна браузера;

- justify – по ширине (только для заголовков длиннее строки) – чаще не используется.

Как правило заголовки первого уровня используют на сайте один раз.

Создание абзацев:

Одним из первых правил составления любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. В HTML-документе разделение на абзацы производится с помощью специального тега < p>. Синтаксис тега аналогичен тегу для создания заголовков.

Создание списков

Списки – применяются для организации и группировки данных. В HTML выделяются следующие типы списков:

Маркированный список – это список, в котором пункты отмечаются с помощью различных символов. Для их создания предусмотрен элемент ul, требующий наличие закрывающего тега. Пункты списка находятся внутри элемента ul. Каждый пункт начинается с элемента li.

Синтаксис элемента:

< ul type = “ вид маркера ”>

Атрибут принимает следующие значения:

- circle – маркер в виде пустого круга;

- square – маркер в виде квадрата;

- disc - маркер в виде черного круга.

Нумерованный список применяется, когда порядок следования пунктов списка имеет большое значение. Для его создания предусмотрен элемент ol, требующий наличие закрывающего тега. Пункты списка находятся внутри элемента ol. Каждый пункт начинается с элемента li.

Синтаксис элемента:

< ol type = « вид символа, используемого для нумерации» start = «число, с которого начинается нумерация списка»>

Атрибут type принимает следующие значения:

- А - заглавные буквы латинского алфавита;

- a – строчные буквы латинского алфавита;

- I – римские цифры;

- 1 – арабские цифры.

Вложенный список – комбинированный список, в который вкладывается и нумерованный и маркированный списки.

Интересную возможность при настройке списков предоставляет стиль list - style - image. Он задает изображение, которое будет отображаться рядом с элементом списка.

<li>iPhone 6S</li>

<li>Galaxy S7</li>

<li>Nexus 5X</li>

<li>Lumia 950</li>

</ul>

Список определений

Список определений – это такой список, который содержит термин и определение к этому термину. Создается список элементами < dl > и </ dl >, внутри которого помещается сначала термин < dt > и </ dt >, а затем определение между тегами < dd > и </ dd >.

Форматирование теста

Существует много элементов для форматирования текста, и все они делятся на две группы: логические и физические.

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

<b> - выделяет текст жирным;

<del> - зачеркивает текст;

<i> - выделяет текст курсивом;

<em> - выделяет текст курсивом, в отличие от тега <i> носит логическое значение, придает выделяемому тексту оттенок важности;

<s> - зачеркивает текст;

<small> -делает текст чуть меньше размером, чем окружающий;

<strong> - выделяет текст жирным. В отличие от тега <b> предназначен для логического выделения, чтобы показать важность текста. А <b> не носит характера логического выделения, выполняет функции только форматирования;

<sub> - помещает текст под строкой;

<sup> - помещает текст над строкой;

<u> - подчеркивает текст;

<ins> - определяет вставленный (или добавленный) текст;

<mark> - выделяет текст цветом, придавая ему оттенок важности.

<!DOCTYPE html>

<html>

<head>

<title>Форматирование текста в HTML5</title>

</head>

<body>

<p>Форматирование в <mark>HTML5</mark></p>

<p>Это <b>выделенный</b> текст</p>

<p>Это <strong>важный</strong> текст</p>

<p>Это <del>зачеркнутый</del> текст</p>

<p>Это <s>недействительный</s> текст</p>

<p>Это <em>важный</em> текст</p>

<p>Это текст <i>курсивом</i> </p>

<p>Это <ins>добавленный</ins> текст</p>

<p>Это <u>подчеркнутый</u> текст</p>

</body>

</html>

Элемент font – задает параметры шрифта для текста. Параметры текста задаются с помощью атрибутов тега:

- face – название шрифта;

- size – размер шрифта;

- color – цвет шрифта;

Тема 1.3 Ссылки

Ссылки обеспечивают навигацию между отдельными документами. Определяются ссылки элементом < a ></ a >, который имеет следующие атрибуты:

- href – определяет адрес ссылки;

- target – определяет, как документ по ссылке должен открываться. Атрибут может принимать следующие значения: _blank – открывается документ в новой вкладке, _self – открывается документ в том – же окне; _parent – элемент открывается в родительском фрейме, если ссылка расположена внутри фрейма.

<!DOCTYPE html>

<html>

<head>

<title>Ссылки</title>

</head>

<body>

<a href="content.html">Учебник по HTML5</a>

</body>

</html>

В примере для ссылки используется относительный путь content. html, т.е. в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию ссылки. Также может использоваться абсолютный путь, с полным указанием адреса, где находится документ.

Навигация внутри документа

Можно организовывать внутренние ссылки, которые будут переходить к определенным блокам внутри документа. Для этого необходимо указать знак (#), после которого одет id того элемента, к которому надо осуществить переход.

<!DOCTYPE HTML>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

<div id="go_top"><a href="#go_bottom">Вниз</a></div>

<div>

<p>Много - много текста...</p>

...

<p>Много - много текста...</p>

</div>

<div id="go_bottom"><a href="#go_top">Вверх</a></div>

</body>

</html>

Стилизация ссылок

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

<!DOCTYPE html>

<html>

<head>

<title>Ссылки</title>

<style>

a:link {color:blue; text-decoration:none}

a:visited {color:pink; text-decoration:none}

a:hover {color:red; text-decoration:underline}

a:active {color:yellow; text-decoration:underline}

</style>

</head>

<body>

<a href="index.html">Учебник по HTML5</a>

</body>

</html>

В примере определены стили ссылок в различных состояниях:

a: link – применяется для ссылок в обычном состоянии, когда он не нажаты и на них не наведен курсор;

a: visited – указывает на состояние ссылки, по которой был осуществлен переход;

a: hover – состояние ссылки, на которую навели указатель мыши;

a: active – указывает на ссылку в нажатом состоянии.

Стиль color – устанавливает цвет ссылки, а стиль text – decoration устанавливает подчеркивание (underline – подчеркнута, none – подчеркивание отсутствует).

Ссылки – изображения

Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку – изображение.

Работа с изображениями

На web – страницах используются следующие форматы графических изображений: *. jpg, *. gif, *. png.

Для вывода изображений в HTML – документ применяется элемент img. Элемент имеет два важных параметра:

- src - путь к изображению. Это может быть относительный или абсолютный путь в файловой системе или адрес в интернете;

- alt - текстовое описание изображения. Если браузер по каким-то причинам не может отобразить изображение (например, если у атрибута src некорректно задан путь), то браузер показывает вместо самой картинки данное текстовое описание. Атрибут alt еще важен тем, что поисковые системы по текстовому описанию могут индексировать изображение.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

В примере, файл с изображением называется dubi.png, он находится в одной папке с веб – страницей. Элементу img не требуется закрывающего тега.

Дополнительно в элементе img можно указать размеры изображения через атрибуты:

- width = “ширина (в пикселях или %)”;

- height = “высота (в пикселях или %)”.

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

!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<img src="dubi.png" alt=" Зимняя равнина " style="float:left; margin-right:10px;" />

<h1>Lorem Ipsum</h1>

<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry....

</div>

</body>

</html>

Фреймы

Фреймы позволяют встраивать на веб – страницу другую веб страницу. Представлены они элементом iframe.

<!DOCTYPE html>

<html>

<head>

<title>Фреймы в HTML5</title>

</head>

<body>

<h2>Элемент iframe</h2>

</iframe>

</body>

</html>

Настройка элемента iframe производится с помощью атрибутов:

- src – устанавливает полный путь к загружаемому ресурсу;

- width – ширина фрейма;

- height – высота фрейма.

Вставка бегущей строки

<marquee> – начало бегущей строки, </marquee> – конец бегущей строки. Фрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.

Мультимедиа

Видео

Для воспроизведения видео в html5 используется элемент video. Чтобы настроить элемент, используются следующие атрибуты:

src – источник видео;

width – ширина элемента;

height – высота элемента;

controls – добавление элемента управления воспроизведением;

autoplay – устанавливает автовоспроизведение;

loop – количество повторений;

muted – отключает звук по умолчанию.

<!DOCTYPE html>

<html>

<head>

<title>Видео в HTML5</title>

</head>

<body>

<video src="cats.mp4" height="300" controls ></video>

</body>

</html>

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

</video>

Элемент source использует два атрибута для установки источника видео:

src – путь к видеофайлу;

type - тип видео.

Аудио

Для воспроизведения звука без видео в html5 применяется элемент audio. Для его настройки используют следующие атрибуты:

src – путь к аудиофайлу;

controls – добавление элемента управления воспроизведением;

autoplay – устанавливает автовоспроизведение;

loop – количество повторений;

muted – отключает звук по умолчанию;

preload – устанавливает режим загрузки файла.

Большинство браузеров поддерживают формат mp3.

Тема 1.6 Создание форм

Формы в html представляют один из способов для ввода и отправки данных. При создании форм необходимо следить за тем, чтобы предложенные поля были удобны для посетителей и приемлемы для ответов на поставленные вопросы.

Форма определяется тегами: <form>...</form>. Все, что заключено в этом теге, будет считаться формой.

У тега <form> имеются атрибуты:

action, который используется для того, чтобы соединить форму с программой по сбору данных и передать значение на нужную страницу.

method – определяется каким способом будут передаваться данные, занесенные в форму. Используются два метода:

- get – передача значений в адресе веб-страницы;

- post – в заголовке запроса к веб странице.

Содержание формы с тегами и атрибутами

</form>

Содержание формы - это теги для сбора данных (они используются вместе с атрибутами):
<input> - тег для сбора информации от посетителей веб- страниц. Атрибуты тега:

name ="…"- имя переменной в которой будут переданы значения в данном элементе формы.

type ="…"- указывает на способ обработки собранных данных.

Атрибуты name и type используются совместно с тегом input.

Способов приёма и обработки данных несколько видов - это различные значения атрибута type для тега input:

text – текстовое поле;

password – текстовое поле для ввода пароля;

radio – кнопка – переключатель;

checkbox – кнопка флажок;

hidden – скрытое поле;

submit – кнопка отправки формы;

reset – кнопка для сброса введенных данных;

color – поле для ввода цвета;

date – поле для ввода даты;

datetime – поле для ввода даты и времени с учетом часового пояса;

datetime - local – поле для ввода даты и времени без учета часового пояса;

email – поле для ввода адреса электронной почты;

month – поле для ввода года и месяца;

number – поле для ввода чисел;

range – ползунок для выбора числа из некоторого диапазона;

tel – поле для ввода телефона;

time – поле для ввода времени;

week – поле для ввода года и недели;

url – поле для ввода адреса url;

file – поле для выбора отправляемого файла;

image – создает кнопку в виде картинки.

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

button – создание кнопки;

select – выпадающий список;

label – метка, которая отображается рядом с полем ввода;

textarea – многострочное текстовое поле.

Атрибуты name и value

У всех элементов ввода можно установить атрибуты name и value. По атрибуту name можно идентифицировать поле ввода, а атрибут value позволяет установить значение поля для ввода. Например:

<!DOCTYPE html>

<html>

<head>

<title>Формы в HTML5</title>

</head>

<body>

</form>

</body>

</html>

Здесь текстовое поле имеет значение «Tom», как указано в атрибуте value. Методом отправки данных является метод – get, значит данные отправятся через строку запроса, после того как нажмем кнопку Войти.

При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае – это две пары: login = Tom и password = qwerty.

Кнопки

Кнопки представлены элементом button. В зависимости от значения атрибута type можно создавать различные типы кнопок:

submit – кнопка, используемая для отправки формы;

reset – кнопка сброса значений формы;

button – кнопка без какого – либо специального назначения.

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

form – определяет форму, за которой закреплена кнопка отправки;

formaction – устанавливает адрес, на который отправляется форма, если у тега form задан атрибут action, то он переопределяется;

formenctype – устанавливает формат отправки данных;

formmethod – устанавливает метод оправки данных.

<!DOCTYPE html>

<html>

<head>

<title>Формы в HTML5</title>

</head>

<body>

<form>

<p>

<button type="submit" formmethod="get" formaction="index.html"> Отправить </button>

<button type="reset"> Отмена </button>

</p>

</form>

</body>

</html>

Элемент input с атрибутом type =” image ” позволяет использовать в качестве кнопки изображение:

<form>

<p>

<input type="image" src="search.png" name="submit" />

</p>

</form>

Текстовые поля

Однострочное текстовое поле создается с помощью элемента input, со значением атрибута type =” text ”. С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

dirname – устанавливает направление текста;

maxlength – максимально допустимое количество символов в текстовом поле;

pattern – определяет шаблон, которому должен соответствовать вводимый текст;

placeholder – устанавливает текст, который по умолчанию отображается в текстовом поле;

readonly – делает текстовое поле доступным только для чтения;

required – указывает, что текстовое поле обязательно должно иметь значение;

size – устанавливает ширину текстового поля в видимых символах;

value – устанавливает значение по умолчанию в текстовое поле.

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

<body>

<form>

<p>

<button type="submit">Отправить</button>

</p>

</form>

</datalist>

</body>

Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка, при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом type =” search ”.

<form>

</form>

Вместе с полями ввода нередко используются метки, которые представлены элементом label. Метки создают аннотацию или заголовок к полю ввода, указывают для чего оно предназначено. Для связи с полем ввода метка имеет атрибут for, который указывает id поля ввода.

<form>

<p>

<label for="login">Логин: </label>

</p>

<p>

<label for="password">Пароль: </label>

</p>

<p>

<button type="submit">Отправить</button>

</p>

</form>

Числовое поле

Для ввода чисел используется элемент input с атрибутом type=” number”, которое можно настроить с помощью следующих атрибутов:

min – минимально допустимое значение;

max – максимально допустимое значение;

readonly – доступно только для чтения;

required – указывает, что данное поле обязательно должно иметь значение;

step –значение, на которое будет увеличиваться число в поле;

value – значение по умолчанию.

<form>

<label for="age">Возраст: </label>

<p>

<button type="submit">Отправить</button>

</p>

</form>

Как и в случае с текстовым полем, можно прикрепить список datalist с диапазоном возможных значений.

Ползунок

Ползунок представляет шкалу, на которой можно выбрать одно из значений. Для его создания используется тег input с атрибутом type =” range ”.

<form>

<p>

1<input type="range" step="1" min="0" max="100" value="10" id="price" name="price"/>100

</p>

<p>

<button type="submit">Отправить</button>

</p>

</form>

Флажок

Флажок представляет элемент, который находится в двух состояниях: отмеченном и неотмеченном. Создается с помощью элемента input со значение атрибута type =” checkbox ”.

<form>

<p>

<input type="checkbox" checked name="html5"/>HTML5

</p>

<p>

<input type="checkbox" name="dotnet"/>.NET

</p>

<p>

<input type="checkbox" name="java"/>Java

</p>

<p>

<button type="submit">Отправить</button>

</p>

</form>

Атрибут checked позволяет установить флажок в отмеченное состояние.

Переключатели

12 3 4 5 6 7 8 9 10 Следующая ⇒

Читайте также:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2021-04-05; просмотров: 175; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.117.183.150 (0.513 с.)