HTML5 oferuje typ pola tel, który został zaprojektowany do użycia z numerami telefonów.
Twój numer telefonu: <input type="tel" name="telefon">
Na smartfonach i tabletach po kliknięciu w pole otwiera się klawiatura numeryczna do wprowadzania numeru telefonu.
Pola adresów internetowych z url
Pola typu url są przeznaczone do wprowadzania adresów internetowych.
<input type="url" />
Pola URL są automatycznie walidowane. Przeglądarki mają sprawdzać, czy wprowadzono syntaktycznie poprawny adres URL.
Pole wyjściowe z output
Pole output służy do wyświetlania treści. Jest to interesujące na przykład w połączeniu z JavaScript. Pole to może posłużyć do wyświetlania zmiennych. Można je też użyć do wyświetlania obliczonych wartości. Pole to przeznaczone jest wyłącznie do wyjścia danych. Nie można wprowadzać danych przez użytkownika.
Przykład:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Cześć,"
wort2="Świecie!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>W tym przykładzie zadeklarowano dwie zmienne. Treści tych zmiennych powinny być wyświetlane w polu output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Przeglądarki, takie jak Opera, wyświetlają pożądaną wartość. Inne przeglądarki, które nie radzą sobie z output, nie wyświetlają niczego.output posiada trzy atrybuty.
• form – Formularz, w którym znajduje się element output.
• for – Ustawia odniesienie do pól lub wartości, na które pole wyjściowe ma wskazywać. Wartości i pola muszą być oddzielone spacją.
• name – Podanie nazwy spowoduje przesłanie zawartości pola podczas wysyłania formularza.
• value – Określa wartość pola.output nadaje się również do obliczeń matematycznych. Na przykład można zapytać użytkownika o wartości za pomocą pól Prompt, a następnie pomnożyć je ze sobą.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Liczba 1.",0));
b=parseInt(prompt("Liczba 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Wynik mnożenia:</label>
<output name="result" />
</output>
</form>
</body>
</html>Przy otwieraniu strony pojawi się okno Prompt, w którym zostanie pobrana pierwsza wartość.
Po potwierdzeniu wprowadzenia przez OK, pojawi się drugie okno. (Jeśli w którymś z okienek klikniesz Anuluj, wynikiem będzie NaN, czyli Nie jest liczbą).
Po potwierdzeniu również w drugim oknie przez OK, skrypt przekaże wynik mnożenia jako wartość do pola output.
Wskaźniki postępu z progress
Wskaźnik postępu można zrealizować za pomocą elementu progress. Jest to interesujące na przykład w przypadku pobierania plików..gif "HTML & CSS dla początkujących (Część 16): Formularze (4)")
Google już interpretuje ten element. Inne przeglądarki, które nie znają tego elementu, wyświetlają jego zawartość.
Przykład:
Trwa pobieranie ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Element progress ma dwa atrybuty:
• max – Określa, ile wszystkich kroków jest wymaganych.
• value – Określa, ile kroków zostało już wykonanych.
Element progress staje się naprawdę interesujący, gdy wkracza w grę JavaScript. Jak można wykorzystać kombinację progress i JavaScript, najlepiej pokazuje przykład.
W tym przykładzie zakłada się formularz, który ma być wypełniany w kilku krokach. Następnie pobierane są kolejno następujące informacje:
• Imię
• Nazwisko
• Ulica
• Kod pocztowy
• Miasto
Teraz oczywiście można zapytać te kilka wartości na jednej stronie. Ale co, jeśli użytkownik powinien wprowadzić bardzo wiele informacji? W takim przypadku rozległe formularze bardziej odstraszają. Dlatego lepiej jest podzielić formularze na kilka stron.
Załóżmy, że otwierasz formularz.
Tu zostaniesz zapytany o swoje imię. Pasek stanu pod polem został zrealizowany za pomocą elementu progress.
<fieldset id="schritt1" style="display: none;"> <p>Imię: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Dalej" onclick="naechserSchritt(2)"></p> </fieldset>
Istotne jest kilka rzeczy dotyczących tej składni. Poszczególne elementy fieldset są najpierw ukrywane. Nawet jeśli na pierwszy rzut oka nie wygląda to tak, formularz faktycznie składa się z jednej strony. Poszczególne pola zostały umieszczone w osobnych elementach fieldset. I te elementy fieldset (wraz z ich zawartością) są niewidoczne.
Aby ukryte elementy stały się widoczne po kliknięciu odpowiednich przycisków Dalej, używana jest funkcja JavaScript switch. Jak to wygląda, zostanie pokazane w dalszej części tego samouczka.
Najpierw jednak wróćmy do formularza. Po kliknięciu przycisków Dalej prowadzi się przez formularz. Elementy progress pokazują, jak daleko jesteś zaawansowany.
Przy okazji nie jest to zbyt poważne, jeśli przeglądarka nie interpretuje elementu progress. Ponieważ te przeglądarki po prostu wyświetlą zawartość tego elementu.
<progress max="5" value="1">Krok 1 / 5</progress>
Zamiast paska postępu można więc zobaczyć tekst według schematu Krok 2 / 5.
Formularz wygląda następująco:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Imię: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Dalej" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Nazwisko: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Krok 2 / 5</progress></p> <p><input type="button" value="Dalej" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Ulica: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Krok 3 / 5</progress></p> <p><input type="button" value="Dalej" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Kod pocztowy: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Krok 4 / 5</progress></p> <p><input type="button" value="Dalej" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Miasto: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Krok 5 / 5</progress></p> <input type="submit" value="Koniec"> </fieldset> </form>
W tym przypadku trzy rzeczy są istotne:
• Każdemu elementowi fieldset przypisano identyfikator.
• Wszystkie elementy fieldset są ustawione na display: none.
• Przyciskom przypisano funkcję naechsterSchritt(n).
Funkcja naechsterSchritt(n) wygląda następująco:
<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>
Ta funkcja wyświetla aktualny element fieldset i ukrywa pozostałe elementy fieldset. Koniecznie sprawdź, czy funkcja jest umieszczona po zdefiniowaniu pól. Umieść ją najlepiej za zamykającym </form>.
