HTML5 Формы разметка


Содержание материала:

Формы HTML5

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

HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.

Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.

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

Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.

Что такое форма?

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

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

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

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

Модернизация традиционной HTML-формы

Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент

Добавьте немного стилей CSS:

И вот результат:

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

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

Одним из ограничений HTML-форм является то, что разработчик не может контролировать каким способом браузер отображает элементы управления формы. Например, если вы хотите заменить унылое серое поле флажка большим черно-белым полем с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы — создать с помощью JavaScript элемент с поведением, подобным флажку, иными словами, элемент меняет свой внешний вид, когда на нем щелкают.)

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

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

Добавление подсказок

Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется «водяным знаком», так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого подстановочного текста показан на рисунке:

Вверху, когда поле пустое, в нем отображается подстановочный текст. Внизу, когда пользователь щелкает мышью в поле (устанавливая в нем фокус), подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, то поле снова заполняется подстановочным текстом.

Подстановочный текст для поля создается с помощью атрибута placeholder:

Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст — всего лишь приятная примочка, не обязательная для функционирования формы.

В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.

А вот псевдокласс focus обеспечивается лучшей поддержкой, и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом:

Фокус

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

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

Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.

На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент или

(но только в один элемент формы), как показано в следующем примере:

Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.

Семантическая разметка HTML5: использовать или нет?

Введение

Вышедшая в 2014 году пятая версия HTML имеет значительные отличия от HTML4 – это неудивительно, так как временной разрыв между версиями составляет — если брать в расчет версию 4.01 — почти 15 лет! Например, в HTML5 было введено понятие DOM (Document Object Model — «объектная модель документа»), которое существовало и до этого, но не являлось частью языка. Противоречивые мнения вызвало введение семантических тегов: одни считают, что они значительно облегчили жизнь как верстальщикам, так и интернет-пользователям, другие утверждают, что предыдущая версия разметки выглядит более логичной и понятной, а семантические теги являются избыточными. В данной статье мы попробуем ответить на вопрос, который периодически всплывает в различных интернет-сообществах, — зачем нужны семантические теги, и нужны ли они вообще?

Зачем нужны семантические теги

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

Это нововведение уже нашло свое применение в мире смартфонов и ридеров – например, используя браузер Safari на iPhone или iPad, вы можете перейти в режим чтения, когда на экране выводится только текстовая информация страницы – и воспринимать ее гораздо легче, ведь нет отвлекающих элементов в виде картинок, баннеров, рекламы. Однако этот режим будет доступен лишь в том случае, если страница имеет семантическую разметку, благодаря которой браузер может понять, где находится заголовок, где текст, а где навигация. Как раз ту разметку, о которой идет речь.

Не стоит забывать и о поисковых роботах – семантическая разметка поможет им правильно проанализировать страницу, отделив важную информацию, касающуюся содержимого страницы, от второстепенной (шапка, подвал, навигация). И это обязательно положительно скажется на SEO-продвижении сайта.

Таким образом, главное предназначение семантической разметки – делать структуру документа более понятной на всех этапах использования, от разработки до публикации в сети и индексации поисковыми машинами.

Структура документа в HTML4 и HTML5

Чтобы различие между версткой было более наглядным, рассмотрим реализацию структуры документа в HTML4 и HTML5 в схемах:

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

Новые семантические элементы разметки HTML5

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

Топ-пост этого месяца:  Увеличение конверсии сайта при помощи меню в 4 этапа

— формирует верхнюю часть элемента или страницы (шапку, основной заголовок или группу заголовков), при этом может располагаться в любой части страницы или вообще отсутствовать;

Ранее группу заголовков (например, уточняющие подзаголовки) советовали объединять тегом , но позднее было принято решение удалить этот элемент из спецификации, поэтому использовать его не рекомендуется.

Название

