Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Мы рассмотрели новые значения для атрибута type элемента input, а также некоторые атрибуты, которые действительны для большинства элементов формы. Но веб-формы HTML5 еще могут предложить нам больше! В спецификации форм HTML5 datalist пять новых элементов формы: datalist , output , keygen , progress и meter . Мы рассмотрели данные выше. Мы познакомили вас с progress и meter в последней главе, поскольку они часто полезны вне форм. Итак, давайте подведем итоги и рассмотрим два других элемента.
Элементы progress и meter
Двумя наиболее известными элементами HTML5 являются элементы progress и meter .
Элемент meter обеспечивает датчик, отображающий общее значение в пределах диапазона. Вы указываете минимальное ( min ) и максимальное ( max ) значения, а также требуемое value которое находится между этими минимальными и максимальными значениями. Хотя многие считают, что это элемент управления формы с атрибутами, похожими на некоторые числовые типы ввода, он не имеет атрибута name и не будет отправлен при отправке формы.
meter умолчанию установит минимальное значение 0 или значение измерителя, в зависимости от того, какое value меньше. Максимальное значение по умолчанию равно 1 или value счетчика, в зависимости от того, какое value больше. Используйте meter когда есть минимальное значение, максимальное значение и оптимальные значения, и это значение может увеличиваться и уменьшаться, как тестовый уровень, уровень бензобака или кровяное давление. С этими тремя атрибутами браузеры, поддерживающие счетчик, включая Android 4.4+ (но не iOS7 или IE11), будут показывать зеленый индикатор.
meter позволяет нам показать, когда значение находится в правильном диапазоне с low , high и optimum значениями. Если value находится между min и low , индикатор желтый. Если значение находится между low и high значением, индикатор горит зеленым. Если value находится между high и max , оно будет красным. В настоящее время optimum значение не имеет заметного эффекта.
Элемент meter не должен использоваться для индикации прогресса; вместо этого используйте индикатор выполнения, чтобы указать процент выполнения задачи.
Атрибуты прогресса включают в себя max и value , причем прогресс всегда находится в диапазоне от 0 до 100%. Браузер рассчитывает, какой процент значения является максимальным, и соответствующим образом корректирует длину индикатора выполнения. Он отображает частично заполненный серый или синий индикатор выполнения, где он полностью серый на 0% и полностью синий на 100%.
Если value не указано, индикатор выполнения является неопределенным. Chrome, Opera, Safari и Firefox отображают неопределенный прогресс в виде анимированных полос, а IE отображает его как анимированные точки.
В отличие от meter , progress идет только в направлении 100% от max значения. По умолчанию в презентации используется встроенный блок, поэтому вы можете установить width и height для элементов progress . Высота не изменит фактическую высоту стилизованной панели (в отличие от meter ), но добавит пространство под ней.
Элемент output
Назначение output элемента — принять и отобразить результат расчета. output элемент должен использоваться, когда пользователь может видеть значение, но не может напрямую им манипулировать, и когда значение может быть получено из других значений, введенных в форму. Примером использования может быть общая стоимость, рассчитанная после доставки, и налоги в корзине.
Значение output элемента содержится между открывающим и закрывающим тегами. Как правило, имеет смысл использовать JavaScript в браузере для обновления этого значения. output элемент имеет атрибут for , который используется для ссылки на идентификаторы полей формы, значения которых были использованы для вычисления значения output элемента.
name и value output элемента передаются вместе с формой.
Элемент keygen является элементом управления для генерации пары открытый-закрытый ключ и для отправки открытого ключа из этой пары ключей. Opera, Chrome, Safari, Android и Firefox поддерживают этот элемент, отображая его в виде раскрывающегося меню с параметрами длины сгенерированных ключей; все предоставляют разные варианты, хотя. Все еще нет поддержки в iOS7 и IE11.
Элемент keygen вводит два новых атрибута: атрибут challenge указывает строку, которая отправляется вместе с открытым ключом, а атрибут keytype указывает тип сгенерированного ключа. На момент написания документа единственным поддерживаемым значением типа keytype является rsa , общий алгоритм, используемый в криптографии с открытым ключом.
contenteditable атрибут
Хотя всегда лучше использовать наиболее подходящий элемент формы для его предназначения, иногда существующие элементы формы не соответствуют нашим потребностям; например, никакой элемент управления формы не создает хорошего встроенного текстового редактора WYSIWYG.
Однако для этого есть обходное решение. Любой элемент в документе HTML5 можно сделать редактируемым с помощью атрибута contenteditable . Атрибут contenteditable , записанный просто как contenteditable или contenteditable="true" , делает элемент, в который он включен, доступным для редактирования. Обычно вы найдете этот атрибут в элементах div, но вы даже можете сделать элемент style который установлен на "display:block" редактируемым и изменять CSS на лету. Хотя любой элемент, который изначально не является элементом управления формой, по умолчанию не будет отправляться на сервер вместе с остальными данными формы при отправке формы, вы можете использовать JavaScript для отправки отредактированного пользователем содержимого на сервер асинхронно или при отправке формы.
Если вы когда-либо видели редактируемый профиль, в котором элемент, на который нужно щелкнуть, совсем не похож на элемент управления формы, есть вероятность, что вы действительно редактировали элемент contenteditable . Любые изменения, внесенные в contenteditable компоненты, фактически обновляют DOM.
Простое добавление contenteditable к элементу делает этот элемент редактируемым во всех браузерах. Кроме того, его потомки также будут редактируемыми, если к ним явно не применяется contenteditable="false" . Хотя это обновляет клиентскую часть DOM, вам нужно добавить JavaScript, чтобы явно сохранить его.
Изменения в существующих элементах управления формы
Было несколько других изменений в элементах управления формы в HTML5.
Элемент form
В этой главе мы говорили об атрибутах, которые применяются к различным элементам поля формы; однако есть также некоторые новые атрибуты, специфичные для самого элемента form .
Во-первых, как мы уже видели, HTML5 предоставляет несколько способов нативной проверки полей формы; определенные типы ввода, такие как email и url , например, а также required атрибуты и атрибуты pattern . Однако вы можете захотеть использовать эти типы ввода и атрибуты для стилизации или семантических целей, не препятствуя отправке формы. Новый логический атрибут novalidate позволяет novalidate форму без собственной проверки ее полей.
Далее, формам больше не нужно определять атрибут action . Вам больше не нужно явно указывать URL-адрес, чтобы использовать его для отправки формы. Если опущено, форма будет вести себя так, как если бы action было установлено для текущей страницы. Вы можете написать или переопределить URL-адрес, определенный в атрибуте action формы, с formaction атрибута formaction типов ввода кнопки, которые активируют formaction формы.
Наконец, атрибут autocomplete мы ввели ранее, также может быть добавлен непосредственно в элемент form ; в этом случае он будет применяться ко всем полям в этой форме, если только эти поля не переопределяют его своим собственным атрибутом autocomplete .
Элемент optgroup
В HTML5 у вас может быть optgroup optgroup , которая полезна для многоуровневых меню select .
Элемент textarea
В HTML 4 мы должны были указать размер элемента textarea , указав значения для атрибутов cols и cols . В HTML5 эти атрибуты больше не требуются; Вы должны использовать CSS для определения ширины и высоты textarea .
Новым в HTML5 является атрибут wrap . Этот атрибут применяется к элементу textarea и может иметь значения soft (по умолчанию) или hard . При использовании soft текст отправляется без разрывов строк, кроме тех, которые фактически введены пользователем, тогда как hard передает любые разрывы строк, введенные браузером, из-за размера поля. Если вы установили wrap , то вам нужно указать атрибут cols .
В заключение
К сожалению, мы не смогли охватить все — это должно быть книга сама по себе. Это было, однако, довольно глубокое введение. По мере роста поддержки входных элементов и атрибутов HTML5 сайтам будет все меньше и меньше требовать JavaScript для проверки на стороне клиента и улучшения пользовательского интерфейса, в то время как браузеры справляются с большей частью тяжелой работы. Устаревшие пользовательские агенты, скорее всего, останутся в обозримом будущем, но нет причин избегать продвижения вперед и использования веб-форм HTML5, где соответствующие заполнения и отступления заполняют пробелы, где это необходимо.
В следующей главе мы продолжим работу над «Вестником HTML5», добавив то, что многие считают убийственной функцией HTML5: нативное видео и аудио.