Dreamweaver: Δουλεύοντας με φόρμες

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από manolism » 14 Φεβ 2007 09:49

Οι φόρμες χρησιμοποιούνται για τη συλλογή πληροφοριών από τον χρήστη και όχι μόνο. Υπάρχουν πολλά αντικέιμενα που μπορούμε να εισάγουμε σε μία φόρμα τα οποία θα δούμε παρακάτω. Τα αντικέιμενα της φόρμας βρίσκονται στην καρτέλα forms. Κάθε αντικείμενο έχει και τις δικές του ιδιότητες. Σε όλα τα αντικέμενα το όνομα του είναι αυτό που βλέπει ο παραλήπτης σαν ετικέτα και κατόπιν ακολούθει το value δηλαδή αυτό που έχει εισάγει ο χρήστης.

Εικόνα

Εικονίδια φόρμας
Εισαγωγή φόρμας
Εισάγοντας μία φόρμα στο έγγραφο διακρίνεται ένα κόκκινο πλαίσιο με διακεκομένες γραμμές. Μέσα σ’ αυτό το πλαίσιο θα πρέπει να τοποθετηθούν όλα τα αντικείμενα που θα αποσταλούν μαζί με τη φόρμα.

Εικόνα

Form name: Ορίζουμε το όνομα της φόρμας
Action: Εισάγουμε μία εντολή με την οποία θα επεξεργαστεί η φόρμα σε ένα αρχείο που βρίσκεται στον server. Μία ενδεικτική τέτοια εντολή είναι: /cgi-bin/FormMail.pl
Target: Ορίζουμε το πλαίσιο που θα ανοίγει η φόρμα. Αυτό θα το δούμε αναλυτικά σε επόμενο κεφάλαιο. Για την ώρα λέμε ότι η επιλογή blank ανοίγει τη φόρμα σε νέο παράθυρο του browser.
Method: Ορίζουμε αν η φόρμα θα διαβάζει απλά τα δεδομένα ή θα τα εισάγει σε ειδικές εντολές. Κρατάμε την επιλογή post.
Enctype: Επιλογή εκτέλεσης φόρμας με έτοιμα πρότυπα.

TextField
Το TextField χρησιμοποιείται αν θέλουμε ο χρήστης να εισάγει μόνο μία γραμμή κειμένου (όνομα, διεύθυνση κ.α.)

Εικόνα

TextField: Ορίζουμε το όνομα του textfield. Είναι απαραίτητο διότι αν έχουμε πολλά TextFields δεν θα μπορούμε να ξεχωρίσουμε το τι ακριβώς θα γράφεται μέσα.
Char Width: Ορίζουμε το μήκος του TextField βάση των πόσων χαρακτήρων θέλουμε να είναι ορατοί.
Max Chars: Ορίζουμε το πλήθος των χαρακτήρων που μπορεί να γράψει ο χρήστης. Αν είναι περισσότεροι από το Char Width τότε αυτοί δεν εμφανίζονται αλλά εκτυπώνονται στο αποτέλεσμα της φόρμας.
Type: Single line το textfield έχει μία μόνο γραμμή.
Multiline το textfield έχει πολλαπλές γραμμές.
Password το textfield εμφανίζει αστερίσκους κατά την πληκτρολόγηση.
Init Val: Ορίζουμε ένα κείμενο το οποίο θα φαίνεται κατά την φόρτωση από τον browser μέσα στο textfield

HiddenField

Εικόνα

Το HiddenField ορίζει παραμέτρους αποστολής της φόρμας. Συνήθως χρησιμοποιούμε 3:
Hiddenfield name:recipient Value: Ορίζουμε σε ποιο e-mail θα αποσταλεί η φόρμα μετά την εκτέλεση της.
Hiddenfield name:subject Value:Ορίζουμε τι θέλουμε να γράφει στο θέμα του επεξεργαστή e-mail.
Hiddenfield name: redirect Value: Ορίζουμε σε ποια διεύθυνση θα κατευθυνθεί ο browser μετά την αποστολή της φόρμας.
Τα HiddenFields μπορεί να είναι τοποθετημένα οπουδήποτε αρκεί να είναι μέσα στα πλαίσια της φόρμας.

