Τα φορμά καθορίζονται μέσω του στοιχείου form. Όλα τα στοιχεία που βρίσκονται μέσα στο form ανήκουν στο αντίστοιχο φόρμα.
<form> … </form>
Στο αρχικό <form> αναμένεται το γνώρισμα action. Μέσω αυτού δηλώνεται τελικά τι θα συμβεί με τα δεδομένα της φόρμας. Συνήθως αυτό αφορά μια εφαρμογή PHP.
<form method="post" action="form.php"> … </form>
Φροντίστε να είναι δυνατή η εύρεση του καθορισμένου αρχείου. Πρέπει λοιπόν να ορίσετε τη σωστή διαδρομή.
Αντί για ένα σενάριο, μπορείτε επίσης να παραδώσετε μια διεύθυνση email.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Σε αυτή την περίπτωση, τα δεδομένα της φόρμας αποστέλλονται μέσω email. Αυτό δεν είναι και τόσο κομψό, γι' αυτό συνήθως προτιμάται η επιλογή με σενάριο. Όμως, αν δεν έχετε ένα σενάριο στη διάθεσή σας, μπορείτε να αναλάβετε την αποστολή της φόρμας μέσω email σε περίπτωση ανάγκης.
Ένα άλλο σημαντικό γνώρισμα για το στοιχείο φόρμας είναι το method. Μέσω αυτού καθορίζετε τη μέθοδο μετάδοσης του περιεχομένου της φόρμας μέσω HTTP. Δύο διαφορετικές παραλλαγές είναι διαθέσιμες.
• post = Τα δεδομένα της φόρμας μεταδίδονται σε δύο βήματα στην καθορισμένη διεύθυνση. Αρχικά ο περιηγητής επικοινωνεί με την καθορισμένη διεύθυνση. Αν αυτό είναι επιτυχές, τότε τα δεδομένα της φόρμας παραδίδονται στο σενάριο.
• get = Με αυτή τη μέθοδο, τα δεδομένα της φόρμας προστίθενται στο τέλος της URL που έχει ανατεθεί στο γνώρισμα action. Έτσι, τα δεδομένα της φόρμας είναι ορατά μεταξύ άλλων και στη γραμμή διευθύνσεων του περιηγητή.
Φυσικά, η ερώτηση ανάγεται σε ποια από τις δύο παραλλαγές πρέπει να χρησιμοποιήσετε για τη μετάδοση των δεδομένων της φόρμας. Κατ' αρχήν, μπορείτε να χρησιμοποιήσετε και τις δύο. Ειδικά όμως όταν πρόκειται για μεγάλες ποσότητες δεδομένων και μεταφορά αρχείων στον διακομιστή, πρέπει να κρατήσετε τη μέθοδο post.
Απλά πεδία φόρμας
Μέχρι στιγμής έχει καθοριστεί μόνο η εξωτερική δομή της φόρμας. Ωστόσο, στον περιηγητή δεν είναι ακόμα ορατή η ίδια η φόρμα.
<form method="post" action="form.php"> … </form>
Τώρα πρέπει λοιπόν να γεμίσετε τη φόρμα με περιεχόμενο/ζωή.
Ο πιθανότατα πιο συχνά απαιτούμενος τύπος πεδίου είναι το μονόγραμμο πεδίο εισαγωγής. Χρησιμοποιούνται, για παράδειγμα, για να ζητηθούν ονόματα, επώνυμα και διευθύνσεις email. Τα μονόγραμμα πεδία εισαγωγής καθορίζονται ως εξής:
<input type="text" name="vorname" />
Στο στοιχείο input ανατίθεται η συνδυασμός γνωρίσματος-τιμής type="text". Επιπλέον, πρέπει να δώσετε έναν εσωτερικό αναγνωριστή σε κάθε πεδίο εισαγωγής. Αυτός ο αναγνωριστής πρέπει να είναι μοναδικός στο έγγραφο. Είναι ενδιαφέρων κυρίως όταν πρόκειται για την επεξεργασία των δεδομένων της φόρμας μέσω σεναρίου. Μην χρησιμοποιείτε κενά και ειδικούς χαρακτήρες στον αναγνωριστή.
Αν δείτε το αποτέλεσμα στον περιηγητή, το αποτέλεσμα θα είναι το ακόλουθο:
Μέχρι στιγμής, το πράγμα δεν φαίνεται ιδιαιτέρως εντυπωσιακό. Ωστόσο, εάν κάνετε κλικ στο πεδίο κειμένου, θα παρατηρήσετε ότι μπορείτε ήδη να κάνετε καταχωρήσεις εκεί.
Για να γνωρίζουν οι επισκέπτες τι πρέπει να εισάγουν στο πεδίο, λείπει φυσικά ακόμα ένα ετικέτα.
Όνομα: <input type="text" name="vorname" />
Και πάλι, μια ματιά στον περιηγητή παρέχει το επιθυμητό αποτέλεσμα.
Μπορείτε να καθορίσετε το πλάτος του πεδίου με το γνώρισμα size.
Όνομα: <input type="text" name="vorname" size="30" /> <br /> Ταχυδρομικός κώδικας: <input type="text" name="plz" size="5" />
Με το γνώρισμα size μπορείτε να ορίσετε το επιθυμητό πλάτος του πεδίου.
Ένας αριθμός 5 αντιστοιχεί ακριβώς σε πέντε χαρακτήρες. Σε σχέση με αυτό, το γνώρισμα maxlength είναι ενδιαφέρον. Μέσω αυτού καθορίζεται το μέγιστο επιτρεπόμενο πλήθος χαρακτήρων που μπορούν να καταχωρηθούν στο πεδίο. Πάλι, ένα παράδειγμα:
Όνομα: <input type="text" name="vorname" size="30" maxlength="40" />
Αν η τιμή που καθορίζεται στο maxlength είναι μεγαλύτερη από αυτή στο size, τότε σε περίπτωση μεγαλύτερων καταχωρήσεων γίνεται αυτόματη κύλιση στο πεδίο.
Με το γνώρισμα value μπορείτε να ορίσετε μια προκαθορισμένη τιμή για το πεδίο.
Όνομα: <input type="text" name="vorname" value="Το όνομά σας" />
Η τιμή που εκχωρείται στο value είναι η εξ' ορισμού τιμή του πεδίου.
Οι χρήστες μπορούν να διαγράψουν αυτήν την προκαθορισμένη τιμή.
Μπορείτε επίσης να αποτρέψετε τη διαγραφή τιμών από πεδία. Γι' αυτό ορίζετε ένα πεδίο εισόδου που ουσιαστικά δεν είναι πλέον πεδίο εισόδου. Στην πραγματικότητα, τέτοια πεδία χρησιμοποιούνται συχνά για εξόδους. Είναι ενδιαφέρον, λοιπόν, να εμφανίζονται π.χ. τιμές που υπολογίζονται μέσω σεναρίου. Σκεφτείτε για παράδειγμα έναν αριθμομηχανή. Ωστόσο, μπορείτε επίσης να προκαθορίσετε χειροκίνητα ένα πεδίο με ένα κείμενο που οι επισκέπτες δεν μπορούν πλέον να αλλάξουν. (Σημείωση: Το σύμβολο του ευρώ δεν αναπαράγεται σωστά στην προβολή PDF).
<input name="preis" type="text" value="€ 699.-" readonly />
Για να ορίσετε ένα πεδίο ως μόνο για ανάγνωση, του αναθέτετε το χαρακτηριστικό readonly. Και εδώ πάλι μια ματιά στο αποτέλεσμα:
Το προκαθορισμένο κείμενο είναι ορατό απευθείας. Ωστόσο, δεν είναι δυνατή η διαγραφή του.
Ορισμός πεδίων κωδικού πρόσβασης
Γνωρίζετε φυσικά τα πεδία κωδικού πρόσβασης. Παντού που εγγράφεστε, πρέπει να δηλώσετε έναν κωδικό πρόσβασης. (Συνήθως πρέπει να τον εισάγετε ακόμα δύο φορές).
Τα δεδομένα που εισάγονται στο πεδίο εισόδου δεν είναι ορατά, αλλά αυτόματα αντικαθίστανται από αστεράκια/τελίτσες από τον περιηγητή. Το πλεονέκτημα αυτής της μεθόδου: Άνθρωποι που σας παρακολουθούν ίσως από δίπλα, δεν μπορούν να αποκρυπτογραφήσουν τον κωδικό πρόσβασής σας. Ωστόσο, είναι παραπλανητικό να θεωρείτε ότι τα πεδία κωδικού πρόσβασης είναι αυτόματα ασφαλή. Πράγματι, οι κωδικοί πρόσβασης μεταδίδονται ως καθαρό κείμενο με τη φόρμα υποβολής με κανονικό HTTP.
Τα πεδία κωδικού πρόσβασης ορίζονται ως εξής:
<input type="password" name="passwort" />
Στο χαρακτηριστικό type ανατίθεται η τιμή password. Και εδώ ξανά μια ματιά στο αποτέλεσμα.
Όταν πληκτρολογείτε κάτι εκεί, αυτό γίνεται αμέσως ακαταλαβίστικο από τους περιηγητές.
