Значения атрибутов
Каждый атрибут тега содержит значение определённого типа и формата написания. Различают следующие типы значений: ключевые слова, числа, дата и время, цвета, 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.
Значение | Формат | Пример |
---|---|---|
Год | ГГГГ | 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 с их описанием.
Параметр | Описание | Пример |
---|---|---|
протокол | Сетевой протокол. Для гипертекстовых документов это 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>