HTML5 предоставляет тип поля tel, предназначенный для использования в контексте телефонных номеров.
Ваш номер телефона: <input type="tel" name="telephone">
На смартфонах и планшетах, при нажатии на поле, открывается клавиатура для ввода номера телефона.
Поля для веб-адресов с типом url
Поля типа url предназначены для ввода веб-адресов.
<input type="url" />
Поля URL автоматически проходят валидацию. Браузеры должны проверить, был ли введен синтаксически правильный URL в такие поля.
Поля вывода с output
С помощью поля output можно выводить контент. Это может быть полезно, например, в контексте JavaScript. Такое поле может использоваться для вывода переменных. Однако его также можно использовать для вывода расчитанных значений. Поле предназначено исключительно для вывода данных. Ввод пользователем невозможен.
<script>
/* <![CDATA[ */
function output(){
wort1="Привет,"
wort2="Мир!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>В этом примере объявлены две переменные. Содержимое этих переменных должно отображаться в поле output.
<body onload="output()">
<form action="evaluation.php" method="get" name="form">
<output name="field" />
</form>
</body>
Браузеры, такие как Opera, показывают нужное значение. Те браузеры, которые не могут обрабатывать тег output, просто его игнорируют.output имеет три атрибута.
• form – Форма, в которой содержится элемент output.
• for – Определяет связь между полями или значениями, на которые сослаться элементу output. Значения и поля должны разделяться пробелами.
• name – Укажете имя, содержимое поля будет отправлено при отправке формы.
• value – Указывает значение поля.output также подходит для математических расчетов. Например, через диалоговые окна Prompt можно запросить значения и перемножить их между собой.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multiply(){
a=parseInt(prompt("Значение 1.",0));
b=parseInt(prompt("Значение 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multiply()">
<form action="#" method="get" name="form">
<label>Результат умножения:</label>
<output name="result" />
</output>
</form>
</body>
</html>Открыв страницу, появится диалоговое окно, через которое будет запрошено первое значение.
Подтвердив его, откроется второе окно. (Если в любом из окон нажать Отмена, результат будет NaN, то есть не число).
Подтвердив и второе окно, скрипт передаст результат умножения в поле output в виде значения.
Индикаторы прогресса с тегом progress
Индикатор прогресса может быть реализован с помощью элемента progress. Это может быть полезно, например, при загрузке файлов.
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 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>.
