HTML Forms
Μια φόρμα HTML χρησιμοποιείται για τη συλλογή εισόδου από τον χρήστη. Συνήθως, η εισαγωγή του χρήστη αποστέλλεται σε έναν διακομιστή για επεξεργασία.
Για να δημιουργήσετε μια φόρμα HTML, χρησιμοποιείτε την ετικέτα <form> και τις σχετικές ετικέτες εισόδου (input), όπως <input>, <textarea>, <select>, κλπ. Η ετικέτα <form> ορίζει την αρχή μιας φόρμας και περιλαμβάνει τα στοιχεία που θα συλλέξουν την εισαγωγή του χρήστη. Μετά την εισαγωγή των δεδομένων από τον χρήστη, η φόρμα μπορεί να αποσταλεί σε έναν διακομιστή για επεξεργασία, χρησιμοποιώντας τη μέθοδο (method) που καθορίζεται στην ετικέτα <form>.
Για παράδειγμα, η παρακάτω φόρμα συλλέγει το όνομα και το email του χρήστη και τα αποστέλλει σε έναν διακομιστή μέσω της μεθόδου POST:
<form action="/process-form" method="post"> <label for="name">Όνομα:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, η ετικέτα <form> καθορίζει τη δράση (action) ως /process-form, που είναι ο διακομιστής που θα χειριστεί την επεξεργασία της φόρμας. Η μέθοδος (method) ορίζεται ως post, που σημαίνει ότι τα δεδομένα της φόρμας θα αποσταλούν με τη μέθοδο POST. Οι ετικέτες <label> χρησιμοποιούνται για την ετικέτα των πεδίων εισαγωγής, ενώ οι ετικέτες <input> καθορίζουν τα πεδία εισαγωγής. Τέλος, η ετικέτα <input type="submit"> δημιουργεί ένα κουμπί υποβολής για τη φόρμα.
Με τη χρήση των φορμών HTML, μπορείτε να συλλέξετε την εισαγωγή του χρήστη, να την αποστείλετε σε έναν διακομιστή και να την επεξεργαστείτε κατάλληλα.
Το στοιχείο HTML χρησιμοποιείται για τη δημιουργία μιας φόρμας HTML για την εισαγωγή δεδομένων από τον χρήστη:
<form> <!-- Εδώ προστίθενται τα στοιχεία της φόρμας --> </form>
Η ετικέτα ορίζει την αρχή και το τέλος μιας φόρμας και περιλαμβάνει όλα τα στοιχεία που θα συλλέξουν την εισαγωγή του χρήστη. Τα στοιχεία μπορούν να είναι πεδία εισαγωγής (input fields), κουμπιά υποβολής (submit buttons), ετικέτες (labels), περιοχές κειμένου (text areas), επιλογές (select options) κλπ.
[adinserter block=”2″]
Για παράδειγμα, το παρακάτω κώδικας δημιουργεί μια φόρμα με ένα πεδίο εισαγωγής ονόματος και ένα κουμπί υποβολής:
<form> <label for="name">Όνομα:</label> <input type="text" id="name" name="name"> <input type="submit" value="Υποβολή"> </form>
Σε αυτό το παράδειγμα, η ετικέτα χρησιμοποιείται για να ετικετοποιήσει το πεδίο εισαγωγής, ενώ η ετικέτα δημιουργεί το πεδίο εισαγωγής και το κουμπί υποβολής. Το γνώρισμα (attribute) “for” στην ετικέτα συνδέει την ετικέτα με το αντίστοιχο πεδίο εισαγωγής με βάση το αναγνωριστικό (id) του.
Χρησιμοποιώντας το στοιχείο , μπορείτε να δημιουργήσετε μια φόρμα HTML για να συλλέξετε την εισαγωγή του χρήστη και να την επεξεργαστείτε κατάλληλα.
Το στοιχείο HTML <input> είναι το πιο χρησιμοποιούμενο στοιχείο φόρμας.
Ένα στοιχείο <input> μπορεί να εμφανιστεί με πολλούς τρόπους, ανάλογα με το γνώρισμα (attribute) του τύπου (type).
Παρακάτω παρουσιάζεται ο πίνακας με τους τύπους και τις περιγραφές:
| Τύπος | Περιγραφή |
|---|---|
| text | Εμφανίζει ένα πεδίο μονής γραμμής για εισαγωγή κειμένου |
| radio | Εμφανίζει ένα κουμπί επιλογής (radio button) για μια από πολλές επιλογές |
| checkbox | Εμφανίζει ένα πλαίσιο επιλογής (checkbox) για μηδενική ή περισσότερες επιλογές |
| submit | Εμφανίζει ένα κουμπί υποβολής (submit button) για υποβολή της φόρμας |
| button | Εμφανίζει ένα κουμπί που μπορεί να κλικαριστεί |
Με τη χρήση των στοιχείων με διαφορετικούς τύπους, μπορείτε να δημιουργήσετε διάφορα πεδία εισαγωγής και κουμπιά για την αλληλεπίδραση του χρήστη με τη φόρμα.
Τα πεδία κειμένου (text fields) δημιουργούνται χρησιμοποιώντας το στοιχείο <input> με το γνώρισμα (attribute) type ορισμένο ως “text”. Αυτό ορίζει ένα πεδίο εισαγωγής μονής γραμμής για κείμενο.
Παράδειγμα χρήσης πεδίου κειμένου:
<label for="name">Όνομα:</label> <input type="text" id="name" name="name">
Στο παραπάνω παράδειγμα, ο έλεγχος εισαγωγής τύπου “text” δημιουργεί ένα πεδίο εισαγωγής μονής γραμμής για την εισαγωγή ονόματος. Η ετικέτα <label> χρησιμοποιείται για την ετικετοποίηση του πεδίου εισαγωγής, ενώ το γνώρισμα “for” συνδέει την ετικέτα με το πεδίο εισαγωγής με βάση το αναγνωριστικό (id).
Τα πεδία κειμένου χρησιμοποιούνται για τη συλλογή μονής γραμμής κειμένου από τον χρήστη, όπως ονόματα, email, διευθύνσεις κ.λπ.
Το στοιχείο <label> χρησιμοποιείται για τη δημιουργία ετικετών (labels) για τα στοιχεία μιας φόρμας.
Στο παράδειγμα που αναφέρθηκε παραπάνω, χρησιμοποιείται το στοιχείο <label> για να ετικετοποιηθεί το πεδίο εισαγωγής κειμένου. Η ετικέτα <label> είναι χρήσιμη για τους χρήστες που χρησιμοποιούν οθόνη ανάγνωσης (screen-reader), καθώς θα διαβάσει δυνατά την ετικέτα όταν ο χρήστης επικεντρωθεί στο πεδίο εισαγωγής.
[adinserter block=”3″]
Επιπλέον, το στοιχείο <label> βοηθά τους χρήστες που αντιμετωπίζουν δυσκολία στο να κάνουν κλικ σε πολύ μικρές περιοχές (όπως κουμπιά επιλογής ή πλαίσια επιλογής), καθώς όταν ο χρήστης κάνει κλικ στο κείμενο εντός του στοιχείου <label>, γίνεται η εναλλαγή του κουμπιού επιλογής/πλαισίου επιλογής.
Το γνώρισμα “for” της ετικέτας <label> πρέπει να είναι ίσο με το γνώρισμα “id” του στοιχείου <input>, προκειμένου να τα συνδέσει μεταξύ τους. Αυτό επιτρέπει στον χρήστη να κάνει κλικ στην ετικέτα για να επιλέξει το αντίστοιχο πεδίο εισαγωγής.
Παράδειγμα χρήσης ετικέτας <label> με το γνώρισμα “for”:
<label for="name">Όνομα:</label> <input type="text" id="name" name="name">
Στο παραπάνω παράδειγμα, το γνώρισμα “for” της ετικέτας <label> είναι ίσο με το “id” του πεδίου εισαγωγής <input>.
Το στοιχείο <input type="radio"> καθορίζει ένα κουμπί επιλογής (radio button).
Τα κουμπιά επιλογής (radio buttons) επιτρέπουν στον χρήστη να επιλέξει ΜΟΝΟ ΜΙΑ από έναν περιορισμένο αριθμό επιλογών.
Για να ορίσετε μια ομάδα κουμπιών επιλογής, πρέπει να χρησιμοποιήσετε το ίδιο όνομα (name) για όλα τα κουμπιά επιλογής που ανήκουν στην ίδια ομάδα. Έτσι, μόνο ένα από αυτά τα κουμπιά θα μπορεί να επιλεγεί ταυτόχρονα.
Παράδειγμα χρήσης κουμπιού επιλογής:
<input type="radio" id="option1" name="choices" value="option1"> <label for="option1">Επιλογή 1</label> <input type="radio" id="option2" name="choices" value="option2"> <label for="option2">Επιλογή 2</label>
Στο παραπάνω παράδειγμα, έχουμε δύο κουμπιά επιλογής που ανήκουν στην ίδια ομάδα με το όνομα “choices”. Τα γνωρίσματα “id” και “for” στις ετικέτες <input> και <label> αντίστοιχα, τα συνδέουν μεταξύ τους. Ο χρήστης μπορεί να επιλέξει μόνο ένα από τα δύο κουμπιά επιλογής.
Το στοιχείο <input type="checkbox"> καθορίζει ένα πλαίσιο επιλογής (checkbox).
Τα πλαίσια επιλογής (checkboxes) επιτρέπουν στον χρήστη να επιλέξει ΜΗΔΕΝ ή ΠΕΡΙΣΣΟΤΕΡΕΣ επιλογές από έναν περιορισμένο αριθμό επιλογών.
Για να ορίσετε μια ομάδα πλαισίων επιλογής, πρέπει να χρησιμοποιήσετε το ίδιο όνομα (name) για όλα τα πλαίσια επιλογής που ανήκουν στην ίδια ομάδα. Έτσι, ο χρήστης μπορεί να επιλέξει μια ή περισσότερες επιλογές από αυτά τα πλαίσια.
[adinserter block=”4″]
Παράδειγμα χρήσης πλαισίου επιλογής:
<input type="checkbox" id="option1" name="choices[]" value="option1"> <label for="option1">Επιλογή 1</label> <input type="checkbox" id="option2" name="choices[]" value="option2"> <label for="option2">Επιλογή 2</label>
Στο παραπάνω παράδειγμα, έχουμε δύο πλαίσια επιλογής που ανήκουν στην ίδια ομάδα με το όνομα “choices[]”. Τα γνωρίσματα “id” και “for” στις ετικέτες <input> και <label> αντίστοιχα, τα συνδέουν μεταξύ τους. Ο χρήστης μπορεί να επιλέξει κανένα ή περισσότερα από τα πλαίσια επιλογής.
Το στοιχείο <input type="submit"> καθορίζει ένα κουμπί υποβολής (submit button) για την υποβολή των δεδομένων της φόρμας σε ένα χειριστή φόρμας (form handler).
Ο χειριστής φόρμας (form handler) είναι συνήθως ένα αρχείο στον διακομιστή με ένα σενάριο για την επεξεργασία των εισαγόμενων δεδομένων.
Ο χειριστής φόρμας ορίζεται στο γνώρισμα “action” της φόρμας.
Παράδειγμα χρήσης κουμπιού υποβολής:
<form action="form-handler.php" method="post"> <!-- Στοιχεία της φόρμας --> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, η φόρμα ορίζει τον χειριστή φόρμας στο αρχείο “form-handler.php” και χρησιμοποιεί τη μέθοδο “post” για την αποστολή των δεδομένων. Το κουμπί υποβολής εμφανίζεται με την ετικέτα <input> και το γνώρισμα “type” ορισμένο ως “submit”. Το κείμενο του κουμπιού υποβολής ορίζεται με το γνώρισμα “value”.
Παρατηρείτε ότι κάθε πεδίο εισαγωγής πρέπει να έχει ένα γνώρισμα (attribute) “name” για να μπορεί να υποβληθεί.
Αν παραλειφθεί το γνώρισμα “name”, η τιμή του πεδίου εισαγωγής δεν θα αποσταλεί καθόλου. Είναι σημαντικό να ορίσετε ένα μοναδικό “name” για κάθε πεδίο εισαγωγής, έτσι ώστε να μπορεί να αναγνωριστεί και να υποβληθεί σωστά στον χειριστή της φόρμας.
Παράδειγμα με ονομασία πεδίου εισαγωγής:
<input type="text" name="username">
Στο παραπάνω παράδειγμα, το πεδίο εισαγωγής ορίζεται με το γνώρισμα “name” ορισμένο ως “username”. Όταν η φόρμα υποβληθεί, η τιμή που εισάγει ο χρήστης σε αυτό το πεδίο θα αποσταλεί μαζί με τα υπόλοιπα δεδομένα της φόρμας στον χειριστή της φόρμας.