HTML5 pune la dispoziție un tip de câmp, tel, conceput pentru utilizarea în contextul numerelor de telefon.
Numărul tău de telefon: <input type="tel" name="telefon">
Pe smartphone-uri și tablete, apăsând pe câmp se deschide tastatura numerică pentru introducerea numărului de telefon.
Câmpuri pentru adrese internet cu url
Câmpurile de tip url sunt destinate introducerii adreselor de internet.
<input type="url" />
Câmpurile URL sunt validate automat. Browser-ele ar trebui să verifice dacă s-a introdus într-adevăr un URL corect din punct de vedere sintactic.
Câmp de ieșire cu output
Cu câmpul output se pot afișa conținuturi. Acest lucru este interesant în cazul în care este folosit împreună cu JavaScript. Astfel, acest câmp poate servi pentru afișarea de variabile. De asemenea, câmpul poate fi folosit și pentru afișarea valorilor calculate. Câmpul este destinat exclusiv ieșirii de date. Introducerea de date de către utilizator nu este posibilă.
Un exemplu:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Salut,"
wort2="lume!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>În acest exemplu au fost declarate două variabile. Conținuturile acestor variabile ar trebui să fie afișate în câmpul output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Browser-e precum Opera vor afișa valoarea dorită. Browser-e care nu pot interpreta output, în schimb nu vor afișa nimic.output cunoaște trei atribute.
• form – Formularul în care se găsește elementul output.
• for – Realizează conexiunea cu câmpurile sau valorile către care se referă câmpul output. Valorile și câmpurile trebuie să fie separate prin spații.
• name – Dacă se furnizează un nume, conținutul câmpului este transmis odată cu trimiterea formularului.
• value – Specifică valoarea câmpului.output se potrivește și pentru calcule matematice. De exemplu, se pot solicita valori prin câmpuri Prompt și apoi se pot înmulți între ele.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Cifra 1.",0));
b=parseInt(prompt("Cifra 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Rezultatul multiplicării:</label>
<output name="result" />
</output>
</form>
</body>
</html>Când se accesează pagina, se deschide o fereastră Prompt prin care se solicită prima valoare.
Dacă se confirmă introducerea cu OK, se va deschide o a doua fereastră. (Dacă se face clic în una dintre ferestre pe Anulare, rezultatul va fi NaN,, adică Not a Number.).
Dacă se confirmă și a doua fereastră cu OK, scriptul transferă rezultatul de la multiplicare ca valoare la câmpul output.
Bara de progres cu progress
O bară de progres poate fi realizată cu elementul progress. Acest lucru este interesant în special în contextul descărcării de fișiere..gif "HTML & CSS pentru începători (partea 16): Formulare (4)")
Google interpretează deja elementul. Alte browsere care nu cunosc elementul vor afișa conținutul său.
Un exemplu:
Descărcarea este în curs ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Elementul progress cunoaște două atribute:
• max – Specifică câte etape sunt necesare în total.
• value – Prin acest lucru se specifică câte etape au fost deja completate.
Elementul progress devine cu adevărat interesant atunci când este implicat JavaScript. Cum se poate folosi o combinație între progress și JavaScript poate fi cel mai bine demonstrat printr-un exemplu.
În acest exemplu se pornește de la un formular care trebuie completat în mai multe etape. Se vor solicita în ordine următoarele informații:
• Prenume
• Nume
• Stradă
• Cod poștal
• Oraș
Acum, desigur, puteți interoga aceste câteva valori pe o singură pagină. Dar ce se întâmplă dacă trebuie să obțineți foarte multe informații de la utilizator? Atunci formularele extinse par mai degrabă descurajante. Prin urmare, este mai bine să împărțiți formularele pe mai multe pagini.
Presupunem că accesați formularul.
Aici veți fi întrebat/ă despre prenumele dvs. Bara de stare sub câmp a fost realizată folosind elementul progress.
<fieldset id="pas1" style="display: none;"> <p>Prenume: <input type="text" name="prenume" size="30"></p> <p><progress max="5" value="1">Pasul 1 / 5</progress></p> <p><input type="button" value="Următorul" onclick="pasUrmator(2)"></p> </fieldset>
La această sintaxă, mai multe aspecte sunt importante. Mai întâi de toate, elementele individuale fieldset sunt setate inițial ca invizibile. Chiar dacă la prima vedere nu pare așa, formularul este de fapt doar o singură pagină. Câmpurile individuale au fost inserate în propriile lor elemente fieldset. Și aceste elemente fieldset (împreună cu conținutul lor) nu sunt vizibile.
Pentru ca elementele inițial ascunse să devină vizibile după clic pe butoanele corespunzătoare Următorul, se utilizează o funcție JavaScript de tip switch. Modul în care arată această funcție va fi prezentat în continuarea acestui tutorial.
Mai întâi însă revenim la formular. Dând clic pe butoanele Următorul, sunteți ghidat/ă prin formular. Elementele progress indică cât de avansat/ă sunteți.
Nu este o tragedie dacă un browser nu interpretează elementul progress. Aceste browsere afișează pur și simplu conținutul acestui element.
<progress max="5" value="1">Pasul 1 / 5</progress>
În locul barei de progres este vizibil un text conform schemei Pasul 2 / 5.
Formularul arată astfel:
<form method="post" action="#"> <fieldset id="pas1" style="display: none;"> <p>Prenume: <input type="text" name="prenume" size="30"></p> <p><progress max="5" value="1">Pasul 1 / 5</progress></p> <p><input type="button" value="Următorul" onclick="pasUrmator(2)"></p> </fieldset> <fieldset id="pas2" style="display: none;"> <p>Nume: <input type="text" name="nume" size="30"></p> <p><progress max="5" value="2">Pasul 2 / 5</progress></p> <p><input type="button" value="Următorul" onclick="pasUrmator(3)"></p> </fieldset> <fieldset id="pas3" style="display: none;"> <p>Stradă: <input type="text" name="strada" size="30"></p> <p><progress max="5" value="3">Pasul 3 / 5</progress></p> <p><input type="button" value="Următorul" onclick="pasUrmator(4)"></p> </fieldset> <fieldset id="pas4" style="display: none;"> <p>Cod poștal: <input type="text" name="codp" size="30"></p> <p><progress max="5" value="4">Pasul 4 / 5</progress></p> <p><input type="button" value="Următorul" onclick="pasUrmator(5)"></p> </fieldset> <fieldset id="pas5" style="display: none;"> <p>Localitate: <input type="text" name="localitate" size="30"></p> <p><progress max="5" value="5">Pasul 5 / 5</progress></p> <input type="submit" value="Sfârșit"> </fieldset> </form>
Aici sunt trei aspecte esențiale:
• Fiecărui element fieldset îi este asignată un ID.
• Toate elementele fieldset sunt setate la display: none.
• Butoanelor li se atribuie funcția pasUrmator(n).
Funcția pasUrmator(n) are următoarea formă:
<script>
/* <![CDATA[ */
function pasUrmator(n) {
switch(n) {
case 1:
document.getElementById('pas1').style.display = "block";
break;
case 2:
document.getElementById('pas1').style.display = "none";
document.getElementById('pas2').style.display = "block";
break;
case 3:
document.getElementById('pas2').style.display = "none";
document.getElementById('pas3').style.display = "block";
break;
case 4:
document.getElementById('pas3').style.display = "none";
document.getElementById('pas4').style.display = "block";
break;
case 5:
document.getElementById('pas4').style.display = "none";
document.getElementById('pas5').style.display = "block";
break
default: break;
}
}
pasUrmator(1);
/* ]]> */
</script>
Această funcție afișează elementul fieldset curent și ascunde celelalte elemente fieldset. Asigurați-vă că plasați funcția după definiția câmpurilor. Deci, cel mai bine, plasați-o după tag-ul de închidere </form>.
