Θα κλείσουμε αυτή την σύντομη ξενάγηση στα βασικότερα 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="Αποστολή"></p>
</form>

Παρατηρήστε ότι όλα τα <input> περικλείονται από <p>. Aυτό δεν είναι απαραίτητο αν υπάρχει το <fieldset>, αλλιώς είναι υποχρεωτικό. Βοηθάει επίσης στο styling της φόρμας μέσω CSS. Παρατηρήστε επίσης ότι τα πεδία περικλείονται και από <label>. Αυτό το tag είναι βοήθημα για ΑμεΑ διότι (ιδιαίτερα στα checkbox και radio) μεγαλώνει το «στόχο» (click target) που πρέπει να «πετύχει» ο χρήστης για να ενεργοποιήσει το πεδίο. Προσοχή στα radio· θα πρέπει να έχουν το ίδιο name για να επιτρέπουν στον χρήστη να επιλέξει μόνο ένα από από το γκρουπ. Δείτε επίσης το πως χρησιμοποιείται το <fieldset> για να ομαδοποιήσει τα πεδία για την διευκόλυνση του χρήστη. Τέλος, το <textarea> έχει διαφορετική μορφή από τα υπόλοιπα πεδία (πρέπει να κλείνει με </textarea>) και επιτρέπει την εισαγωγή μεγάλου μεγέθους κείμενο — προσέξτε τα cols (ορίζει το πλάτος του πεδίου σε χαρακτήρες) και rows (ορίζει το ύψους του πεδίου σε σειρές). Αυτά τα δύο attributes, ενώ είναι υποχρεωτικά, σπάνια θα τα χρησιμοποιήσετε για να ορίσετε τις διαστάσεις ενός textarea αφού τα CSS παρέχουν περισσότερες δυνατότητες. Τελευταίο πεδίο είναι το type="submit" που στέλνει τη φόρμα στον παραλήπτη. Να επισημάνω πως, χωρίς την χρήση Javascript ή την βοήθεια του server, είναι αδύνατον να περιορίσουμε ή να ελένξουμε τα στοιχεία που θα πληκτρολογήσει ο χρήστη μας. Δείτε τέλος το κείμενο του email που θα λάβουμε αν αποσταλλεί η φόρμα: fullname=Ονοματεπώνυμο+χρήστη&email=email%40domain.gr& message=Αυτό+είναι+ένα+δοκιμαστικό+σχόλιο+από+την+φόρμα+του+ %ABΠρώτα+βήματα+στην+HTML+3A+form%BB.&sex=on&music=on&cinema=on& submit=Αποστολή (σε 1 γραμμή όλο, έχω προσθέσει μερικά κενά για να διπλώνει το κείμενο στη σελίδα μου…) κωδικοποιημένο με την διαδικασία URL Encoding (πιθανότατα τα ελληνικά θα κωδικοποιηθούν - εξαρτάται από πολλούς παράγοντες). Δείτε επίσης επιπλέον πληροφορίες για τα υπόλοιπα διαθέσιμα πεδία της HTML.

HTML5 updates: οι φόρμες βελτιώνονται δραματικά στην HTML5! Τα περισσότερα από τα παραπάνω ισχύουν χωρίς σημαντικές αλλαγές, εκτός ίσως από την συμπεριφορά του <label>, που πλέον, δεν είναι υποχρεωτικό να μεταφέρει το focus στο συνδεδεμένο πεδίο με το click αλλά θα αποφασίσει ο browser για αυτό. Προστίθενται επίσης δεκάδες νέα type attributes στα <input> με σκοπό να γίνεται validation στις τιμές από τον browser του χρήστη, χωρίς Javascript: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range και color! Αρκετά από αυτά υποστηρίζονται ήδη από μερικούς browsers ενώ όσοι δεν τα υποστηρίζουν θα δείξουν απλώς ένα type="text" πεδίο. Δείτε μερικά παραδείγματα. Τέλος, προστίθενται αρκετά νέα attributes όπως…

• Το autofocus που μπορεί να χρησιμοποιηθεί στα <input>, <select>, <textarea> και <button> για να ορίσει το πεδίο εκείνο που θα ενεργοποιηθεί μόλις φορτώσει η σελίδα — κάτι που μπορεί ήδη να γίνει με Javascript αλλά θα μπορεί ο χρήστης (μέσω των ρυθμίσεων του browser πιθανότατα) να έχει τον έλεγχο
• Το placeholder στα <input> και <textarea> για να δείξουμε στον χρήστη το είδος ή τη μορφή της πληροφορίας που πρέπει να συμπληρώσει στο πεδίο
• Το required στα <input> και <textarea> για να μας ενημερώνει ο browser ποιά πεδία είναι υποχρεωτικά χωρίς την ύπαρξη Javascript

… και αρκετά ακόμα, που αποσκοπούν στο να ελλατωθεί η χρήση της Javascript ώστε οι φόρμες να γίνουν πιο εύχρηστες αλλά και πιο «προβλέψιμες» σε όσο το δυνατόν περισσότερους clients — όχι μόνο desktop browsers δηλαδή αλλά και smartphones, screen readers, τηλεοράσεις (!) και άλλες συσκευές που έχουν ή θα έχουν πρόσβαση στο διαδίκτυο. Οι διαφορές στις φόρμες από HTML 4.01 σε HTML5 συνοψίζονται εδώ.

Στο επόμενο μάθημα θα ξεκινήσουμε να φτιάξουμε το πρώτο σας site χρησιμοποιώντας αυτά που μάθαμε ήδη αλλά και αρκετά ακόμα tags, ενώ θα μπούμε σιγά-σιγά στα περίφημα CSS.

(Βαθμολογία: +1, ψήφοι: 1)

 Loading ...

TrackBack URL