Textarea
Το Textarea χρησιμοποιείται αν θέλουμε ο χρήστης να εισάγει μεγάλα μπλοκ κειμένου (σχόλια, σημειώσεις κ.α.) Το Textarea έχει τις ίδιες ιδιότητες με το textfield μόνο που ενεργοποιείται και η επιλογή wrap, δηλαδή η αναδίπλωση του κειμένου όταν αυτό φτάσει στα όρια του Textarea. Οι επιλογές που υπάρχουν είναι:
Off : Το κείμενο δεν αναδιπλώνεται και συνεχίζει να γράφεται στην ίδια γραμμή.
Virtual: Το κείμενο αναδιπλώνεται μόλις φτάσει στα όρια του Textarea αλλά στην πραγματικότητα αυτό είναι εικονικό αφού ο παραλήπτης βλέπει τα περιεχόμενα του Textarea σε μία συνεχόμενη γραμμή.
Physical: Το κείμενο αναδιπλώνεται μόλις φτάσει στα όρια του Textarea και ο παραλήπτης βλέπει αυτό ακριβώς που έγραψε ο χρήστης σε ξεχωριστές γραμμές
Επίσης ενεργοποιείται και η επιλογή Num Lines που σημαίνει πόσες γραμμές θα έχει το Textarea.

Checkbox

Εικόνα

Το Checkbox χρησιμοποιήται αν θέλουμε ο χρήστης να έχει τη δυνατότητα να επιλέξει πολλές από τις επιλογές που θα του έχουμε θέσει.
Checkbox name: Ορίζουμε το όνομα του ενός ή της ομάδας των Checkboxes που θα τοποθετήσουμε. Αν πρόκειται για ομάδα ομοειδών επιλογών τότε χρησιμοποιύμε το ίδιο όνομα.
Checked Value: Ορίζουμε την τιμή που θα έχει το Checkbox ανάλογα την ετικέτα που θα έχει.
Initial State: Ορίζουμε αν το Checkbox θα είναι τσεκαρισμένο ή όχι.

Radiobutton

Εικόνα

Το Radiobutton έχει ακριβώς τις ίδιες ιδιότητες με το Checkbox μόνο που ο χρήστης μπορεί να επιλέξει μόνο μία από τις επιλογές που θα του έχουμε θέσει.

Radiobutton Group

Εικόνα

Στο RadioButton Group ορίζουμε ότι και στο Radiobutton μόνο που εδώ επιλέγουμε πόσα Radiobutton θα τοποθετηθούν και με ποιο τρόπο.

List/Menu

Εικόνα

Στο List/Menu έχουμε τη δυνατότητα να δημιουργήσουμε μία σειρά από επιλογές που θα εμφανίζονται με τη μορφή αναπτυσσόμενου μενού ή κουτί λίστας. Η διαφόρα είναι ότι στη λίστα μπορούμε να τσεκάρουμε περισσότερες από μία επιλογές.
List/Menu Name: Ορίζουμε το όνομα του List/Menu.
Type: Ορίζουμε αν θα είναι λίστα ή μενού.
Height: Ενεργοποιήται μόνο στη λίστα και ορίζουμε από πόσες γραμμές θα αποτελείται η λίστα.
Selections: Ενεργοποιήται μόνο στη λίστα και ορίζουμε και ορίζουμε αν ο χρήστης θα έχει δυνατότητα πολαπλών επιλογών.
Initially Selected: Ορίζουμε αν θα είναι κάποια επιλογή προεπιλεγμένη.

List Values: Ορίζουμε την ετικέτα της επιλογής στο label δηλαδή αυτό που θα βλέπει ο χρήστης και την τιμή στο value δηλαδή αυτό που θα παραλαμβάνει ο παραλήπτης.

Εικόνα

