Button με εικονίδιο και κείμενο γίνεται; Βεβαίως και γίνεται!

…και όχι, χωρίς να καταφύγετε σε λύσεις του στυλ “div που μοιάζει με button”.

Σκεφτόμουν ότι κάτι τέτοιο είναι πολύ στοιχειώδες για τη θεματολογία που θα ήθελα να έχει το blog, όμως προς μεγάλη μου έκπληξη παρατηρώ ότι αρκετοί συνάδελφοι δεν το γνωρίζουν, και θεωρούν ότι button μπορούν να δημιουργήσουν μόνο με το κλασσικό <input type=”button/submit/image” /> τρόπο.

Υπάρχει ωστόσο και ένα άλλο tag, το <button /> tag, το οποίο είναι ισοδύναμο όσον αφορά τη λειτουργικότητα με το <input type=”button” />, αλλά επιτρέπει πολλά περισσότερα όσον αφορά την εμφάνιση. Καταρχάς, μπορείτε να βάλετε μέσα ένα <img /> tag και να έχετε αυτομάτως ένα κουμπί και με κείμενο, και με το εικονίδιο σας.

Θα μπορούσε κάποιος να πει “γιατί δεν το κάνεις βάζοντας ως background image σε ένα απλό <input /> το εικονίδιο που θες, ώστε να είναι separated το markup από το presentation όπως ορίζουν τα web standards;” και θα είχε δίκιο, όχι όμως για ολες τις περιπτώσεις.

Top 10 κακών συνηθειών στη συγγραφή του markup

Το παρόν πόστ δεν έχει τόσο ως σκοπό να βοηθήσει, αλλά να τα γράψω κάπου και να ξεσπάσω διότι πραγματικά έχω κουραστεί απίστευτα να βλέπω ξανά και ξανά τα ίδια λάθη/κακοτεχνίες στον κώδικα κυρίως των πολύ αρχάριων στο αντικείμενο (ή ενίοτε αρκετά “παλιών” που απλά έχουν συνηθίσει έτσι). Το χειρότερο είναι ότι από όσα πανεπιστήμια έχω εμπειρία, είτε προσωπική, είτε μέσω φίλων, η HTML που διδάσκουν σχεδόν πάντα πέφτει σε όλα τα παρακάτω ατοπήματα. Γιατί; Ο λόγος είναι απλός. Ακολουθούν την αρχή “ο,τι δουλεύει μην το πειράζεις”. Δεν έχει σημασία αν ο κώδικας είναι απαίσιος, και παρουσιάζει τα άπειρα λάθη στο validation, ή αν θυμίζει κώδικα ιστοσελίδας του 1996, αυτό που έχει σημασία για τους περισσότερους είναι ότι …δουλεύει όπως θέλουν. Ή έτσι νομίζουν.