Πώς να προσθέσετε μια φόρμα με το KompoZer

01 του 06

Προσθέστε μια φόρμα με το KompoZer

Υπάρχουν πολλές φορές όταν δημιουργείτε ιστοσελίδες όπου πρέπει να επεξεργαστείτε εισροές που υποβάλλονται από το χρήστη, όπως μια σελίδα σύνδεσης, δημιουργία νέου λογαριασμού ή να υποβάλλετε ερωτήσεις ή σχόλια. Η είσοδος χρήστη συλλέγεται και αποστέλλεται στον εξυπηρετητή ιστού χρησιμοποιώντας μια φόρμα HTML. Οι φόρμες είναι εύκολο να προστεθούν με τα ενσωματωμένα εργαλεία της KompoZer. Όλοι οι τύποι πεδίων φόρμας που υποστηρίζει το HTML 4.0 μπορούν να προστεθούν και να επεξεργαστούν με το KompoZer, αλλά για αυτό το σεμινάριο θα δουλέψουμε με τα κουμπιά κειμένου, κειμένου, υποβολής και επαναφοράς.

02 του 06

Δημιουργήστε μια νέα φόρμα με το KompoZer

Το KompoZer διαθέτει πλούσια εργαλεία φόρμας τα οποία μπορείτε να χρησιμοποιήσετε για να προσθέσετε φόρμες στις ιστοσελίδες σας. Μπορείτε να αποκτήσετε πρόσβαση στα εργαλεία φόρμας κάνοντας κλικ στο κουμπί Φόρμας ή στο αναπτυσσόμενο μενού που βρίσκεται δίπλα στη γραμμή εργαλείων. Σημειώστε ότι αν δεν γράψετε τα δικά σας σενάρια χειρισμού φόρμας , θα χρειαστεί να πάρετε κάποιες πληροφορίες για αυτό το βήμα από την τεκμηρίωση ή από τον προγραμματιστή που έγραψε το σενάριο. Μπορείτε επίσης να χρησιμοποιήσετε τις φόρμες αλληλογραφίας, αλλά δεν λειτουργούν πάντα .

1. Τοποθετήστε τον κέρσορα στη θέση που επιθυμείτε να εμφανίζεται η φόρμα σας στη σελίδα.
2. Κάντε κλικ στο κουμπί Φόρμα στη γραμμή εργαλείων. Ανοίγει το παράθυρο διαλόγου Ιδιότητες φόρμας.
3. Προσθέστε ένα όνομα για τη φόρμα. Το όνομα χρησιμοποιείται στον αυτόματα δημιουργούμενο κώδικα HTML για τον προσδιορισμό της φόρμας και απαιτείται. Πρέπει επίσης να αποθηκεύσετε τη σελίδα σας για να μπορέσετε να προσθέσετε μια φόρμα. Αν εργάζεστε με μια νέα, μη αποθηκευμένη σελίδα, το KompoZer θα σας ζητήσει να το αποθηκεύσετε.
4. Προσθέστε τη διεύθυνση URL στο σενάριο που θα επεξεργαστεί τα δεδομένα της φόρμας στο πεδίο URL της ενέργειας. Οι χειριστές φόρμας είναι συνήθως σενάρια γραμμένα σε PHP ή παρόμοια γλώσσα σελίδας διακομιστή. Χωρίς αυτές τις πληροφορίες, η ιστοσελίδα σας δεν θα μπορεί να κάνει τίποτα με τα δεδομένα που έχει εισαγάγει ο χρήστης. Το KompoZer θα σας ζητήσει να εισαγάγετε τη διεύθυνση URL του χειριστή φόρμας αν δεν το εισάγετε.
5. Επιλέξτε τη μέθοδο που χρησιμοποιείται για την υποβολή των δεδομένων φόρμας στο διακομιστή. Οι δύο επιλογές είναι GET και POST. Θα χρειαστεί να μάθετε ποια μέθοδο απαιτεί το σενάριο.
6. Κάντε κλικ στο κουμπί OK και η φόρμα προστίθεται στη σελίδα σας.

03 του 06

Προσθέστε ένα πεδίο κειμένου σε μια φόρμα με το KompoZer