Jumpmenu

Εικόνα

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

Image Field
Με το Image Field εισάγουμε μία εικόνα η οποία λειτουργεί ως κουμπί για να εκτελεί κάποιες εντολές.

File Field

Εικόνα

Με το File Field τοποθετούμε ένα πεδίο μέσα από το οποίο ο χρήστης θα μπορέσει να κάνει αναζήτηση κάποιου αρχείου του από τον σκληρό του δίσκο ώστε να το ανεβάσει στον server.

Button

Εικόνα

Με τα Buttons ο χρήστης εκτελεί κάποιες ενέργειες της φόρμας.
Button Name: Ορίζουμε το όνομα του Button.
Label: Ορίζουμε την ετικέτα δηλαδή τι θα γράφει πάνω του το button.
Action: Ορίζουμε την ενέργεια που θα εκτελέσει το Button. Submit-Αποστολή, Reset-Καθαρισμός της φόρμας, None-καμία ενέργεια.

Validate Form / Επικύρωση της φόρμας

Εικόνα

Η επικύρωση της φόρμας, μας βοηθάει στο να βεβαιωθούμε ότι ο χρήστης έχει συμπληρώσει τη φόρμα σωστά. Πρέπει να προσαρτήσουμε την συμπεριφορά (behavior) πάνω στο κουμπί αποστολής ώστε πριν φύγει η φόρμα να ελεγχθεί. Πρώτα επιλέγουμε το κουμπί αποστολής και έπειτα πηγαίνουμε στο μενού Window – Behaviors. Εκεί πατάμε το κουμπί add behavior που συμβολίζεται με ένα +. Από τη λίστα επιλέγουμε Validate form. Στο παράθυρο που ανοίγει βλέπουμε όλα τα text box που έχουμε χρησιμοποιήσει στη φόρμα.
Η επιλογή Required σημαίνει ότι αυτό το πεδίο πρέπει υποχρεωτικά να συμπληρωθεί. Η επιλογή accept ορίζει τι πρέπει να πληκτρολογήσει ο χρήστης στα πεδία:
Anything: Σημαίνει ότι μπορεί να πληκτρολογήσει οποιονδήποτε χαρακτήρα.
Number: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει αριθμό σ’ αυτό το πεδίο.
Email Address: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει ένα email σ’ αυτό το πεδίο. Εδώ ελέγχεται ο χαρακτήρας @ εάν υπάρχει.
Νumber from … to …: Σημαίνει ότι πρέπει υποχρεωτικά πρέπει να πληκτρολογήσει αριθμό μέσα σε ένα εύρος αριθμών που θα έχουμε ορίσει.
Έτσι τώρα μόλις πατήσει το κουμπί αποστολής ο χρήστης η φόρμα θα ελεγχθεί. Αν κάποιο πεδίο δεν πληρεί τις προϋποθέσεις που έχου ορίσει τότε θα βγάλει μήνυμα λάθους και θα ενημερώνει το χρήστη που έχει κάνει λάθος. Συνήθως τα υποχρεωτικά πεδία Required τα σημειώνουμε με ένα αστερίσκο δίπλα τους.

Άβαταρ μέλους
afroditi590
Δημοσιεύσεις: 123
Εγγραφή: 08 Ιαν 2007 11:52

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από afroditi590 » 14 Φεβ 2007 10:53

pws mporw na valw se mia forma anti gia to koumpi reset na einai sti thesi tou mia eikona pou kanei akrivos to idio me to reset?? :question:
auto to ekana alla me to koumpi submit. pigenw insert=>form=>Image Field kai ginetai mono gia to koumpi submit. iparxei kapoia epilogi pou na mporw na kanw wste na ginei kai to koumpi reset me eikona?

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από id12586 » 14 Φεβ 2007 17:44

Πώπω lunar ωραία δουλειά! :o :clap:

Ιδιαίτερα αυτό το chapter, μπερδεύει πολλούς. :wink:

:respect:
Chris at your Services
ΕικόναSacame de Aqui

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από manolism » 14 Φεβ 2007 19:12

afroditi590 έγραψε:pws mporw na valw se mia forma anti gia to koumpi reset na einai sti thesi tou mia eikona pou kanei akrivos to idio me to reset?? :question:
auto to ekana alla me to koumpi submit. pigenw insert=>form=>Image Field kai ginetai mono gia to koumpi submit. iparxei kapoia epilogi pou na mporw na kanw wste na ginei kai to koumpi reset me eikona?
Νομίζω ότι δεν γίνεται αυτό που θες με εικόνα στο reset button (αν κάνω λάθος διορθώστε με)

Γίνετε όμως με την χρήση css να διαφοροποιήσεις και τα δύο button σου.

Δες εδώ. Έχει πάρα πολλά παραδείγματα

Άβαταρ μέλους
afroditi590
Δημοσιεύσεις: 123
Εγγραφή: 08 Ιαν 2007 11:52

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από afroditi590 » 15 Φεβ 2007 09:55

Σε ευχαριστω πάρα πάρα πολύ.... :lol:
πολυ χρησιμο για μενα αυτο...
κανς τη πρακτική μου τωρα και μαθαινω το dreamweaver...θέλω να μαθω αυτές τις λεπτομέρειες..οι λεπτομέρεια κανει τι διαφορά!!!!
Σε ευχαριστώ και πάλι!!και για αυτό και για αυτά τα μαθήματα που βάζεισ για το dreamweaver. :clap: :clap: :clap: :clap: :clap: :clap:

Thanos85
Δημοσιεύσεις: 1
Εγγραφή: 06 Ιουν 2007 14:16

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από Thanos85 » 25 Απρ 2008 18:29

Παιδιά καλησπέρα και καλό Πάσχα σε όλους!

Ηθελα να θέσω το εξής ερώτημα μηπως και κάποιος ξερει κατι παραπάνω:
Θέλω να έχω μια λίστα από υποψηφίους (για εκλογές) όπου αυτος που τη συμπληρώνει μπορεί να δηλώσει όσους θέλει αλλά φθινουσα προτίμηση.

Υποθέτω ότι πρέπει να χρησιμοποιήσω checkboxes, αλλα δεν θέλω να έχω τικ αλλά αριθμούς (1-n) ανάλογα με τη σειρα προτιμησης κάθε υποψηφίου. Εχει κανείς ιδέα πως μπορεί αυτό να γίνεται σαν υλοποίηση?

xristaras
Δημοσιεύσεις: 4
Εγγραφή: 28 Δεκ 2007 21:54

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από xristaras » 29 Απρ 2008 22:12

Συγχαρητήρια φίλε.
πολύ καλός ο οδηγός.

Αυτό που θέλω να ρωτήσω και γω με τη σειρά μου είναι πως γίνεται η αποστολή στον server.

Δεν έχω ξανα ασχοληθεί ποτέ με φόρμες και πέρα από την κατασκευή της, αυτό που προανέφερα δεν ξέρω πως γίνεται.

Επίσης, υπάρχει θέμα ασφάλειας με την ύπαρξη της φόρμας σε ένα site;
π.χ. ανοίγει κάποια τρύπα ;

ευχαριστώ!

geioannou
Δημοσιεύσεις: 32
Εγγραφή: 21 Φεβ 2006 19:47

Dreamweaver: Δουλεύοντας με φόρμες

Δημοσίευση από geioannou » 13 Οκτ 2008 23:40

γεια χαρα σας.
θελω να φτιαξω μια φορμα εντελως απλη.
δηλαδη να ρωτα ονομα, επιθετο και να εχει ενα πεδιο comment.
εκανα οτι ακριβος ελεγε παραπανω το "μαθημα" αλλα δεν μου δουλεψε.
εβαλα Hiddenfield name Value το mail μου της(yahoo) αλλα δεν μου ηρθε τιποτε.
μηπως πρεπει να κανω και κατι αλλο ?

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες