HTML5 предоставя тип поле tel, който е предназначен за използване във връзка с телефонни номера.
Твоят телефонен номер: <input type="tel" name="telefon">
На смартфони и таблети при кликване върху полето се отваря клавиатурата за въвеждане на телефонния номер.
Полета за интернет адреси с url
Полетата от тип url са предназначени за въвеждане на интернет адреси.
<input type="url" />
Полетата за URL автоматично се валидират. Браузърите трябва да проверят дали е въведен фактически коректен URL.
Изходно поле с output
С полето output могат да се извеждат съдържания. Това е интересно например във връзка с JavaScript. Така това поле може да се използва за извеждане на променливи. Освен това, полето се използва и за извеждане на пресметнати стойности. Полето е предназначено изцяло за изход на данни. Въвеждане от потребителя не е възможно.
Един пример:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hallo,"
wort2="Welt!"
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>Когато отворите страницата, се отваря диалогов прозорец, чрез който се изисква първата стойност.
При потвърждаване на въвеждането с OK, се отваря втори прозорец. (Ако се щракне в един от двете прозореца върху Отмяна, резултатът ще бъде NaN, т.е. Не е число).
Ако се потвърди и вторият прозорец с OK, скриптът предава резултата от умножението като стойност на полето output.
Полета за напредъка с progress
Напредъкът може да се покаже чрез елемента progress. Това е интересно например при изтеглянето на файлове..gif "HTML и CSS за начинаещи (част 16): Формуляри (4)")
Google вече интерпретира елемента. Други браузъри, които не го познават, показват неговото съдържание.
Пример:
Изтеглянето продължава ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</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 елементи (включително техните съдържание) не са видими.
За да станат видими наистина скритите елементи след щракване върху съответните бутони за Напред, се използва функция shift на JavaScript. Как изглежда тя, ще бъде показано по-нататък в този урок.
Но първо отново към формуляра. С кликването на бутоните Напред ще бъдете пренасочени през формуляра. При това елементите 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 елемент се конфигурира с ID.
• Всички 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>.