Μόλις προσθέσετε μια φόρμα σε μια σελίδα με το KompoZer, η φόρμα θα περιγραφεί στη σελίδα σε ανοιχτό μπλε διακεκομμένη γραμμή. Προσθέτετε τα πεδία φόρμας μέσα σε αυτήν την περιοχή. Μπορείτε επίσης να πληκτρολογήσετε κείμενο ή να προσθέσετε εικόνες, όπως θα κάνατε σε οποιοδήποτε άλλο μέρος της σελίδας. Το κείμενο είναι χρήσιμο για την προσθήκη προτροπών ή ετικετών για τη δημιουργία πεδίων για την καθοδήγηση του χρήστη.

1. Επιλέξτε το πεδίο που θέλετε στο πεδίο κειμένου για να μεταβείτε στην περιγραφόμενη περιοχή φόρμας. Αν θέλετε να προσθέσετε μια ετικέτα, ίσως θέλετε να πληκτρολογήσετε πρώτα το κείμενο.
2. Κάντε κλικ στο κάτω βέλος δίπλα στο κουμπί Φόρμα στη γραμμή εργαλείων και επιλέξτε Πεδίο φόρμας από το αναπτυσσόμενο μενού.
3. Θα ανοίξει το παράθυρο Ιδιότητες πεδίου φόρμας. Για να προσθέσετε ένα πεδίο κειμένου, επιλέξτε Text από το αναπτυσσόμενο μενού που φέρει τον τίτλο Type Field.
4. Δώστε ένα όνομα στο πεδίο κειμένου. Το όνομα χρησιμοποιείται για τον προσδιορισμό του πεδίου στον κώδικα HTML και το script χειρισμού φόρμας χρειάζεται το όνομα για να επεξεργαστεί τα δεδομένα. Ορισμένοι άλλοι προαιρετικοί χαρακτήρες μπορούν να τροποποιηθούν σε αυτό το παράθυρο διαλόγου, αλλάζοντας το πλήκτρο Περισσότερα Ιδιότητες / Λιγότερες Ιδιότητες ή πατώντας το κουμπί Σύνθετη Επεξεργασία, αλλά τώρα θα εισαγάγουμε μόνο το όνομα του πεδίου.
5. Κάντε κλικ στο OK και το πεδίο κειμένου εμφανίζεται στη σελίδα.

04 του 06

Προσθέστε μια περιοχή κειμένου σε μια φόρμα με το KompoZer

Μερικές φορές, πολλά κείμενα πρέπει να εισαχθούν σε μια φόρμα, όπως ένα μήνυμα ή ένα πεδίο ερωτήσεων / σχολίων. Στην περίπτωση αυτή, δεν είναι κατάλληλο ένα πεδίο κειμένου. Μπορείτε να προσθέσετε ένα πεδίο φόρμας περιοχής κειμένου χρησιμοποιώντας τα εργαλεία φόρμας.

1. Τοποθετήστε το δρομέα σας μέσα στο περίγραμμα της φόρμας όπου θα θέλατε να είναι η περιοχή κειμένου σας. Εάν θέλετε να πληκτρολογήσετε μια ετικέτα, είναι συχνά καλή ιδέα να πληκτρολογήσετε το κείμενο της ετικέτας, πατήστε enter για να μετακινηθείτε σε μια νέα γραμμή και, στη συνέχεια, προσθέστε το πεδίο φόρμας, αφού το μέγεθος της περιοχής κειμένου στη σελίδα καθιστά δύσκολη την ετικέτα να είναι στα αριστερά ή δεξιά.
2. Κάντε κλικ στο κάτω βέλος δίπλα στο κουμπί φόρμας στη γραμμή εργαλείων και επιλέξτε Περιοχή κειμένου από το αναπτυσσόμενο μενού. Θα ανοίξει το παράθυρο Ιδιότητες περιοχής κειμένου.
3. Καταχωρίστε ένα όνομα για το πεδίο περιοχής κειμένου. Το όνομα προσδιορίζει το πεδίο στον κώδικα HTML και χρησιμοποιείται από το σενάριο χειρισμού φόρμας για να επεξεργαστεί τις πληροφορίες που υπέβαλε ο χρήστης.
4. Καταχωρίστε τον αριθμό των γραμμών και των στηλών που θέλετε να εμφανίζεται η περιοχή κειμένου. Αυτές οι διαστάσεις καθορίζουν το μέγεθος του πεδίου στη σελίδα και το πόσο κείμενο μπορεί να εισαχθεί στο πεδίο πριν από την εμφάνιση της κύλισης.
5. Μπορείτε να καθορίσετε πιο προχωρημένες επιλογές με τα άλλα στοιχεία ελέγχου σε αυτό το παράθυρο, αλλά για το παρόν αρκεί το όνομα και οι διαστάσεις του πεδίου.
6. Κάντε κλικ στο κουμπί OK και η περιοχή κειμένου εμφανίζεται στη φόρμα.

05 του 06

Προσθέστε ένα κουμπί υποβολής και επαναφοράς σε μια φόρμα με το KompoZer

Αφού ο χρήστης συμπληρώσει τη φόρμα στη σελίδα σας, χρειάζεται να υπάρχει κάποιος τρόπος υποβολής των πληροφοριών στον διακομιστή. Επιπλέον, εάν ο χρήστης θέλει να ξεκινήσει ή να κάνει λάθος, είναι χρήσιμο να συμπεριλάβει ένα στοιχείο ελέγχου που θα επαναφέρει όλες τις τιμές φόρμας στις προεπιλεγμένες. Τα ειδικά στοιχεία ελέγχου μορφής χειρίζονται αυτές τις λειτουργίες, που ονομάζονται αντίστοιχα τα κουμπιά υποβολής και επαναφοράς.

1. Τοποθετήστε το δείκτη του ποντικιού σας μέσα στην περιγραφόμενη περιοχή φόρμας όπου επιθυμείτε να είναι το κουμπί υποβολής ή επαναφοράς. Τις περισσότερες φορές, αυτές θα βρίσκονται κάτω από τα υπόλοιπα πεδία σε μια φόρμα.
2. Κάντε κλικ στο κάτω βέλος δίπλα στο κουμπί φόρμας στη γραμμή εργαλείων και επιλέξτε Ορισμός κουμπιού από το αναπτυσσόμενο μενού. Θα εμφανιστεί το παράθυρο Properties Properties.
3. Επιλέξτε τον τύπο του κουμπιού από το αναπτυσσόμενο μενού με τον τίτλο Τύπος. Οι επιλογές σας είναι Υποβολή, Επαναφορά και Κουμπί. Στην περίπτωση αυτή θα επιλέξουμε τον τύπο υποβολής.
4. Δώστε ένα όνομα στο κουμπί, το οποίο θα χρησιμοποιηθεί στον κώδικα επεξεργασίας HTML και φόρμας για την επεξεργασία του αιτήματος της φόρμας. Οι προγραμματιστές ιστού συνήθως ονομάζουν αυτό το πεδίο "υποβολή".
5. Στο πλαίσιο με την ένδειξη "Τιμή", πληκτρολογήστε το κείμενο που θα εμφανιστεί στο κουμπί. Το κείμενο θα πρέπει να είναι σύντομο αλλά περιγραφικό για το τι θα συμβεί όταν πατηθεί το κουμπί. Κάτι σαν "Υποβολή", "Υποβολή εντύπου", ή "Αποστολή" είναι καλά παραδείγματα.
6. Κάντε κλικ στο κουμπί OK και το κουμπί εμφανίζεται στη φόρμα.

Το κουμπί Επαναφορά μπορεί να προστεθεί στη φόρμα χρησιμοποιώντας την ίδια διαδικασία, αλλά επιλέξτε Επαναφορά από το πεδίο Τύπος αντί για Υποβολή.

06 του 06

Επεξεργασία φόρμας με το KompoZer

Η επεξεργασία ενός πεδίου φόρμας ή φόρμας στο KompoZer είναι πολύ εύκολο. Απλά κάντε διπλό κλικ στο πεδίο που θέλετε να επεξεργαστείτε και εμφανίζεται το κατάλληλο παράθυρο διαλόγου όπου μπορείτε να αλλάξετε τις ιδιότητες πεδίου ανάλογα με τις ανάγκες σας. Το παραπάνω διάγραμμα δείχνει μια απλή φόρμα χρησιμοποιώντας τα στοιχεία που καλύπτονται σε αυτό το σεμινάριο.