4.2.2. Новые элементы форм html5
HTML5 добавляет 5 новых элементов форм. Форма progress показывает процесс загрузки. Например:
<progress max="100" value="25">25%</progress>
Форма meter показывает шкалу измерения. Например:
<meter value="50" min="0" low="20" optimum="50" high="80" max="100"></meter>
Форма keygen используется для создания пары ключей, один из которых передается через форму на сервер:
<keygen name="key" keytype="rsa" challenge="challenge" />
Форма datalist используется для ввода элемента с возможными значениями в datalist, описанными c помощью элементов option. Элемент input связывается с элементом datalist c помощью атрибута list:
<input list="company" />
<datalist id="company">
<option value="BMW">
<option value="Ford">
<option value="Volvo"> </datalist>
Элемент output определяет область, в которую выводится информация с помощью скриптов. Рассмотрим пример
<!-<DOCTYPE html>
<--Пример pr17: форма -->
<html>
<head><title> Новые формы</title></head>
<body>
<hr> <h1>PROGRESS</h1>
<form>
<progress max="100" value="75">75%</progress>
</form>
<hr> <h1>METER</h1>
<form>
<meter value="50" min="0" low="20" optimum="50" high="80" max="200"></meter>
</form>
<hr> <h1>KEYGEN</h1>
<form>
<keygen name="key" keytype="rsa" challenge="goodby" />
</form>
<hr> <h1>DATALIST</h1>
Элемент input со значениями в datalist c помощью атрибута list.
<form>
<input list="company" />
<datalist id="company">
<option value="BMW">
<option value="Ford">
<option value="Volvo"> </datalist>
</form>
<hr><h1>OUTPUT</h1>
Определяет область, в которую выводится информация.
<form action="" oninput="out.value=range.value">
<div>
<input type="range" name="range" min="0" max="100" value="25" />
</div>
<div>
<output name="out">20</output>
</div>
</form>
</body></html>
Новые типы ввода элемента <input>
HTML5 предоставляет 13 новых типов ввода:
type=email – текстовое поле для адресов электронной почты;
type=number – числовое поле со счетчиком управления;
type=range – управление числом с ползунком;
type=search – текстовое поле для поиска;
type=tel – текстовое поле для телефонных номеров;
type=url – текстовое поле для URL-адресов;
type=color – выбор цвета;
type=date – поле даты (с управлением календарем) с указанием года, месяца и даты (без часового пояса);
type=datetime – поле даты (с управлением календарем и временем);
type=datetime-local – поле даты (местное время);
type=month – поле даты с указанием месяца;
type=week – определяет поле даты с указанием недели;
type=time – определяет поле даты (с управлением календарем) с указанием часа, минуты, секунды, и доли секунды (без часового пояса):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
<input type="number" min max step />
новый тип input – range служит для ввода значения из диапазона
<input type="range" min max step />
Пример создания бегунков с range input.
<form method="post">
<h1> Total Recall Awesomness Gauge </h1>
<input type="range" name="range" min="0" max="10" step="1" value="">
<output name="result"> </output>
</form>
Если step установлен как 1, будет 10 значений для выбора. Мы также используем в своих интересах новый элемент output
Новые атрибуты ввода HTML5. Атрибут AUTOFOCUS – при загрузке страницы автоматически передает фокус элементу. Например:
<input type="text" autofocus />
Атрибут FORM связывает элемент с формой.
<form action="" id="form">
<div><input type="text" name="login" /></div>
<div><button type="submit"></button></div>
</form>
<input type="email" name="email" form="form" />
Атрибут PLACEHOLDER – устанавливает подсказывающий текст в поле ввода. Например:
<input type="password" placeholder="enter your password"/>
Состояние off можно использовать, если вводимые данные строго конфиденциальны, либо если эти данные никогда не будут использоваться повторно:
<input type="text" autocomplete="off"/>
Атрибуты formaction, formenctype, formmethod, formtarget добавляются к элементам, отвечающим за отправку форм, и переопределяют соответствующие им атрибуты форм. Эти атрибуты поддерживаются элементами ввода и кнопками:
<input type="submit" formmethod ="post" />
Атрибут formaction – для переопределения действия элемента формы;
атрибут formenctype – для переопределения enctype элемента формы;
атрибут formmethod – для переопределения метода элемента формы;
атрибут formnovalidate – для переопределения NOVALIDATE элемента формы;
formtarget – главный целевой атрибут.
Атрибут required устанавливает, что поле не пройдет валидацию, если его значение пусто, либо не выбрано для checkbox, radio. Например:
<input type="text" name="Bob" placeholder="Enter your name" required>
Атрибут pattern позволяет создавать регулярное выражение, которому должны соответствовать вводимые данные.
Атрибут SET CUSTOM VALIDITY – позволяет задать собственно сообщение валидации.
<form action="">
<div><input type="email" name="email" required/></div>
<div><input type="password" name="pass1" required/></div>
<div><input type="password" name="pass2" required/></div>
<div><input type="submit" value="Register"/></div>
</form>
Атрибут autocomplete уточняет, что поле должно / не должно автозаполнятся или быть предварительно заполнено браузером на основании прошлых записей пользователя. Это может быть, например, номер кредитной карты или одноразовый пароль. По умолчанию автозаполнение включено, если вы хотите отключить, установите его в положение OFF.
Валидация формы. Традиционно валидация формы использует код JavaScript, чтобы проверить входные данные или обеспечить заполнение необходимых полей перед отправкой формы. В HTML введен атрибут required. Если атрибут required присутствует, то поле непустое при отправке формы. Следующий пример ввода гарантирует, что поле имеет значение и что это значение есть адрес электронной почты:
<input type="email" id="email_addr" name="email_addr" required />
Для валидации можно использовать атрибут pattern, который содержит регулярное выражение для проверки поля ввода. Для примера предположим, что номер состоит из трех прописных букв, за которыми следуют четыре цифры:
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" />
Атрибут Formnovalidate может применяться для input or button элементов. Если он есть, то проверка данных формы отключена, например:
<input type="submit" formnovalidate value="Save">
Вот пример, который отображает пользовательские ошибки, если значения в двух полях не совпадают.
<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">
<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">
<script>
function check(input) {
if (input.value != document. getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Атрибут Placeholders позволяет создать указатели заполнения полей (подсказки, отображаемые внутри текстовых полей):
<input name="email" type="email" placeholder ="doug@givethesepeopleair.com" />
Атрибут required определяет, обязательно ли заполнение данного поля, и назначается двумя способами:
<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">
Форма не может быть подтверждена, если поле "someInput" пусто.
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
Если поле оставить пустым и нажать кнопку подтверждения формы, текстовое поле будет подсвечено.
Атрибут Autofocus используется, если определенное поле должно быть «выбрано» или сфокусировано, по умолчанию:
<input type="text" name="someInput" placeholder="gogo" required autofocus>
Атрибут pattern позволяет вставлять регулярные выражения для проверки определенного текстового поля прямо в разметку:
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go </button>
</form>
Шаблон [A-Za-z]{4,10} вводит прописные и строчные латинские буквы. Каждая строка должна содержать не менее 4 и не более 10 символов.
Для определения поддержки атрибутов cоздадим элемент input и выясним, распознан ли браузером атрибут pattern. Если так, то браузер поддерживает атрибуты HTML5, иначе – нет.
<script>
if (!'pattern' in document.createElement('input') ) {
// …
}
</script>
Теги div и span. Тег <div > Блок </div> – важный тег, используемый для форматирования больших блоков текста HTML-документа. Устаревший атрибут align отвечает за выравнивание содержимого внутри блока: left – по левому краю; right – по правому краю; center – по центру; justify – выравнивается по содержимому. Атрибут Title позволяет создавать всплывающий текст над надписью. Style – стандартный набор атрибутов стилей. Пример: < div ALIGN="JUSTIFY">По краю содержимого</DIV>
Тег div является одним из основных элементов блочной верстки. В сочетании с таблицами стилей, используется для разметки страницы, разбивки страницы на независимые секции.
Примеры:
<div style="background: #ff0000;"> Блок красного цвета</div>
<div style="text-align:center;">Выравниваем текст по центру</div>
Чтобы не описывать стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей. Затем создается класс с именем селектора, а для тега <div> добавляется параметр class или id.
<div class="block1">текст</div>
Стандартные атрибуты тега div:
<div class = имя_класса> Определяет имя класса для элемента </div>
<div dir= rtl , lt> Определяет направление текста в элементе</div>
<div id = id > Определяет уникальный id для элемента</div>;
<div lang =код_языка> Определяет код языка в элементе </div>;
<div style =опред_стиля> Определяет инлайновый стиль элемента</div>
<div title = текст > Определяет дополнительную информацию </div>
Необходимо ли использовать div, если есть доступ к header, article, section, и footer? Смысл использовать <div> есть, если нужно обернуть блок кода в элемент, чтобы позиционировать контент. Однако лучше использовать элементы <article> и <nav> соответственно.
Тег <span> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца <p> можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Синтаксис <span>...</span>
Метатеги. Информация, расположенная в заголовочной части веб-страницы, предназначена главным образом для поисковых систем. Ее назначение – сжатое описание страницы, которое позволило бы правильно позиционировать страницу в каталоге поискового сервера и в списке ссылок, выданных пользователю в ответ на запрос. Среди главных элементов заголовочной части следует отметить название страницы, помещаемое между дескрипторами <title> и </title>, а также аннотацию и список ключевых слов, вводимых с помощью мета-записей keywords и description.
Любой метатег размещается в заголовке HTML-документа между тегами <head> и </head> и состоит из следующих атрибутов:
<META HTTP-EQUIV="имя" CONTENT="содержимое">
<META NAME="имя" CONTENT="содержимое">
Метатеги с атрибутом HTTP-EQUIV управляют действиями браузеров. В качестве параметра “имя” могут быть использованы следующие аргументы:
Expires – дата устаревания: если указанная дата прошла, то запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" заставляет браузер каждый раз при запросе проверять, изменялся ли этот документ. Например:
<meta http-equiv="expires" content="sun, 3 april 2013 9 05:45:15 gmt">
Pragma – контроль кэширования. Значением должно быть “no-cache”.
Content-Type – указание типа документа. Может быть расширено указанием браузеру кодировать страницы (charset). Например:
<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
Content-language – указание языка документа. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.
<meta http-equiv="content-language" content="en-gb">
Refresh – определение задержки в секундах, после которой браузер автоматически обновляет документ. Дополнительная возможность – автоматическая загрузка другого документа.
<meta http-equiv="refresh" content="3” url=http://www.bsu.iba.by ">
Window-target – определяет окно текущей страницы; может быть использован для прекращения появления новых окон браузера при применении фреймовых структур.
<meta http-equiv="window-target" content="_top">
Ext-cache – определяет имя альтернативного кэша
<meta http-equiv="ext-cache" content= "name=/some/path/index.db; istructions=user nstructions">
Управление индексацией страницы для поисковых роботов осуществляется с использованием атрибута name.
<meta name="robots" content="noindex">
Возможные значения: all, none, index, noindex, follow, nofollow.
Description – краткая аннотация содержания документа. Используется поисковыми системами для описания документа.
<meta name="description" content= "Документ содержит словарь metaтегов">
Keywords – используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке title или альтернативный заголовок.
<meta name="keywords" content="теги, метаданные, список">
Document-state – управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.
<meta name="document-state" content="static">
Возможные значения: static, dynamic.
URL – управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.
<meta name="url" content="absolute_url">
Author – обычно имя автора, формат произвольный.
Generator – обычно название и версия редактора, с помощью которого создана эта страница.
Copyright – обычно описание авторских прав на документ.
Resource-type – текущее состояние данного файла. Важен для поисковых систем: если его значение document, то поисковая система приступает к индексированию.