Προγραμματισμός

Στοιχεία της HTML5: <OUTPUT>

Το <output> είναι ένα νέο elementtag, ή στοιχείο, ότι προτιμάτε) της HTML5 που μπορεί να περιέχεται σε μια φόρμα (<form>) για να φιλοξενεί το αποτέλεσμα ενός υπολογισμού μεταξύ άλλων πεδίων της ίδιας φόρμας. Υποστηρίζεται από όλους τους σύγχρονους browsers, Firefox 4+, Chrome 10+, Internet Explorer 9+, Safari 5+, Opera 11+ αλλά και Internet Explorer 8, με τη χρήση του Modernizr.

Με την πρώτη ματιά το <output> είναι το καταλληλότερο πεδίο για τον προγραμματισμό ενός… calculator. Δεν ακούγεται σπουδαίο, ούτε απαραίτητο. Ας δούμε πρώτα τις προδιαγραφές και ίσως να μου κατέβει καμιά καλή ιδέα…

Το <output> είναι inline στοιχείο και μπορεί (εκτός από τα γενικά) να έχει τα εξής προαιρετικά attributes: for, form και name.

  • Το for περιέχει μια λίστα με τα ids των πεδίων που χρησιμοποιούνται στον υπολογισμό της τιμής του.
  • Σε περίπτωση που το <output> δεν βρίσκεται μέσα στο <form>, το form θα πρέπει να περιέχει το id της φόρμας με την οποία θέλετε να το αντιστοιχίσετε.
  • Τέλος το name μπορεί να περιέχει το όνομα του πεδίου, όπως όλα τα άλλα πεδία φόρμας αλλά δεν στέλνεται στον server μαζί με τα υπόλοιπα πεδία κατά την αποστολή.

Θα πρέπει να επισημάνω πως το <output> δεν υπολογίζει τίποτα από μόνο του. Η τιμή που θα πάρει εξαρτάται αποκλειστικά από τη Javascript που θα γράψετε εσείς! Θα φτιάξω λοιπόν ένα απλό μετατροπέα ισοτιμίας δολαρίου-ευρώ, χρησιμοποιώντας 1 πεδίο <input> και το <output>.

<form action="" id="convert">
	<label for="dollar">Δολάρια ΗΠΑ:</label>
	<input id="dollar" type="number">
	<button type="submit">Μετατροπή σε €</button>
	<output id="euro" for="dollar"></output>
</form>
// χρησιμοποιώ το getElementById χάρην ευκολίας
var f = document.getElementById('convert'),
	d = document.getElementById('dollar'),
	o = document.getElementById('euro');

// όταν πατηθεί το Μετατροπή σε € ή αλλιώς, το submit της φόρμας
f.onsubmit = function(e){
	// ελέγχω αν η τιμή του #dollar μπορεί να μετατραπεί σε δεκαδικό αριθμό
	// αν ναι, τότε το πολλαπλασιάζω με την ισοτιμία στις 15/2/2012 και δίνω την τιμή στο #euro
	o.value = ( parseInt( d.value ) ) ? parseInt( d.value ) * 0.748732 : '';

	// άσχετο με το θέμα μας — ακυρώνω την αποστολή της φόρμας στον server, δεν δουλεύει σε IE 8
	e.preventDefault();
};

Μια καλύτερη χρήση του <output> παρουσιάζεται στο HTML5 Doctor και αν έχετε καμιά ιδέα μοιραστείτε την, γιατί όχι!

Σχολιάστε

Η ηλ. διεύθυνσή σας δεν κοινοποιείται. Τα υποχρεωτικά πεδία σημειώνονται με *