7 χαρακτηριστικά της HTML5 που ίσως δεν γνωρίζετε [Hot]

Η HTML5 είναι μια εκσυγχρονισμένη έκδοση της κλασσικής HTML4. Παρόλο, που η HTML5 έχει μπει στη ζωή μας εδώ και καιρό, ακόμα και σήμερα εξακολουθούμε να ανακαλύπτουμε νέα χαρακτηριστικά. Σε αυτό το άρθρο θα σας παρουσιάσουμε επτά χαρακτηριστικά που είναι χρήσιμα, και ίσως δεν τα γνωρίζατε πως υπάρχουν.

Ιδιότητα autofocus

Η ιδιότητα autofocus επιτρέπει να ορίσετε αυτόματα την εστίαση σε ένα input, button ή textarea στοιχείο αμέσως μετά την φόρτωση της σελίδας. Μέχρι πρότινος η ίδια λειτουργία μπορούσε να υλοποιηθεί μόνο με τη βοήθεια της JavaScript.

Η χρήση της ιδιότητας είναι η ακόλουθη:

<input autofocus="autofocus" />

Ιδιότητα download

Στην HTML5, ένας developer έχει την επιλογή να ορίσει την ιδιότητα download, για να υποχρεώσει τον browser να κατεβάσει ένα αρχείο, παρά να το προβάλει σε μία νέα καρτέλα.

Η ιδιότητα download, διευκολύνει και τη δουλειά των Web Developers, οι οποίοι δεν χρειάζεται να επεμβαίνουν στις ρυθμίσεις του Web Server για να του υπαγορεύσουν ποια αρχεία είναι για κατέβασμα και ποια όχι.

Επίσης αυτή η ιδιότητα πολλές φορές είναι απαραίτητη σε διαδικτυακές εφαρμογές, οι οποίες συχνά διαθέτουν στους χρήστες αρχεία για κατέβασμα.

Η ιδιότητα download μπορεί να εφαρμοστεί στην ετικέτα <a>. Για να τη χρησιμοποιήσουμε, στην ιδιότητα href ορίζουμε το URL του αρχείου που είναι για κατέβασμα. Στη συνέχεια, στην ιδιότητα download, γράφετε το όνομα που θέλετε να πάρει το αρχείο.

Η σύνταξη της ιδιότητας είναι όπως στο παράδειγμα που ακολουθεί:

<a href="server_file.pdf" download="ServerDocumentation">Download documentation</a>

Στο παραπάνω παράδειγμα, όταν ο χρήστης κάνει κλικ στο σύνδεσμο θα κατεβάσει στον υπολογιστή του ένα αρχείο pdf με όνομα ServerDocumentation.pdf.

Προ ανάκληση συνδέσμων

Με αυτή την ιδιότητα μπορεί ο Browser να κατεβάσει το περιεχόμενο μιας άλλης σελίδας στο παρασκήνιο, πριν ακόμα ο χρήστης κάνει κλικ στον σύνδεσμο.

Αυτή η ιδιότητα είναι χρήσιμη για παράδειγμα στη σελιδοποίηση των αποτελεσμάτων αναζήτησης. Σε αυτή την περίπτωση, οι σελίδες των αποτελεσμάτων θα είναι άμεσα διαθέσιμες, αφού θα έχουν πρώτα φορτωθεί στο παρασκήνιο.

Η χρήση αυτής της ιδιότητας είναι η ακόλουθη

<link rel="prefetch" href="http://www.mysite.com/page/2" />

Ιδιότητα hidden

Η ιδιότητα hidden, είναι παρόμοια με την ιδιότητα display:none στα CSS. Τυπικά αυτή η ιδιότητα αποκρύπτει ένα στοιχείο.

Η χρήση της ιδιότητα είναι η ακόλουθη:

<div hidden="hidden"></div>

Ιδιότητα spellcheck

Η ιδιότητα spellcheck μπορεί να εφαρμοστεί σε κάθε στοιχείο εισαγωγής, πλαίσιο κειμένου και στα επεξεργάσιμα divs. Η ιδιότητα αυτή δεν μπορεί να εφαρμοστεί μόνο στο στοιχείο password. Όταν ορίσετε αυτή την ιδιότητα, μπορείτε να πείτε στον περιηγητή αν θέλετε ή αν δεν θέλετε να λειτουργήσει ο ορθογράφος για αυτό το πεδίο.

Η σύνταξη αυτής της ιδιότητας είναι όπως στο παράδειγμα που ακολουθεί:

<input type="text" spellcheck="true|false" />

Το στοιχείο datalist

Στην HTML5 έχει εισαχθεί μεταξύ άλλων και το στοιχείο datalist. Το στοιχείο datalist συμπεριφέρεται περίπου όπως και τα πεδία αυτόματης πρότασης.

Πριν την εισαγωγή του στοιχείου datalist, η αντίστοιχη λειτουργία, ήταν εφικτή μόνο με τη συνεργασία της JavaScript και του Web Server μας.

Το στοιχείο datalist έχει την ακόλουθη δομή:

<form action="myscript.php" method="get">
    <input list="my_options" name="options" />
    <datalist id="my_options">
       <option value="EUR" />
       <option value="USD" />
       <option value="GBP" />
       <option value="AUD" />
    </datalist>
</form>

Το στοιχείο output

Το στοιχείο output συμπεριφέρεται όπως και τα πεδία εισόδου, μόνο που δεν μπορούμε να εισάγουμε δεδομένα σε αυτό το πεδίο. Είναι χρήσιμο για εφαρμογές που παράγουν αποτελέσματα για παράδειγμα, όπου το ένα πεδίο output, μπορεί να χρησιμοποιηθεί για να προβάλει τα αποτελέσματα ενός υπολογισμού.

Η χρήση αυτού του στοιχείο γίνετε όπως και στο παράδειγμα που ακολουθεί:

<output name="output"></output>