— создает раздел с навигационными ссылками на странице или на сайте; в качестве элементов панели навигации могут выступать теги списков

    , и тег адреса документа , допускается использование заголовков (к примеру,

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

— разделяет страницы или записи на тематические блоки, но при этом, в отличие от тега

— формирует нижнюю часть элемента или страницы, которая обычно состоит из технической и юридической информации, контактных данных;

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

Вывод

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

Шпаргалка по HTML5 Формам

Дата изменения: 18.05.2015

Создание HTML формы. Тег Form

Тег form — контейнер, в котором могут содержаться элементы web форм, такие как input, checkbox, radio button и т.д.

Задание пути отправления данных (данные отправляются в указанный обработчик (метод отвечающий за обработку данных не сервере) указанным методом GET или POST

Поле для ввода числа

INPUT type=»number»

Поле для ввода даты

INPUT type=»date»

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

INPUT type=»color»

Поле для ввода числа слайдером

INPUT type=»range»

Поле для ввода времени

INPUT type=»time»

Поле для ввода даты и времени

Поле для ввода Email

INPUT type=»email»

Поле для поиска

INPUT type=»search»

Поле для ввода номера телефона

INPUT type=»tel»

Поле для ввода url адреса

Текстовое поле TEXTAREA

Радио кнопка (переключатели) Radio-Button

Флажки Check-Box

Выбор Select

Кнопка Submit

Кнопка Button

Кнопка для выбора файла для загрузки File

Атрибуты элементов формы

accept— Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

autocomplete — Включает или отключает автозаполнение.

autofocus — Устанавливает фокус в поле формы.

checked — Предварительно активированный переключатель или флажок.

disabled — Блокирует доступ и изменение элемента.

action — Определяет адрес обработчика формы.

enctype — Устанавливает способ кодирования данных формы при их отправке на сервер.

method — cообщает браузеру каким методом следует передавать данные формы на сервер.

novalidate— Отменяет встроенную проверку данных на корректность.

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

list — Указывает на список вариантов, которые можно выбирать при вводе текста.

max — верхнее значение для ввода числа или даты.

maxlength — Максимальное количество символов разрешенных в тексте.

min — Нижнее значение для ввода числа или даты.

multiple — Позволяет загрузить несколько файлов одновременно.

name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern — Устанавливает шаблон ввода.

placeholder — Выводит подсказывающий текст.

readonly — Устанавливает, что поле не может изменяться пользователем.

required— Обязательное для заполнения поле. requeied

size — Ширина текстового поля.

step — Шаг приращения для числовых полей.

tab-index — Определяет порядок перехода между элементами с помощью клавиши Tab.

type — Сообщает браузеру, к какому типу относится элемент формы.

value — Значение элемента.

Разметка html5 страницы каталога товаров

Доброго времени суток. С выходом HTML5 появилось множество различных дополнительных тегов и многое другое. А я хочу использовать их правильно и как следует. Изучил несколько статей в интернете (для примера). Но хочу на всякий случай уточнить некоторые нюансы.

Планируется страница, которая выводит список товаров определённой категории. На странице будет: главное меню для навигации по сайту, сайтбар с фильтрами, карточки товаров. Разметку в общем виде я себе представляю следующим образом:

Если поместить код в HTML 5 Outliner, то окажется, что

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

HTML разметка текста

Основные термины и понятия в HTML разметке:

  1. Article >, nav >, header >, footer > — HTML теги, которые используются для разделения информации на блоки.
  2. Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
  3. Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.

В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.

Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками div >.

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

Основная проблема — большое количество блоков div >, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.

HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как «nav» для навигационной панели, или «footer» для подвала.

Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.

Семантические элементы. HTML 5

Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:

  1. Header > — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
  2. Nav > — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков

Построение форм

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

Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.

Инициализация формы

Чтобы добавить форму на страницу мы будем использовать элемент

Демонстрация формы для входа

На практике

С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.

Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент

Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:

В качестве напоминания — класс row добавляет белый фон и обеспечивает некоторый вертикальный padding , в то время как класс grid выравнивает по центру наш контент в середине страницы и обеспечивает некоторый горизонтальный padding .

Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.

В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:

В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.

Чтобы сделать это, добавим класс why-attend к маркированному списку.

С этим добавленным классом создадим новый раздел для стилей страницы Регистрация в нижней части нашего файла main.css. В этом разделе мы будем использовать класс, чтобы выбрать маркированный список и добавить list-style как square , а также некоторые margin .

Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:

Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу

Далее, внутри элемента

Здесь мы видим, что каждое поле формы вложено в элемент . Поле для «Имя» использует элемент со значением атрибута type как text , в то время как поле «Email» использует элемент со значением email у атрибута type .

Оба поля формы — «Имя» и «Email» включают в себя логический атрибут required и атрибут placeholder .

Для поля «Количество билетов» применяется элемент и вложенные элементы . Сам элемент включает в себя логический атрибут required , а первый элемент включает логический атрибут selected .

Для поля комментариев используется элемент

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

Форма на месте, пора добавить к ней стили. Мы начнём с нескольких стилей по умолчанию для самого элемента и для элементов , и

В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:

Мы начали с размещения 22-пиксельного margin снизу формы, чтобы вертикальное пространство помогло отделить его от других элементов. Затем добавили некоторые шрифтовые свойства, в том числе насыщенность, размер, высота строки и семейство для всех элементов , и

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

Добавим некоторые стили для элементов внутри . Поскольку мы можем добавить дополнительные элементы позже, добавим класс register-group к нашему существующему элементу , оттуда мы можем применить уникальные стили к элементам вложенных в него.

После того, как класс register-group находится на месте, мы добавим несколько стилей для элементов, вложенных в . Эти стили появятся в нашем файле main.css, ниже существующих стилей формы.

Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.

Пока всё идёт хорошо и наша форма становится довольно красивой. Единственный оставшийся элемент, который ещё не стилизован — это кнопка для отправки. Для кнопок у нас уже есть некоторые существующие стили и мы можем применить их здесь. Если мы мысленно перенесёмся к нашей главной странице, наш раздел hero содержит кнопку, которая получает несколько стилей через класс btn .

Добавим значение btn к атрибуту class , наряду с новым классом btn-default к нашей кнопке для отправки. Мы будем использовать имя класса btn-default специально, так как эта кнопка выводится на белом фоне и стиль для кнопок по умолчанию передвинется вперёд.

Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.

Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:

Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.

Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.

Рис. 10.07. Наша страница регистрации с формой

Демонстрация и исходный код

Ниже вы можете скачать исходный код сайта на данный момент.

Резюме

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

Напомним быстро, что мы обсудили в этом уроке:

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

Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.

HTML5 Формы: разметка

You are using an outdated browser. Please upgrade your browser.

By signing up, you agree to our Terms of Service and Privacy Policy.

HTML (HyperText Markup Language) – наиболее популярный инструмент разметки, который уже долгое время не теряет свою актуальность среди разработчиков. HTML5 – новая версия HTML стандарта и языка разметки, которая выпущена для улучшение языка, для работы с новыми мультимедийными элементами и приложениями. HTML5 обеспечивает удобную читаемость программ для человека и обработки для браузеров. Имеет поддержку части тэгов HTML4 и языка JavaScript.

Для каких целей создан HTML5? Прежде всего, это отказ от плагинов наподобие Flash, и использование новых элементов HTML5. Второе, это снижение потребности использовать JavaScript и дополнительный код. Обеспечение согласованной работы между веб-браузерами и устройствами. А также для того, чтобы сделать весь процесс разработки как можно более упрощенным, прозрачным и легким.

Какие же основные преимущества HTML5?

Также среди нововведений HTML5 стоит выделить следующие элементы: Figure – рисунок; Header – заголовок страницы; Section – крупный блок страницы; Footer – нижняя часть страницы; meta charset = «UTF-8» – обновление кодировки страницы; Nav – навигация по сайту; As > – дополнительный контент в виде боковой колонки; Article – статья, основная часть контента.

HTML5 помогает поисковикам найти ценную информацию на сайте.

HTML5 позволяет машинам “читать” изображение и анимацию. Этого не было раньше.

HTML5 поддерживается популярными и широко используемыми мобильными устройствами. Также применения данной разметки не требует покупки лицензии, что, в свою очередь, очень удобно и выгодно. Отсутствует какая либо возможная угроза безопасности проекта, ведь нет «скрытых» сценариев и SQL-запросов в программном коде. Есть возможность легко сделать комплекс предприятий по внутренней и внешней оптимизации сайта, это дает возможность хорошо оптимизировать сайт в поисковых систем по запросам посетителей, что в итоге дает прирост трафика и потенциальных клиентов.

CSS-фреймворки для адаптивного веб-дизайна описаны детально здесь .

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

Для всех сайтов на HTML предлагаем качественный и быстрый хостинг с тестовым периодом . Обращайтесь!

Структурная разметка с HTML5. Часть 1.

Одной из целей HTML5 было создать разметку более доступной и понятной. Одним из решений было добавить несколько новых структурных тегов.

Почти каждая веб страница при разметке разбивается на структурные блоки (секции). Такими структурными секциями являются шапка (header), подвал (footer), меню, блок контента и т.д. До прихода HTML5 веб разработчики для обозначения подобных блоков использовали нейтральный тег

Чтобы в разметке появилась подобная «карта» в HTML5 были добавлены структурные теги: section, nav, article, header, footer, aside. Это только основные теги, на них пока и остановимся.

Так какие же выгоды нам сулят новые теги

Поисковая оптимизация

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

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

Как конкретно поисковики будут обрабатывать такую разметку и какое значение ей придают пока покрыто туманом неизвестности (по крайней мере для меня).

Доступность

Посмотрим на станицу интернет магазина

Обычные пользователи за доли секунды определят, где на странице шапка, подвал, навигация и основное содержимое. Но подумай как на этом сайте будет ориентироваться пользователь, который использует голосовой браузер: ему придется «пробраться» через всю шапку, включая основную навигацию, затем узнать что у него лежит в корзине, следом ознакомиться с колоссальным второстепенным меню и только потом он доберется до основного содержимого страницы. Думаю немного людей обладают таким упорством, приходя в магазин.

Представь, насколько бы упростилась их жизнь в Веб, если бы они только одной командой могли переходить к контенту, от контента к меню, от меню к вспомогательному блоку, а от туда снова к контенту. Структурные теги HTML5 дадут такую возможность.

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

Вникаем в назначение структурных тегов

В HTML 4 никаких проблем с разметкой блоков страницы не было: был только

section

Представляет блок, который служит для группировки взаимосвязанных объектов или для разделения текста на разделы. Как правило содержит заголовок.

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

Что это: несколько

?! Да, тебе не показалось и это не ошибка. Об этом будет отдельный материал.

Может показаться, что — это современная замена

    если требуется контейнер только для оформления или привязки скриптов (для этого применяй

article

Определяет независимую часть на странице, которая состоит из взаимосвязанных компонентов.

В данной трактовке спецификации самое трудное — это понять что значит «независимая часть». Можно предположить, что независимая — это такая часть, которая имела бы смысл, даже если бы была полностью «вырвана» из окружения. Например, взяли блок со страницы одного сайта, поместили на другой и он там тоже понятен. Под такую трактовку попадают статьи, блоки с курсами валют или баннеры. Верность данной трактовки подтверждает следующее предложение из спецификации:

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

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

Это напоминает ситуацию с путаницей между и . Этот момент разрулили устранением последнего и стало все отлично. Многие веб разработчики негодуют: зачем было усложнять жизнь, если все шло к упрощению и устранению вот таких вот ситуаций?. Почему просто не оставить только ?

Думаю это было бы неправильно. По крайне мере, если оставить как есть. Ведь тогда разметка на была бы ничем не лучше хорошо всем знакомой на

Среди всех этих дискуссий для себя нашел несколько правил, как определить когда же следует использовать :

Может некоторую ясность внесет ?

as >Представляет часть контента, который имеет отношение к основному содержанию, но может быть использовано отдельно от него. Такие участки часто в полиграфии представлены в виде боковой панели.

Упоминание sidebar в спецификации вводит определенную путаницу: многие себе сразу представляют боковую панель. Но тут имеется в виду полиграфический sidebar, куда выносятся пояснения и сноски к основному содержанию. На сайтах же в боковых панелях содержится что угодно: навигация, реклама, рейтинги — контент, который не имеет прямого, а зачастую и косвенного отношения к основному содержимого страницы. Более того, допускается использовать только внутри .

Такая трактовка вызвала негодование сообщества разработчиков и в спецификацию были внесены изменения, а точнее добавлено следующее:

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

Вот только не знаю, лучше ли теперь стало для понимания логической разметки в целом. Продолжу «копание» в следующей части.

Заметка

Может возникнуть резонный вопрос: почему нет примеров? Ответ: чтобы в качестве примера разобрать реальную страницу нужно сначала ознакомится с остальными структурными тегами (nav, header, footer).

Так как спецификация еще в работе, материал со временем может быть поправлен и/или дополнен.

Типы полей ввода HTML5

В HTML5 включены несколько дополнительных типов полей ввода, позволяющих ограничивать данные, которые пользователи смогут ввести, без необходимости прибегать к лишнему JavaScript-коду. Самая отрадная черта этих новых типов полей состоит в том, что, если браузеры не поддерживают их, они по умолчанию превращаются в стандартные текстовые поля ввода. Более того, существуют отличные полизаполнения, позволяющие обеспечить поддержку требуемых функций в устаревших браузерах. Вскоре мы о них поговорим. А пока взглянем на новые типы полей ввода HTML5 и разберем их преимущества.

Браузеры, поддерживающие поле type=»email», будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. В приведенном далее примере кода type=»email» используется наряду с required и placeholder:

Your Email address

Если type=»email» применяется в сочетании с атрибутом required, то попытка отправить форму с данными, не соответствующими требованиям, приведет к выводу на экран предупреждающего сообщения (рисунок 8.6).

В это поле следует ввести электронный адрес.

Кроме того, на многих устройствах с сенсорными экранами (например, Andro . Обратите внимание на виртуальную клавишу с символом @, предназначенную для облегчения ввода адреса электронной почты.

Виртуальная клавиатура на экране iPad при использовании поля ввода type=»email»

Браузеры, поддерживающие поле type=»number», ожидают, что пользователь введет в него числовое значение. Они также по умолчанию отображают элементы управления в виде числовых полей ввода со значениями, изменяемыми с помощью мыши, давая пользователям возможность менять определенное значение, просто нажимая располагающиеся рядом с ним стрелки «вверх/вниз». Вот пример кода:

На рисунке 8.8 показано, как результат будет выглядеть в поддерживающем это поле браузере (Chrome 16).

Поле со счетчиком.

Поведение, которое будет наблюдаться, если вы не введете число, варьируется. Например, Chrome (версии 16) очистит поле, как только оно потеряет фокус, не предусматривая при этом никакой обратной связи, в то время как Firefox (версии 9) позволит ввести все что угодно (поле по умолчанию будет работать как стандартное текстовое поле ввода). В предыдущем примере кода мы задали диапазон допустимых значений, указав минимальное и максимальное значения, как в следующем коде:

Type=»number» min=»1929″ max=»2015″

Числа, не попадающие в этот диапазон, подвергаются (должны подвергаться) особой обработке. Реализация различается в зависимости от браузера. Например, Chrome (версии 16) выводит предупреждающее сообщение, а Firefox (версии 9) ничего не делает.

Как вы, возможно, и предполагали, поля ввода type=»url» предназначены для указания URL-адресов. Подобно полям ввода, относящимся к типам tel и email, поведение рассматриваемого поля почти идентично тому, что наблюдается у стандартного текстового поля. Однако некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран при попытке отправить форму с некорректными значениями. Далее приведен пример кода, включающего атрибут placeholder:

Your Web address

На рисунке 8.9 показано, что произойдет при попытке отправить форму, в соответствующем поле которой неправильно введен URL-адрес, в браузере Chrome (версии 16).

Требуется ввести корректный электронный адрес

Как и в случае с type=»email», на устройствах с сенсорными экранами внешний вид встроенной виртуальной клавиатуры зачастую изменяется исходя из типа поля ввода. На рисунке 8.10 показано, как она будет выглядеть на экране iPad при использовании поля ввода type=»url».

Виртуальная клавиатура на экране iPad при использовании поля ввода type=”url”

Заметили виртуальные клавиши Go, прямой слеш (/) и.com? Поскольку мы использовали тип поля ввода url, они отображаются на экране для облегчения набора URL-адреса (если только вы не собираетесь указать адрес сайта, который не заканчивается на com, в случае чего, как вы сами понимаете, благодарить компанию Apple будет не за что).

Type=»tel» — еще один тип поля ввода, предназначенного для указания контактной информации. Поле типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Вот пример кода:

Telephone (so we can berate you if you’re wrong)

Несмотря на то что предполагается числовой формат вводимых данных, во многих браузерах, даже современных, вроде Chrome 16 и Firefox 9, это поле будет попросту вести себя как текстовое поле ввода. На текущий момент в этих браузерах не предусматривается вывод надлежащих предупреждающих сообщений при попытке отправить форму с некорректными введенными значениями.

Однако, как и в случае с типами полей ввода email и url, устройства с сенсорными экранами зачастую внимательно подходят к типу поля ввода tel, обеспечивая отображение измененной соответствующим образом встроенной виртуальной клавиатуры для облегчения ввода информации. На рисунке 8.11 показано поле ввода типа tel при доступе к нему на экране iPad (под управлением операционной системы iOS 5).

Вы заметили, что на встроенной виртуальной клавиатуре отсутствуют знаки алфавита? Благодаря этому пользователи смогут намного быстрее ввести значение в корректном формате.

Несмотря на то что поле ввода type=»search» работает таким же образом, как и стандартное текстовое поле ввода, некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода. Вот пример кода:

Search the site….

На рисунке 8.12 показано, как будет выглядеть результат применения этого кода в браузере Firefox (версии 9). Обратите внимание, что при стилизации по умолчанию поле ввода является прямоугольным.

Однако в браузере Chrome (версии 16) визуализация на основе того же самого кода получается другой — поле ввода по умолчанию имеет закругленные края и кнопку быстрой очистки справа (рисунок 8.13).

Пример поля ввода tel на экране iPad

Поле поиска в Firefox

Поле поиска в Chrome.

Говоря об атрибуте pattern=»», сразу хочется предупредить: «Бойтесь, очень бойтесь» (помните, из какого фильма эта реплика?). На мой взгляд, эта реплика с тем же успехом применима к регулярным выражениям. Если вы не знаете, что такое регулярные выражения, то смею заметить, меньше знаешь — крепче спишь. Но если знаете, а еще хуже, понимаете их, то следующий раздел — для вас.

Узнайте о регулярных выражениях.

Если вы смотрели фильм «Изгоняющий дьявола» (The Exorcist) в одиночку, на кладбище, в полночь, во время Хеллоуина, то, вероятно, готовы узнать о регулярных выражениях. Читайте о них по адресу http://en. wikipedia. org/wiki/Regular_expressions.

Атрибут pattern позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Вот пример кода:

Your Name (first and last)

При написании книги я потратил примерно 458 секунд на поиск в Интернете регулярного выражения, которое соответствовало бы синтаксису имени и фамилии. Если указать регулярное выражение в виде значения атрибута pattern, то поддерживающие браузеры будут ожидать ввода соответствующего синтаксиса. Кроме того, при использовании этого атрибута в сочетании с атрибутом required некорректно введенные значения будут подвергаться показанной далее обработке в поддерживающих их браузерах. В данном случае я попытался отправить форму, не указав фамилию (рисунок 8.14).

Рисунок 8.14. Выводится предупреждение о некорректном вводе данных

Поле ввода type=»color» генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. Вот пример кода:

Your favorite color

К сожалению, в настоящее время очень немногие браузеры поддерживают тип поля ввода color. Похоже, что только Opera (версии 11) обеспечивает палитру цветов. Если требуемый цвет не отображается на палитре изначально, то, нажав располагающуюся внизу кнопку Other (Другие), можно открыть палитру цветов, используемую в операционной системе по умолчанию (рисунок 8.15).

Отображение палитры цветов.

Типы полей ввода date и time.

Согласно задумке, новые типы полей ввода date и time призваны обеспечить пользователю удобный выбор значений дат и времени. Если вам когда-либо доводилось приобретать в Интернете билеты, например, на спортивные соревнования, то вы, скорее всего, пользовались при этом элементом управления в виде календаря того или иного рода. Для обеспечения такой функциональности почти всегда применяется JavaScript (обычно это библиотека jQuery), однако есть надежда, что это стало возможным с использованием одной лишь HTML5-разметки.

Вот пример кода:

Как и в случае с полем ввода типа color, в настоящее время немногие браузеры поддерживают поле типа date, и в большинстве из них поля такого типа по умолчанию работают как стандартные текстовые поля ввода. Однако в старом добром браузере Opera эта функциональность уже реализована, а На рисунке 8.16 показано, как в Opera (версии 11) будет выглядеть результат визуализации на основе приведенного выше примера кода.

Календарь в браузере Opera

Существует несколько разных «модификаций» полей ввода типов date и time. Далее приведен их краткий обзор.

Вот пример кода:

Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца, например 2012-06.

На рисунке 8.17 показано, как все это будет выглядеть в браузере.

Пользователь может выбрать в календаре целый месяц

Вот пример кода:

При использовании типа поля ввода week соответствующий инструмент-указатель позволит пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате, например, 2012-W47.

На рисунке 8.18 показано, как все это будет выглядеть в браузере.

Пользователь выбирает в календаре всю неделю

Вот пример кода:

Поле ввода, относящееся к типу time, допускает ввод значений в 24-часовом формате, например 23:50. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени (рисунок 8.19).

Поле для ввода значения времени

Datetime и datetime-local.

Вот пример кода:

На рисунке 8.20 показано, как результат выполнения этого кода будет выглядеть в браузере Opera (версии 11).

На календаре выбран текущий день (на момент выполнения кода)

На экране устройств под управлением операционной системы iOS все это будет выглядеть еще лучше, о чем свидетельствует рисунок 8.21.

При вводе данных в поле типа datetime генерируются значения даты и времени (разделенные буквой T), а затем помечается часовой пояс (буквой Z в случае с UTC (Universal Coordinated Time — универсальное координированное время) либо знаком «+» или «-», если речь идет о величинах смещения). 25 октября 2009 года в системе UTC будет выглядеть так:

Поскольку UTC является практически эквивалентом GMT (Greenwich Mean Time — среднее время по Гринвичу), разобраться в смещениях не составит труда.

Например, тихоокеанское стандартное время (Лос-Анджелес) на 8 часов отстает от GMT (UTC — 8 часов). Это нашло бы свое отражение во вводимом значении, как показано далее:

Результат выполнения того же кода на экране iPad

Версия datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе.

ИЗМЕНЕНИЕ ШАГОВЫХ ПРИРАЩЕНИИ.

При работе с элементами управления в виде числовых полей ввода различных типов со значениями, изменяемыми с помощью мыши, вы можете менять шаговые приращения (величину инкремента), используя для этого атрибут step. Например, для шага величиной 4 часа за один раз вам потребуется ввести значение, равное 4 часам и выраженное в виде 14 400 секунд (60 (секунд) умножить на 60 (минут) и умножить на 4 (часа)). Далее приведен пример с datetime, измененный для использования 4 часовых шагов во временном селекторе:

Поле ввода типа range позволит создать такой элемент интерфейса, как ползунок. Вот пример кода:

На рисунке 8.22 показано, как результат будет выглядеть в браузере Safari (версии 5.1).

Ползунок в браузере Safari

Диапазон по умолчанию — от 0 до 100. Однако, указав значения для min и max в предыдущем примере, мы ограничили диапазон, и теперь он составляет от 1 до 10.

Серьезная проблема, с которой я столкнулся при работе с полем ввода типа range, заключается в том, что для пользователя никогда не отображается текущее значение. Хотя ползунок предназначен только для выбора числовых значений в некоем диапазоне, мне зачастую требовалось, чтобы текущее значение отображалось во время его изменения. На данный момент сделать это с помощью HTML5 невозможно. Однако если вам потребуется обязательно обеспечить отображение текущего значения, выбранного ползунком, то вы сможете легко сделать это, используя незамысловатый JavaScript-код. Измените предыдущий пример кода следующим образом:

Здесь мы добавили атрибут onchange и элемент с идентификатором range. А теперь добавим следующий небольшой JavaScript-фрагмент:

Этот код лишь извлекает текущее значение, выбранное с помощью ползунка, и отображает его в элементе с идентификатором range (в нашем теге ). Используем также немного CSS-стилизации, чтобы сделать значение крупнее и задать для него красный цвет. На рисунке 8.23 демонстрируется итоговый эффект, при котором значение будет обновляться по мере движения ползунка.

При движении ползунка отображается текущее значение

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 7. Создание форм в html

Создание и работа с формами в html

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

Атрибуты формы:

action (англ. «действие»)
Файл на сервере с кодом для отработки отосланных данных
action=»http://www.название.домен/имя программы»
enctype (англ. «тип кодировки») text/plain (обычный текст)
application/x-www-dorm-urlencoded (для метода Post отправки формы)
multipart/form-data (для метода Post, если прикрепляются файлы)
method (метод отправки данных) post
get
  • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
  • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
  • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

Элементы формы html

  • Текстовое поле html:
  • Значение атрибута type — text — указывает на то, что это именно текстовое поле
  • size — размер текстового поля в символах
  • maxlength — максимальное кол-во вмещающихся в поле символов
  • value — первоначальный текст в текстовом поле
  • name — имя элемента, необходимо для обработки данных в файле-обработчике
  • Поле ввода пароля html:

    Вместо текста в поле отображается маска — звездочки или кружочки

    Кнопка submit html:

    Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

    Кнопка очистки формы html:

    Результат:

    Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

    Html флажок:

    ASP
    javascript
    PHP
    HTML

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

    Атрибут checked устанавливает сразу элемент отмеченным

    Radio кнопка html:

    ASP
    Javascript
    PHP
    HTML

    radio кнопка html служит для единственного выбора из нескольких вариантов

    Атрибут checked устанавливает сразу элемент отмеченным

    Выпадающий список HTML

    Рассмотрим пример добавления выпадающего списка:

    • Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
    • Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
    • Атрибут selected у пункта ( option ) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

    Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

    Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1 :

    Текстовая область в HTML

    Для ввода большого фрагмента текста служит элемент текстовая область:

    • Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
    • Атрибут rows определяет количество строк в элементе

    Другие элементы

    • Обычная кнопка

    Элемент кнопка-изображение

    Элемент загрузка файла

    Для прикрепления файла к форме существует специальный элемент управления:

    При его использовании значение кодировки формы (атрибут enctype у тега form ) должен иметь значение multipart/form-data

    Скрытое поле

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

    Дополнительные элементы и атрибуты

    • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

    В примере создана надпись (тег label ) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

    Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

    Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

    Для визуального оформления группы объектов можно использовать элемент fieldset :

    Книги HTML
    ASP
    javaScript

    Можно задать очередность передвижения по элементам клавишей TAB :

    Элемент будет первым в очереди переходов.

    Топ-пост этого месяца:  Банк United BTC Bank — надёжный банк для современных людей
  • Добавить комментарий