HTML & CSS для новичков (часть 16): Формы (4)

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 на примере.

В этом примере предполагается, что есть форма, которая должна быть заполнена в несколько шагов. Последовательно запрашиваются следующие данные:

• Имя

• Фамилия

• Улица

• Почтовый индекс

• Город

Теперь можно запросить эти несколько значений на одной странице. Но что, если требуется получить очень много информации от пользователя? В этом случае обширные формы скорее отпугивают. Поэтому лучше разбить формы на несколько страниц.

Предположим, что вы открываете форму.

HTML & CSS для начинающих (Часть 16): Формы (4)

Здесь вас спросят о вашем имени. Строка состояния под полем реализована с помощью элемента 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>.

HTML и CSS для начинающих (часть 15): Формы (3)

HTML и CSS для начинающих (Часть 17): Формы (5)

HTML & CSS для новичков (часть 16): Формы (4)

Поля для веб-адресов с типом url

Поля вывода с output

Индикаторы прогресса с тегом progress

Поля для веб-адресов с типом `url`

Поля вывода с `output`

Индикаторы прогресса с тегом `progress`