INPUT, а OUTPUT?

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

Прежде всего это элемент, который так и называется, — <OUTPUT>. В общем случае этот элемент выполняет те функции, которыми раньше нагружали какой-нибудь несчастный <div> или <span>, — отображать результаты работы JavaScript-сценария или AJAX-запроса.

Одним из таких сценариев может быть событие forminput, которое наступает при изменении содержания полей формы. У него два отличия от старого доброго onchange — во-первых, оно действует для всей формы, во-вторых, оно происходит непосредственно после изменений, не дожидаясь потери полем фокуса. В частности, это поведение позволяет сделать более информативным поле ввода типа range:

<input min = ”18” max = ”27” type = ”range” name = ”age”/><output onforminput

= ”value=age. value”></output>

Результат — на рис. 22.

Рис. 22. input type = "range"

Следующим «полем вывода» служит элемент <progress>. Да-да, это именно то, что мы долго эмулировали на html-страницах с разной степенью успешности, — индикатор процесса. Его применение очень просто — progress имеет всего два атрибута:

<progress max=100 value=25 />

Результат — на рис. 23. Естественно, чтобы он что-либо отображал, следует изменять значение value, что вполне доступно любому JavaScript-сценарию.

Рис. 23. Элемент progress

Еще один элемент, предназначенный для вывода, — <meters>. Внешне он обычно похож на progress, но это скорее графический индикатор более общего назначения. Вот пример его использования:

Релевантностьх

<meter value="0" max="100" low="10" high="60">Низкая</meter>

<meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="3" high="60">Высокая</meter>

<meter value="100" optimum="100" max="100">Точное соответствие</meter>

Результат — рис. 24.

Рис. 24. Применение элемента meters

С атрибутами тут дела обстоят следующим образом:

— max и min задают максимальное и минимальное отображаемые значения;

— low обозначает предел, при достижении которого значение считается низким;

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

— optimum обозначает наилучшее или оптимальное значение.