Вивідний елемент

Оригінал: http://html5doctor.com/the-output-element/

Переклад: Влад Мержевич

Під час перегляду Інтернету ви можете зустріти калькулятори на різних сайтах, які використовуються для розрахунків різних показників, таких як: погашення кредитів, іпотека, податки, страхування та багато іншого. До цього часу у вас не було можливості семантичного розмітки результату таких обчислень. Представляємо вам - елемент <output>! У цій статті ми розповімо про цей елемент і деякі JavaScript трюки, пов'язані з ним. Розкриємо цю тему.

Означення

<output>, новий елемент у HTML5, використовується в формах. Специфікація WHATWG HTML дуже просто описує <output>.

Елемент output представляє собою результат обчислень. Специфікація WHATWG HTML.

Крім стандартних глобальних атрибутів, <output> розуміє наступні.

for

Список, розділений пробілами, який містить ідентифікатори елементів, значення яких беруть участь в обчисленнях.

form

Форма, пов'язана з елементом <output>. Значення повинно бути ідентифікатором форми в тому ж документі. Це дозволяє розміщувати <output> за межами <form>, з яким він пов'язаний.

name

Ім'я елемента.

Реалізація <output>

Почнемо з створення простого прикладу, який додає два цілих числа (приклад 1). Будемо використовувати новий тип у HTML5 number та функцію parseInt для перетворення рядків в ціле число.

Приклад 1. Простий калькулятор у Chrome

<form onsubmit="return false" oninput="o.value = 
  parseInt(a.value) + parseInt(b.value)">
  <input name="a" type="number" step="any"> +
  <input name="b" type="number" step="any"> =
  <output name="o"></output>
</form>

Зверніть увагу, що ми використовуємо стандартну подію oninput, яка замінила застарілі onforminput. Детальну статтю про поточну підтримку oninput написав Даніель Фрізен; oninput не підтримується в IE8 та нижче, а підтримка в IE9 дещо дивна, але ви можете обійти ці проблеми за допомогою html5Widgets.

Див. живий приклад коду

Як очікувалося, якщо ввести лише одне значення, функція поверне NaN. Вона намагається додати число та значення undefined, отже 1 + undefined = undefined.

Використання атрибута for

На основі попереднього прикладу додамо до <output> атрибут for (приклад 2). Нам потрібно додати ідентифікатори кожного пов'язаного <input>, що аналогічно атрибуту for для <label>.

Приклад 2. Використання атрибута for для елемента <output>

<form onsubmit="return false" oninput="o.value = 
  parseInt(a.value) + parseInt(b.value)">
  <input name="a" id="a" type="number" step="any"> +
  <input name="b" id="b" type="number" step="any"> =
  <output name="o" for="a b"></output>
</form>

Див. живий приклад

Властивість valueAsNumber

В HTML5 представлено властивість JavaScript valueAsNumber для полів форми (зокрема: number, date, range). Вона повертає значення у вигляді числа, а не рядка, тобто нам більше не потрібно використовувати parseInt або parseFloat, і оператор + додає, а не зливає.

Приклад 3. Використання властивості valueAsNumber для отримання числового значення з полів

<form onsubmit="return false" oninput="o.value = 
  a.valueAsNumber + b.valueAsNumber">
  <input name="a" id="a" type="number" step="any"> +
  <input name="b" id="b" type="number" step="any"> =
  <output name="o" for="a b"></output>
</form>

Див. живий приклад

Фінансовий калькулятор: детальний приклад

Для більш реалістичного прикладу створимо фінансовий калькулятор, який множить кількість годин на годинну ставку та додає податок для отримання кінцевого результату (приклад 4).

Приклад 4. Фінансовий калькулятор показує результат у елементі <output>

<form onsubmit="return false" oninput="amount.value = 
    (hours.valueAsNumber * rate.valueAsNumber) + 
    ((hours.valueAsNumber * rate.valueAsNumber) * 
    vat.valueAsNumber)">
 <legend>Invoice</legend>
 <p><label for="hours">Number of hours</label>
  <input type="number" min="0" id="hours" name="hours"></p>
 <p><label for="rate">Rate</label>
  <span>£</span><input type="number" min="0" id="rate" name="rate"></p>
 <p><label for="vat">VAT</label>
  <input type="number" min="0" id="vat" value="0.20" name="vat"></p>
 <p>Total: <strong>£<output name="amount" for="hours rate vat">0</output></strong></p>
</form>

Див. живий приклад

Нічого занадто складного не відбувається. Фактично, скрипти настільки прості, що навіть я можу їх зробити.

Деякі спірні приклади з використанням <input type="range">

У HTML5 також введено тип поля форми range, який у підтримуваних браузерах відображається як бігунець. За допомогою цього типу користувач може ввести приблизне значення у визначеному діапазоні без необхідності бути абсолютно точним або безпосередньо вводити числове значення. Для кросбраузерності дивіться статтю Ремі Шарпа.

Під час написання цієї статті я знайшов кілька прикладів використання елемента <output> у поєднанні з <input type="range">, як показано в прикладі 5.

Приклад. 5. Використання <input type="range> з елементом <output>

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
  <label for="flying">Flying Skill Level</label>
  <input name="flevel" id="flying" type="range" min="0" max="100" value="0"> 
  <output for="flying" name="level">0</output>/100
</form>

Див. живий приклад

Використання <output> для відображення поточного значення користувачеві здається мені досить розумним застосуванням, але це не результат обчислень, як описано в специфікації. Декілька людей на каналі IRC погодились зі мною, тому я подав звіт про помилку, де просив внести поправки в визначення. З моменту написання цієї статті помилка була виправлена і визначення розширили, так що використання <output>, як показано вище, тепер є правильним. Ура!

Підтримка у браузерах

Добра новина - всі сучасні браузери підтримують у певній мірі елемент <output>. Погана новина у тому, що є кілька підводних каменів.

Усі приклади, які ми бачили до цього моменту, повинні працювати на Opera 11.5 +, Safari 5.1+ та Chrome 13 + бездоганно. IE, як очікувалося, трохи поступається, <output> підтримується в IE10 Platform Preview 2, а oninput підтримується вже в IE9. Для обходу цього в наших простих прикладах нам слід повернутися до надійного та перевіреного