Значения атрибутов

Влад Мержевич

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

Для всех атрибутов характерны следующие принципы.

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

Не все атрибуты имеют значение по умолчанию, в случае отсутствия такого атрибута или при его некорректном значении, атрибут пропускается.

Ключевые слова

Это заданный фиксированный набор определённых слов, которые допустимо подставлять в качестве значений атрибутов. Ключевые слова не чувствительны к регистру и их можно писать любым удобным способом. Так, значения handheld, Handheld и HANDHELD по своему действию одинаковы.

В примере 1 показано создание формы, которая отправляется на сервер методом POST с помощью значения post атрибута method.

Пример 1. Метод отправки формы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ключевые слова</title>
 </head> 
 <body>
  <form method="post">
   <input name="user" placeholder="Введите имя">
   <input type="submit" value="Отправить">
  </form>
 </body> 
</html>

В данном примере в элементе <form> используется атрибут method со значением post. Если этот атрибут не указать, то будет подставляться значение get, применяемое по умолчанию. Для первого элемента <input> атрибут type не задан, поскольку он подставляется автоматически со значением text, а для второго <input> атрибут type уже указан для создания кнопки отправки формы.

Числа

К числам относятся: положительные целые числа, содержащих одну или несколько цифр от 0 до 9; отрицательные числа; а также вещественные или дробные (например, 0.5).

Положительные целые числа

Активно применяются когда надо задать количество колонок, ограничить размер поля формы и количество вводимых символов, установить ширину и высоту рисунка и др. В примере 2 показано создание нумерованного списка, начинающегося с 11.

Пример 2. Использование целого числа

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Целое число</title>
 </head>
 <body>
  <ol start="11">
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ol>
 </body>
</html>

Отрицательные целые числа

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

Для указания отрицательного числа перед ним ставится знак минус (-) без пробелов (например: -15). В примере 3 показано использование отрицательных значений.

Пример 3. Число со знаком минус

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отрицательные числа</title>
 </head>
 <body>
  <form>
   <p>Введите число с шагом 2
   <input type="number" min="-50" max="50" step="2" value="-10"></p>
  </form>
 </body>
</html>

Браузер Firefox не поддерживает тип number и вместо него отображает обычное текстовое поле.

Вещественные числа

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

Примеры вещественных чисел: -0.84, 3.1415926, 1.717.

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

3.1415926e5 = 3.1415926 × 105 = 3.1415926 × 100000 = 314159.26

5e-2 = 5 × 10-2 = 5 / 100 = 0.05

78e2 = 78 × 102 = 7800

Браузер Opera некорректно работает с вещественными числами, в которых есть заглавная буква E, так что вставляйте строчную букву e.

Дата и время

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

Дата и время задается в особом формате, пример которого показан в табл. 1.

Табл. 1. Форматы даты и времени
Значение Формат Пример
Год ГГГГ 2014
Месяц и год ГГГГ-ММ 2014-12
Полная дата ГГГГ-ММ-ДД 2014-12-23
Дата и время с минутами ГГГГ-ММ-ДДTчч:мм 2014-07-24T18:18
Дата и время с секундами ГГГГ-ММ-ДДTчч:мм:сс 2014-07-24T18:18:18
Дата и время с часовым поясом ГГГГ-ММ-ДДTчч:мм:сс±чч:мм 2014-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Цвета

Значение цвета представляет собой три числа в диапазоне от 0 до 255 в шестнадцатеричном представлении описывающие красную, зелёную и синюю компоненту в цветовом пространстве sRGB. Каждое значение цвета должно начинаться с символа решётки (#), после которого могут идти следующие шесть цифр или букв в любом регистре: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Другие символы не допускаются. Подробнее о цвете в HTML смотрите здесь.

URL

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

Табл. 2. Параметры URL
Параметр Описание Пример
протокол Сетевой протокол. Для гипертекстовых документов это HTTP. http://
https://
имя хоста Адрес сайта. htmlbook.ru
www.google.com
порт Системный ресурс, выделяемый веб-серверу. По умолчанию имеет значение 80, его можно не указывать. :80
путь Путь к документу на сайте. /open/doc.html
строка запроса Строка, в которой передаются параметры GET-запроса со значениями. Пишется после знака вопроса (?). ?name=vasya
хэш Строка после знака решётки (#). #top

В зависимости от наличия тех или иных параметров различают абсолютные и относительные адреса. Абсолютный адрес содержит порт и имя хоста, относительный — путь к документу. Строка запроса и хэш допустимо добавлять к адресу любого типа. Если URL содержит только хэш, то в текущем документе произойдёт переход к элементу, у которого задано id="имя_хэша". Решётка в атрибуте id в таком случае не пишется.

На URL влияет элемент <base> с атрибутом href, адрес документа с его учётом может оказаться другим, чем тот, что задан явно.

Вопросы для проверки

1. Коля написал ошибочное число в следующем коде, но валидатор не выдал никакой ошибки. Почему?

<input value="36FG">

2. Даша использовала число 12g5 в строке

<input type="number" value="12g5">

Но браузер Chrome не показал никакого результата. Почему?

3. Сколько способов есть в HTML чтобы задать оранжевый цвет?

4. Адрес ссылки имеет следующий код. Но на странице нет элемента с идентификатором local. Что произойдёт, если щёлкнуть по такой ссылке?

<a href="#local">ссылка</a>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.