Το HTML5 παρέχει τον τύπο πεδίου tel, ο οποίος έχει σχεδιαστεί για χρήση σε σχέση με τους αριθμούς τηλεφώνου.
Ο αριθμός τηλεφώνου σου: <input type="tel" name="telefon">
Σε smartphones και tablets, κατά την κλικ στο πεδίο, ανοίγει το πληκτρολόγιο για την εισαγωγή του αριθμού τηλεφώνου.
Πεδία διευθύνσεων Internet με τον τύπο url
Τα πεδία τύπου url είναι σχεδιασμένα για την εισαγωγή διευθύνσεων internet.
<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>Όταν φορτώνεται η σελίδα, ανοίγει ένα prompt παράθυρο για να ερωτηθεί η πρώτη τιμή.
Εάν επιβεβαιώσεις την είσοδο με ΟΚ, ανοίγει ένα δεύτερο παράθυρο. (Αν κάνεις κλικ σε οποιοδήποτε από τα δύο παράθυρα στο Ακύρωση, το αποτέλεσμα θα είναι NaN, δηλαδή Δεν είναι αριθμός).
Αν επιβεβαιώσεις και το δεύτερο παράθυρο με το ΟΚ, το σενάριο μεταφέρει το αποτέλεσμα του πολλαπλασιασμού ως τιμή στο πεδίο 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 (καθώς και ο περιεχόμενός τους) δεν είναι ορατά.
Για να γίνουν ουσιαστικά ορατά τα κρυφά στοιχεία αφού κάνετε κλικ στα αντίστοιχα κουμπιά Επόμενο, χρησιμοποιείται μια JavaScript-συνάρτηση switch. Πώς αυτή δουλεύει θα φανεί στη συνέχεια αυτού του οδηγού.
Αλλά ας επιστρέψουμε στη φόρμα. Με το πάτημα των κουμπιών Επόμενο, καθοδηγείστε μέσα από τη φόρμα. Τα στοιχεία 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>.
