Εισαγωγή
Στο μάθημα αυτό θα κάνουμε μια εισαγωγή στην φόρμα html. Θα δούμε πως ορίζεται καθώς και τις βασικές ετικέτες που χρησιμοποιούμε σε αυτή. Ο σκοπός όλων αυτών είναι ότι αθροιστικά δημιουργούν τις γνωστές φόρμες συλλογής στοιχείων ή επικοινωνίας.
Η ετικέτα Form
Μία φόρμα αποτελείται από διάφορα στοιχεία εισαγωγής δεδομένων. Όλα αυτά ομαδοποιούνται μέσα σε στην βασική ετικέτα της φόρμας, την <form> ως εξής:
<form>
…στοιχεία html φόρμας …
</form>
Για να λειτουργήσει η φόρμα χρειάζεται να οριστούν κάποιες ιδιότητες της μέσα στην ετικέτα της φόρμας, την form.
Η ιδιότητα Action
Ο σκοπός της φόρμας είναι η συλλογή και η αποστολή των στοιχείων της. Η αποστολή γίνεται όταν πατηθεί στο τέλος της φόρμας του κουμπί Αποστολή. Η ιδιότητα action ορίζει την ενέργεια την οποία θα εκτελεστεί όταν πατηθεί το κουμπί αποστολής της φόρμας. Η συνηθισμένη ενέργεια είναι η αποστολή των στοιχείων της φόρμας στον server. Αυτό γίνεται με την κλήση ενός αρχείου, συνήθως σε .php μορφή.
<form action="action_page.php">
Σε αυτό το παράδειγμα βλέπουμε ότι ορίζεται με την ιδιότητα action το αρχείο action_page.php. Όταν πατηθεί δηλαδή το κουμπί αποστολής της φόρμας, θα ανοίξει αυτό το αρχείο μέσα στο οποίο θα καταχωρηθούν και θα γίνει η επεξεργασία των στοιχείων της φόρμας. Εάν δεν χρησιμοποιηθεί η ιδιότητα αυτή, ανοίγει πάλι η ίδια σελίδα.
Η ιδιότητα Method
Όταν χρησιμοποιούμε την ιδιότητα action τότε πρέπει να ορίσουμε και τον τρόπο αποστολής των στοιχείων της φόρμας. Αυτό γίνεται με την ιδιότητα Method. Η ιδιότητα αυτή παίρνει δύο τιμές, POST ή GET.
- Method=”POST”: Με την μέθοδο αυτή αποκρύπτει τα δεδομένα. Είναι κατάλληλη για ενημέρωση στοιχείων σε βάση δεδομένων και για αποστολή ευαίσθητων δεδομένων. Είναι η επικρατέστερη μέθδος.
- Method=”GET”: Με την μέθοδο αυτή, τα στοιχεία που έχουμε εισάγει στα πεδία της φόρμας θα εμφανιστούν στην περιοχή διεύθυνσης, address bar, του φυλλομετρητή. Είναι σαφές δηλαδή ότι τα στοιχεία δεν αποκρύπτονται. Για τον λόγο αυτόν η μέθοδος αυτή χρησιμοποιείται σε μηχανισμούς αναζήτησης δεδομένων ή αποστολή μη ευαίσθητων δεδομένων.
Ακολουθούν 2 παραδείγματα ορισμού των αντίστοιχων τιμών της ιδιότητας method.
<form action="action_page.php" method="GET"> <form action="action_page.php" method="POST">
Στα παραδείγματα αυτά αφ’ ενός καλείται με την action ένα αρχείο .php στο οποίο θα σταλθούν τα δεδομένα της φόρμας και αφ’ ετέρου χρησιμοποιείται η αντίστοιχη μέθοδος αποστολής με την ιδιότητα method.
Η ιδιότητα name
Μια φόρμα επικοινωνίας έχει συνήθως ένα όνομα. Το όνομα αυτό δίνεται με την ιδιότητα name=””.
<!DOCTYPE html> <html> <head> </head> <body> <form name="form1" method="post" action="action_page.php"> </form> </body> </html>
Στο παράδειγμα αυτό ονομάσαμε την φόρμα ως form1.
Το στοιχείο Input
Ο σκοπός μιας φόρμας html είναι η συλλογή πληροφοριών. Για την συλλογή αυτή χρησιμοποιείται, στα περισσότερα πεδία της φόρμας, η ετικέτα <input> ανεξάρτητα από τον τύπο του πεδίου. Η ετικέτα input είναι μονή, δεν έχει δηλαδή ετικέτα κλεισίματος. Ο τύπος του πεδίου ορίζεται με την ιδιότητα type=”” μέσα στην ετικέτα input. Ας δούμε τους σημαντικότερους τύπους πεδίων.
Text
Ο τύπος Text χρησιμοποιείται για την συλλογή στοιχείων μιας γραμμής. Παραδείγματα χρήσης αυτού του τύπου είναι το ονοματεπώνυμο, το email, ο κωδικός εισόδου κ.λ.π. Ας δούμε το ακόλουθο παράδειγμα:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="form1" method="post" action="">
Όνομα: <input name="firstname" type="text"><br/>
Επώνυμο: <input name="lastname" type="text">
</form>
</body>
</html>
Στο παράδειγμα αυτό ορίζονται 2 πεδία εισαγωγής δεδομένων. Ένα για το όνομα και ένα για το επώνυμο. Για κάθε ένα πεδίο χρησιμοποιείται η ετικέτα input. Ως ιδιότητα χρησιμοποιούμε την type=”text”. Με τον τρόπο αυτόν ορίζουμε το κάθε ένα πεδίο ως πεδίο κειμένου μιας γραμμής.
Επιπλέον χρησιμοποιούμε και την ιδιότητα name η οποία είναι σημαντική. Ο λόγος είναι ότι στο όνομα αυτή της ιδιότητας περνάμε το δεδομένο το οποίο εισάγουμε στο συγκεκριμένο πεδίο. Αυτό με την σειρά του, θα περάσει στο αρχείο το οποίο καλείται με την ιδιότητα action της φόρμας. Δηλαδή εάν στο όνομα εισάγουμε το Γιώργος. Τότε όταν κληθεί το αρχείο με την ιδιότητα action. Το όνομα θα περαστεί στο κληθέν αρχείο ως firstname=Γιώργος.
Άλλες ιδιότητες που μπορούμε να χρησιμοποιήσουμε στην ετικέτα αυτή είναι:
- Size: Ορίζει το μήκος του πεδίου σε αριθμό χαρακτήρων.
- Maxlength: Ορίζει το μέγιστο μέγεθος των επιτρεπόμενων χαρακτήρων.
Text area
Όταν θέλουμε να πάρουμε από μια φόρμα κείμενο πολλών γραμμών τότε χρησιμοποιούμε την ετικέτα <textarea>. Σε αυτή δεν υπάρχει η ιδιότητα type. Ας δούμε το ακόλουθο παράδειγμα:
<!DOCTYPE html> <html> <head> </head> <body> <form name="form1" method="post" action=""> Όνομα:<input name="firstname" type="text"><br/> Επώνυμο: <input name="lastname" type="text"><br/> Σχόλια<textarea name="comments"></textarea> </form> </body> </html>
Παρατηρούμε τον ορισμό του κουτιού του σχολιασμού με την ετικέτα <textarea>. Ορίζουμε και πάλι το όνομα του πεδίου με την ιδιότητα name για τον ίδιο λόγο που κάναμε παραπάνω.
Button
Ο ρόλος του κουμπιού σε μία φόρμα html είναι η αποστολή των δεδομένων εισαγωγής σε ένα αρχείο όταν αυτό έχει οριστεί με την ιδιότητα action της ετικέτας form. Σε μια φόρμα υπάρχουν συνήθως 2 κουμπιά, ένα για τον καθαρισμό των στοιχείων της και ένα για την αποστολή τους. Ας δούμε το ακόλουθο παράδειγμα:
<!DOCTYPE html> <html> <head> </head> <body> <form name="form1" method="post" action=""> Όνομα:<input name="firstname" type="text"><br/> Επώνυμο: <input name="lastname" type="text" size="40" maxlength="50"><br/> Σχόλια<textarea name="comments"></textarea><br/> <input type="reset" name="reset" value="Επαναφορά"> <input type="submit" name="submit" value="Αποστολή"> </form> </body> </html>
Εδώ λοιπόν βλέπουμε τον ορισμό 2 κουμπιών πάλι με την ετικέτα input. Αυτή την φορά η ιδιότητα type στην αντίστοιχη περίπτωση παίρνει τιμές:
- Reset: Με την οποία τα δεδομένα της φόρμας θα διαγραφούν όταν πατηθεί το κουμπί reset.
- Submit: Με την οποία τα δεδομένα της φόρμας θα σταλθούν σε εξωτερικό αρχείο όταν πατηθεί το κουμπί submit.
Επίλογος
Στο μάθημα αυτό κάναμε μια εισαγωγή στον τρόπο ορισμού φόρμας με χρήση στοιχείων html. Υπάρχει μεγάλος αριθμός ετικετών οριζόμενοι τόσο με την ιδιότητα Input όσο και με άλλες ιδιότητες. Για κάθε ιδιότητα, υπάρχει μεγάλος αριθμός ιδιοτήτων. Ο συνδυασμός λοιπόν των στοιχείων ορισμού μιας σύνθετης φόρμας μπορεί να είναι αρκετά σύνθετος.
Εδώ λοιπόν κλείνει ο κύκλος εισαγωγικών μαθημάτων στην html. Θα ακολουθήσουν tips τα οποία θα μπορέσετε να παρακολουθήσετε έχοντας ολοκληρώσει αυτά τα μαθήματα.
