Πρώτα βήματα στην HTML: form
Θα κλείσουμε αυτή την σύντομη ξενάγηση στα βασικότερα tags της HTML με τα form, label, input και τα υπόλοιπα tags που μας επιτρέπουν να σχεδιάσουμε κάθε είδους φόρμας. Δυστυχώς, οι φόρμες της HTML, χρειάζονται είτε Javascript είτε κάποια τεχνολογία στον server για την επεξεργασία τους, είτε και τα δύο. Ωστόσο, μπορούμε να ξεκινήσουμε από τα βασικά.
Μια φόρμα ορίζεται με το <form action="" method="post"> και κλείνει, προφανώς, με </form>. Το action attribute καθορίζει της σελίδα που θα σταλούν τα στοιχεία της φόρμας όταν ο χρήστης επιλέξει το «Αποστολή» ενώ το method ρυθμίζει της μέθοδο με οποία αυτά θα «κωδικοποιηθούν». Το method μπορεί να απουσιάζει, οπότε χρησιμοποιείται το method="get" που, πρακτικά, θα βάλει στη σειρά αυτά που πληκτρολόγησε ο χρήστης αμέσως μετά το URL και μετά θα τα στείλει στην διεύθυνση που ορίσαμε. Είναι λίγο μπερδεμένο, γι'αυτό εμείς θα χρησιμοποιήσουμε σαν action το mailto:myname@mydomain.com και σαν method το post. Βέβαια, αφενός, ο browser του χρήστη μπορεί να διαμαρτυρηθεί σχετικά με την αποστολή της φόρμας με e-mail, εφετέρου μπορεί το πρόγραμμα e-mail του χρήστη να επέμβει και να αναλάβει εκείνο να στείλει τη φόρμα, αλλά χωρίς CGI, PHP, ASP ή κάποια άλλη ανάλογη τεχνολογία, δεν υπάρχει άλλος τρόπος.
Μέσα στη φόρμα μπορούμε να ομαδοποιήσουμε τα πεδία μας χρησιμοποιώντας το <fieldset>. Αυτό συνήθως παρουσιάζεται με κάποιο πλαίσιο στους περισσότερους browsers και είναι χρήσιμο — μπορούμε όμως να ορίσουμε την εμφάνιση του με CSS. Αν χρησιμοποιήσουμε το <fieldset> μπορούμε να έχουμε και μια επικεφαλίδα στο γκρουπ των πεδίων με το <legend>. Μετά ακολουθούν τα πεδία μας.
Το συνηθέστερο πεδίο είναι το πεδίο κειμένου: <input maxlength="50" name="fullName" type="text">. Το maxlength ορίζει το όριο χαρακτήρων που είναι δυνατόν να πληκτρολογηθεί στο πεδίο και είναι προαιρετικό, το name είναι υποχρεωτικό και αφορά στην ονομασία του πεδίου για να μπορούμε να το διαχειριστούμε, και το type (που είναι η εξ ορισμού τιμή του <input> είναι text και μπορεί να απουσιάζει) δηλώνει πως θέλουμε ένα πεδίο που να δέχεται μία σειρά κειμένου. Άλλες τιμές στο type μπορεί να είναι: checkbox (), hidden (που είναι «αόρατο»), password ( ), radio (,) και submit ( ). Ας δούμε μια φόρμα επικοινωνίας και να την αναλύσουμε:
<form action="mailto:myname@mydomain.com" method="post"> <fieldset> <legend>Επικοινωνήστε μαζί μου</legend> <p><label>Nickname / Ονοματεπώνυμο<br> <input maxlength="50" name="fullname" type="text"></label><p> <p><label>e-mail<br> <input maxlength="50" name="email" type="text"></label></p> <p><label>Μήνυμα<br> <textarea cols="40" name="message" rows="8"></textarea></label></p> </fieldset> <fieldset> <legend>Φύλλο</legend> <p><label><input name="sex" type="radio">Άνδρας</label> <label><input name="sex" type="radio">Γυναίκα</label></p> </fieldset> <fieldset> <legend>Ενδιαφέροντα</legend> <p><label><input name="music" type="checkbox">Μουσική</label> <label><input name="cinema" type="checkbox">Κινηματογράφος</label> <label><input name="sports" type="checkbox">Αθλητισμός</label></p> </fieldset> <p><input name="submit" type="submit" value="Αποστολή">lt;/p> </form>
Παρατηρήστε ότι όλα τα <input> περικλείονται από <p>, αυτό δεν είναι απαραίτητο αν υπάρχει το <fieldset>, αλλιώς είναι υποχρεωτικό. Βοηθάει επίσης στο styling της φόρμας μέσω CSS. Παρατηρήστε επίσης ότι τα πεδία περικλείονται και από <label>. Αυτό το tag είναι βοήθημα για ΑμΕΑ και, ειδικά για τα checkbox και radio πεδία, βοηθάει στο να επιλέγουμε το πεδίο «κλικάρωντας» στην ετικέτα του. Επιπλέον, ειδικά τα radio θα πρέπει να έχουν το ίδιο name για να επιτρέπουν στον χρήστη να επιλέξει μόνο από από το γκρουπ. Δείτε επίσης το πως χρησιμοποιείται το <fieldset> για να ομαδοποιήσει τα πεδία για την διευκόλυνση του χρήστη. Τέλος, το <textarea> έχει διαφορετική μορφή από τα υπόλοιπα πεδία (πρέπει να κλείνει με </textarea>) και επιτρέπει την εισαγωγή μεγάλου μεγέθους κείμενο — προσέξτε τα cols (ορίζει το πλάτος του πεδίου σε χαρακτήρες – γίνεται και με CSS) και rows (ορίζει το ύψους του πεδίου σε σειρές). Τελευταίο πεδίο είναι το submit που στέλνει τη φόρμα στον παραλήπτη. Να επισημάνω πως, χωρίς την χρήση Javascript ή την βοήθεια του server, είναι αδύνατον να περιορίσουμε ή να ελένξουμε τα στοιχεία που θα πληκτρολογήσει ο χρήστη μας. Δείτε τέλος το κείμενο του email που θα λάβουμε αν αποσταλλεί η φόρμα (fullname=Ονοματεπώνυμο+χρήστη&email=email%40domain.gr& message=Αυτό+είναι+ένα+δοκιμαστικό+σχόλιο+από+την+φόρμα+του+ «Πρώτα+βήματα+στην+HTML+3A+form».&sex=on&music=on&cinema=on& submit=Αποστολή — σε 1 γραμμή όλο, έχω προσθέσει μερικά κενά για να διπλώνει το κείμενο στη σελίδα μου…) κωδικοποιημένο με την διαδικασία URL Encoding (πιθανότατα τα ελληνικά θα κωδικοποιηθούν – εξαρτάται από πολλούς παράγοντες) καθώς και επιπλέον πληροφορίες για τα υπόλοιπα διαθέσιμα πεδία της HTML.
Στο επόμενο μάθημα θα ξεκινήσουμε να φτιάξουμε το πρώτο σας site, χρησιμοποιώντας αυτά που μάθαμε ήδη αλλά και αρκετά ακόμα tags, ενώ θα μπούμε σιγά-σιγά στα περίφημα CSS.