HTML5 надає тип поля tel, який призначений для використання у контексті телефонних номерів.
Твій номер телефону: <input type="tel" name="telefon">
На смартфонах та планшетах під час натискання на поле відкривається цифрова клавіатура для введення номеру телефону.
Поля для Інтернет-адрес з типом url
Поля типу url призначені для введення Інтернет-адрес.
<input type="url" />
Поля URL автоматично перевіряються на коректність. Браузери повинні перевіряти, чи введено синтаксично правильний URL для таких полів.
Вивідний об'єкт з типом output
Поле output дозволяє виводити вміст. Це цікаво, наприклад, в поєднанні з JavaScript. Таке поле може бути використане для виводу змінних. Також його можна використовувати для виведення обчислених значень. Це поле призначене виключно для виведення даних. Введення користувача недопустиме.
Приклад:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Привіт,"
wort2="Світ!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>У цьому прикладі було оголошено дві змінні. Вміст цих змінних має бути відображений в полі output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Браузери, такі як Opera, показують бажане значення. Такі браузери, які не розуміють output, на відміну від цього нічого не відображають.output має три атрибути.
• form – Форма, в якій міститься елемент output.
• for – Встановлює зв'язок між полями або значеннями, на які посилається поле виводу. Значення та поля повинні розділятися пробілом.
• name – Якщо вказати ім’я, вміст поля передається під час надсилання форми.
• value – Визначає значення поля.output також підходить для математичних обчислень. Наприклад, через вікна Prompt можна запитувати значення та множити їх одне на одного.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Цифра 1.",0));
b=parseInt(prompt("Цифра 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Результат множення:</label>
<output name="result" />
</output>
</form>
</body>
</html>При відкритті сторінки починається вікно Prompt, де запитується перше значення.
Якщо підтвердити введене натисканням OK, то відкриється друге вікно. (Якщо в будь-якому з цих вікон натискати Скасувати, то результат буде NaN, тобто Not a Number).
Якщо також підтвердити друге вікно натисканням OK, то сценарій передасть результат множення як значення до поля output.
Індикатори прогресу за допомогою progress
Індикатор прогресу можна створити за допомогою елемента progress. Це цікаво, наприклад, у контексті завантаження файлів..gif "HTML та CSS для новачків (Частина 16): Форми (4)")
Google вже інтерпретує цей елемент. Інші браузери, які не розуміють елемент, відображають його вміст.
Приклад:
Завантаження...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Елемент progress має два атрибути:
• max – Вказує, скільки кроків потрібно всього.
• value – Через це вказується, скільки кроків вже виконано.
Елемент progress стає дійсно цікавим, коли в ньому з’являється JavaScript. Як можна використовувати комбінацію progress та JavaScript, найкраще показують на прикладі.
У цьому прикладі виходять з форми, яка повинна бути заповнена кількома кроками. По черзі запитуються такі дані:
• Ім’я
• Прізвище
• Вулиця
• Поштовий індекс
• Місто
Тепер можна запросити ці кілька значень на одній сторінці. Проте що, якщо користувачеві потрібно взяти дуже багато інформації? Тоді велика кількість полів може здатися стримуєючою. Тому краще розділити форми на кілька сторінок.
Припустимо, ви викликали форму.
Тут вас запитають про ваше ім'я. Рядок статусу під полем був реалізований за допомогою елемента progress.
<fieldset id="schritt1" style="display: none;"> <p>Ім'я: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Крок 1 / 5</progress></p> <p><input type="button" value="Далі" onclick="naechserSchritt(2)"></p> </fieldset>
Важливі речі в цьому синтаксисі. По-перше, кожні елементи fieldset спочатку робляться невидимими. Оскільки, навіть якщо на перший погляд це не виглядає так, форма насправді складається тільки з однієї сторінки. Кожне поле було вставлено в окремі елементи fieldset. І ці елементи fieldset (разом із їх вмістом) не видимі.
Щоб по-справжньому приховані елементи стали видимими після кліку відповідних кнопок Далі, використовується JavaScript-функція switch. Як виглядає це, показано в подальшому ході цього навчального посібника.
Але спочатку повернемося до форми. Клацанням кнопок Далі вас проведуть через форму. При цьому елементи progress показують, на якому етапі ви знаходитеся.
До речі, якщо браузер не інтерпретує елемент progress, то ці браузери просто відображають зміст цього елементу.
<progress max="5" value="1">Крок 1 / 5</progress>
Замість панелі прогресу ви побачите текст за схемою Крок 2 / 5.
Форма виглядає наступним чином:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Ім'я: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Крок 1 / 5</progress></p> <p><input type="button" value="Далі" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Прізвище: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Крок 2 / 5</progress></p> <p><input type="button" value="Далі" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Вулиця: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Крок 3 / 5</progress></p> <p><input type="button" value="Далі" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Поштовий індекс: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Крок 4 / 5</progress></p> <p><input type="button" value="Далі" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Місто: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Крок 5 / 5</progress></p> <input type="submit" value="Кінець"> </fieldset> </form>
Тут важливі три речі:
• Кожен елемент fieldset має зазначене ідентифікатор.
• Усі елементи fieldset робляться невидимими за допомогою display: none.
• Кнопкам назначається функція naechsterSchritt(n).
Функція naechsterSchritt(n) виглядає наступним чином:
<script>
/* <![CDATA[ */
function naechsterSchritt(n) {
switch(n) {
case 1:
document.getElementById('schritt1').style.display = "block";
break;
case 2:
document.getElementById('schritt1').style.display = "none";
document.getElementById('schritt2').style.display = "block";
break;
case 3:
document.getElementById('schritt2').style.display = "none";
document.getElementById('schritt3').style.display = "block";
break;
case 4:
document.getElementById('schritt3').style.display = "none";
document.getElementById('schritt4').style.display = "block";
break;
case 5:
document.getElementById('schritt4').style.display = "none";
document.getElementById('schritt5').style.display = "block";
break
default: break;
}
}
naechsterSchritt(1);
/* ]]> */
</script>
Ця функція показує поточний елемент fieldset і приховує інші елементи fieldset. Не забудьте розмістити функцію після визначення полів. Тобто краще розмістіть її після закриваючого тегу </form>.
