Εγκαταστήστε τα σχόλια. Δημιουργώντας μια φόρμα ανάδρασης. Ίσως θα είναι ενδιαφέρον για εσάς

Ένα από τα πιο κοινά καθήκοντα στην πρακτική είναι η εφαρμογή της μορφής ανατροφοδότησης. Ο Tobash γράφει τον κώδικα HTML της, το σχεδιάζει στο CSS, δημιουργώντας ένα σενάριο PHP που θα χειριστεί τα δεδομένα που έλαβε από τον χρήστη και θα τα έστειλε στο ταχυδρομείο μας, γράφοντας ένα σενάριο JS που θα ελέγξει τη φόρμα για να εισέλθει επαρκώς τα δεδομένα εισόδου, την προστασία του Η παράκαμψη του spam μας να διασφαλίσει ότι το γραμματοκιβώτιό μας δεν πέφτει από επιθέσεις των bots.

Όλες οι παραπάνω στιγμές θα ληφθούν υπόψη στην αναθεώρησή μας και θα σχολιάσουν λεπτομερώς.

Έτσι, αρχίζουμε να δημιουργούμε μια φόρμα ανάδρασης:

Html

Πρώτα απ 'όλα, γράφουμε κώδικα HTML, έχει οριστεί σε πεδία που θα γεμίσουν τον χρήστη. Θα συνεχίσουν να εκδίδονται. Ο κωδικός κώδικα μοιάζει με αυτό:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Ονομα: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Τηλέφωνο: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Μήνυμα: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Στείλετε" />

Και οπτικά μοιάζει με αυτό:

Συμφωνώ, ενώ όλα είναι άσχημη και τίποτα δεν είναι σαφές, αλλά μόλις ξεκινήσαμε.

Εξετάστε τις παραπάνω λεπτομέρειες κώδικα:

• < form method= "post" action= "mail.php" > …

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

• < input maxlength= "30" type= "text" name= "name" />

  
  Στη συνέχεια, ακολουθούμε το αντ 'αυτού. Αυτά είναι τα ίδια τα ίδια τα πεδία του εντύπου στις οποίες οι χρήστες θα εισέλθουν στις πληροφορίες που χρειάζεστε (τύπος \u003d "κείμενο" λέει ότι θα είναι το κείμενο). Το χαρακτηριστικό maxlength δηλώνει πόσους χαρακτήρες μπορούν να εισέλθουν στον χρήστη σε αυτή τη φόρμα πεδίων. Το πιο σημαντικό χαρακτηριστικό είναι το όνομα - καθορίζει το όνομα ενός συγκεκριμένου πεδίου. Είναι σε αυτά τα ονόματα στο μελλοντικό σενάριο PHP θα επεξεργαστεί τις εισερχόμενες πληροφορίες σε αυτό. Εάν το επιθυμείτε, μπορείτε ακόμα να ορίσετε το χαρακτηριστικό κράτησης θέσης, το οποίο εμφανίζει το κείμενο μέσα στο πεδίο εξαφανίζεται κατά την εγκατάσταση του δρομέα μέσα σε αυτό. Ένα από τα προβλήματα του Playsholder είναι ότι δεν υποστηρίζεται από μερικά παλιά προγράμματα περιήγησης.

• < label for = "name" > Ονομα:

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

• < textarea rows= "7" cols= "50" name= "message" >

  
  Επίσης, καθώς η είσοδος προορίζεται να χορηγηθεί από τις πληροφορίες χρήστη, μόνο αυτή τη φορά το πεδίο ακονίζεται για μεγάλα μηνύματα. Οι σειρές καθορίζουν το μέγεθος του πεδίου σε χορδές, Cols σε χαρακτήρες. Γενικά, ορίζουν το ύψος και το πλάτος του πεδίου μας.

• < input type= "submit" value= "Στείλετε" />

  
  Το γεγονός ότι αυτό είναι ένα κουμπί για την αποστολή μιας φόρμας μας λέει Type \u003d "Υποβολή" και η τιμή ορίζει το κείμενο που θα είναι μέσα σε αυτό το κουμπί.

• < div class = "right" >

  
  Χρησιμοποιείται μόνο για περαιτέρω μορφή οπτικού σχεδιασμού.

CSS.

Προκειμένου η φόρμα ανατροφοδότησης να δούμε, πρέπει να εκδοθεί. Για να αποκτήσετε το ακόλουθο αποτέλεσμα:

Χρησιμοποιήσαμε αυτόν τον κώδικα:

Μορφή (φόντο: # f4f5f7; padding: 20px;) μορφή. Αριστερά, μορφή. Δεξιά (οθόνη: Inline-Block, κατακόρυφος - Ευθυγράμμιση: Κορυφή, πλάτος: 458px;). Δεξιά (ένδειξη: 20px;) ετικέτα (οθόνη: μπλοκ; γραμματοσειρά- μέγεθος: 18px; text- ευθυγράμμιση: κέντρο; περιθώριο: 10px 0px 0px 0px;) είσοδος, textarea (σύνορα: 1px στερεό # 82858d; padding: 10px; Γραμματοσειρά - μέγεθος: 16px; πλάτος: 436px;) textarea (Ύψος: 98px; περιθωρίου-κάτω: 32px;) είσοδος [τύπος \u003d "υποβολή"] (πλάτος: 200px; float: δεξιά, σύνορα: κανένας; φόντο: # 595B5F; Χρώμα: #FFF, κείμενο- μετασχηματισμό: κεφαλαία;)

Αναλυτικά για να ζωγραφίσει το CSS δεν βλέπω το σημείο, θα επιστήσω την προσοχή σας μόνο στα βασικά σημεία:

1. Μην γράφετε εγγραφή για κάθε ετικέτα στη φόρμα. Προσπαθήστε να δημιουργήσετε τους επιλογείς σας έτσι ώστε ένα ζευγάρι γραμμών κώδικα να κάνει όλα τα στοιχεία που χρειάζεστε.
2. Μην χρησιμοποιείτε γραμμές και δημιουργώντας περιπτώσεις, επιπλέον ετικέτες ανά τύπο < br>, < p> Και ούτω καθεξής, με αυτές τις εργασίες, το CSS αντιμετωπίζει τέλεια την ιδιότητα της οθόνης: μπλοκ και περιθώριο με padding. Περισσότερα για το γιατί να μην χρησιμοποιήσετε < br> Στη διάταξη μπορείτε να διαβάσετε στην ετικέτα του άρθρου BR και είναι απαραίτητο; .
3. Μην χρησιμοποιείτε τη διάταξη πίνακα για φόρμες. Αυτό έρχεται σε αντίθεση με τη σημασιολογία αυτής της ετικέτας και οι μηχανές αναζήτησης αγαπούν τον σημασιολογικό κώδικα. Προκειμένου να σχηματιστεί μια δομή οπτικού εγγράφου, έχουμε αρκετές ετικέτες DIV και τις ιδιότητες οθόνης που ορίζονται από το CSS: Inline-Block (κατασκευάζει μπλοκ σε μια σειρά) και κάθετη-ευθυγράμμιση: κορυφή (δεν τους επιτρέπει να τρέχουν γύρω από το Οθόνη), τους ρωτάμε το απαραίτητο ύψος και voila, τίποτα περιττό και όλα βρίσκονται όπως χρειαζόμαστε.

Για όσους θέλουν να σώσουν το χρόνο τους στο σχεδιασμό του χώρου, μπορώ να συμβουλεύσω χρησιμοποιώντας τα πλαίσια CSS κατά τη δημιουργία ιστότοπων, ειδικά αυτο-γραμμένα. Η επιλογή μου σε αυτό το σχέδιο είναι το Twitter Bootstrap. Το μάθημα σχετικά με το σχεδιασμό των εντύπων με τη χρήση της μπορεί να προβληθεί.

Php.

Λοιπόν, ήρθε η ώρα να καταστεί δυνατή η μορφή μας.

Πηγαίνουμε στον ριζικό μας κατάλογο του ιστότοπου και δημιουργούμε ένα αρχείο mail.php εκεί, στο οποίο προηγουμένως υποδείξαμε το μονοπάτι με το χαρακτηριστικό φόρμας της ετικέτας φόρμας.

Τελικά, ο κώδικας του θα μοιάζει με αυτό:

\\ "Javascript: mistory.back () \\"\u003e Επιστροφή

" ; Εάν (άδειο ($ _post ["όνομα"]) και! Empty ($ _post ["τηλέφωνο"]) και! Empty ($ _post ["mail"]) και! Empty ($ _post ["μήνυμα"])) ($ name \u003d trim (strip_tags ($ _post ["Όνομα"])); $ phone \u003d trim (strip_tags ($ _post ["phone"])); $ mail \u003d trim (strip_tags ($ _post ["mail"]) ); $ Μήνυμα \u003d trim (strip_tags ($ _post ["μήνυμα"])); mail (, "έγραψε:" $ όνομα. "
Αριθμός του: "$ τηλέφωνο."
Το ταχυδρομείο του: "$ mail. "
Το μήνυμά του: ". $ Μήνυμα,); Ηχώ. "Το μήνυμά σας έχει σταλεί με επιτυχία!
Θα λάβετε την απάντηση σύντομα
$ πίσω "; έξοδος; ) Αλλού (ECHO, έξοδος;);\u003e

Η συζήτηση των τμημάτων HTML και CSS αυτού του εγγράφου μπορεί να παραλειφθεί. Στην ουσία, αυτή είναι η συνήθης σελίδα του ιστότοπου που μπορείτε να κανονίσετε το αίτημά σας και την αναγκαιότητα. Εξετάστε το πιο σημαντικό μέρος του σεναρίου επεξεργασίας φόρμας PHP:

$ πίσω \u003d "

\\ "Javascript: mistory.back () \\"\u003e Επιστροφή

" ;

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

Εάν (άδειο ($ _post ["όνομα"]) και! Empty ($ _post ["τηλέφωνο"]) και! Empty ($ _post ["mail"]) και! Empty ($ _post ["μήνυμα"])) ( // στο τμήμα του χειριστή ) Αλλού (ηχώ "Για να στείλετε ένα μήνυμα συμπληρώστε όλα τα πεδία! $ Πίσω"; έξοδος; )

Εδώ βιδώνουμε τον έλεγχο του σχήματος στην πληρότητα των πεδίων. Όπως μαντέψατε, από την άποψη του $ _post ["Όνομα"] σε αποσπάσματα, γράφουμε την αξία του χαρακτηριστικού ονόματος της ακανθώδους μας.

Εάν γεμίζονται όλα τα πεδία, το σενάριο θα αρχίσει να επεξεργάζεται τα δεδομένα στο εσωτερικό του μέρος, αλλά εάν δεν συμπληρώθηκε τουλάχιστον ένα πεδίο, το μήνυμα θα εμφανιστεί με το αίτημα για να γεμίσει όλα τα πεδία φόρμας ECHO "για να στείλετε ένα μήνυμα πλήρωσης Όλα τα πεδία! $ Πίσω "και αναφορά για να επιστρέψετε στην προηγούμενη σελίδα, την οποία δημιουργήσαμε την πρώτη συμβολοσειρά.

Ο Dale εισάγετε μέσα στο εσωτερικό του χειριστή φόρμας:

$ name \u003d trim (strip_tags ($ _post ["όνομα"])); $ Phone \u003d trim (strip_tags ($ _post ["τηλέφωνο"])); $ Mail \u003d trim (strip_tags ($ _post ["mail"])); $ Μήνυμα \u003d Trim (strip_tags ($ _post ["μήνυμα"]));

Έτσι, καθαρίσαμε τα δεδομένα που εισάγονται από το χρήστη από ετικέτες HTML και περιττά κενά. Αυτό μας επιτρέπει να προστατεύουμε τον εαυτό σας από το να πάρετε έναν κακόβουλο κώδικα στα μηνύματα που μας αποστέλλονται.

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

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

Μετά τον καθαρισμό των ετικετών, προσθέστε την αποστολή μηνύματος:

mail ( "[email protected]", "Επιστολή με διεύθυνση_iesight""Σου έγραψα:". $ Όνομα. "
Αριθμός του: "$ τηλέφωνο."
Το ταχυδρομείο του: "$ mail. "
Το μήνυμά του: ". $ Μήνυμα, "Τύπος περιεχομένου: Κείμενο / HTML; Charset \u003d Windows-1251") ;

Είναι αυτή η γραμμή και ασχολείται με το σχηματισμό και στέλνει ένα μήνυμα σε εμάς. Συμπληρώνεται ως εξής:

1. "[email protected]" - εδώ μεταξύ των αποσπημάτων εισάγετε το ταχυδρομείο σας
2. "Επιστολή με το διεύθυνση_name" είναι το θέμα του μηνύματος που θα έρθει στο ταχυδρομείο. Μπορείτε να γράψετε οτιδήποτε εδώ.
3. "Έγραψες:" $ όνομα. " < br /> Αριθμός του: "$ τηλέφωνο." < br /> Το ταχυδρομείο του: "$ mail." < br /> Το μήνυμά του: "$ μήνυμα - σχηματίζουμε το κείμενο του μηνύματος. $ Όνομα - Τοποθετήστε τις πληροφορίες που συμπληρώνονται από το χρήστη μέσω της έκκλησης στα πεδία από το προηγούμενο βήμα, σε εισαγωγικά Περιγράψτε τι σημαίνει αυτό το πεδίο, ετικέτα < br /> Κάνουμε τη μεταφορά της γραμμής έτσι ώστε το μήνυμα να είναι γενικά αναγνώσιμο.
4. Τύπος περιεχομένου: Κείμενο / HTML; Charset \u003d Windows-1251 - Στο τέλος υπάρχει μια σαφής ένδειξη του τύπου δεδομένων των δεδομένων που μεταδίδονται στο μήνυμα και την κωδικοποίηση του.

ΣΠΟΥΔΑΙΟΣ!

Κωδικοποίηση που καθορίζεται στην "κεφαλή" του εγγράφου ( < meta http- equiv= "Content-Type" content= "Κείμενο / HTML; Charset \u003d Windows-1251" /> ), που κωδικοποιεί από το μήνυμα τύπου περιεχομένου: text / html, charset \u003d Windows-1251 και γενικά, η κωδικοποίηση του αρχείου PHP πρέπει να ταιριάζει με διαφορετικό τρόπο "Krakoyarbra" αντί για ρωσικά ή αγγλικά γράμματα.

Πολλοί δεν υποδεικνύουν την κωδικοποίηση του μηνύματος που αποστέλλεται ρητά, αλλά σε ορισμένους πελάτες αλληλογραφίας, εξαιτίας αυτού, μπορεί να υπάρχουν προβλήματα στο μέλλον (μη αναγνώσιμες επιστολές στο ταχυδρομείο), γι 'αυτό το συνιστώ να το δείξει.

Επαλήθευση της φόρμας για επαρκή δεδομένα

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

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

Εισαγωγή κωδικού δέσμης ενεργειών στο ίδιο αρχείο, όπου έχουμε ένα τμήμα HTML της φόρμας. Για το περιστατικό μας, θα μοιάζει με αυτό:

< script> Λειτουργία Checkform (φόρμα) (όνομα VAR \u003d φόρμα. Όνομα. Τιμή; var n \u003d όνομα. Αντιστοιχία (/ ^ [a-za-zaza- yay] + $ /); αν (! n) (Ειδοποίηση ( "Το όνομα εισάγεται λανθασμένα, διορθώστε το σφάλμα") Επιστρέψτε το FALSE; ) Var Phone \u003d έντυπο. Τηλέφωνο. Αξία; Var p \u003d τηλέφωνο. Ταίριασμα (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); Αν (! P) (Ειδοποίηση ( "Το τηλέφωνο εισάγεται λανθασμένα") Επιστρέψτε το FALSE; ) VAR MAIL \u003d Μορφή. Ταχυδρομείο. Αξία; Var m \u003d mail. (/ ^ [A-ZA-Z0- 9] [A-ZA-Z0- 9 \\. _-] * [A-ZA-Z0- 9 _] @ ([A-ZA-Z0- 9] + ([A-ZA-Z0- 9 -] * [A-ZA-Z0- 9] +) * \\ [A-ZA-Z] + $ /); αν (! m) (ειδοποίηση ( "Το ηλεκτρονικό ταχυδρομείο εισάγει εσφαλμένα, διορθώστε το σφάλμα") Επιστρέψτε το FALSE; ) Επιστρέψτε το TRUE. )

Λοιπόν, τώρα η συνήθης ανάλυση:

Για, Για να κάνετε κλικ στο κουμπί Αποστολή, δοκιμάσαμε Κρύβουμε την έναρξη του σεναρίου μας στην ετικέτα φόρμας:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Τώρα, σε σημεία, λαμβάνουμε τη σύνθεση της επαλήθευσης:

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

Σε αυτό το μάθημα, θα εξοικειωθούμε με τη λειτουργία mail (), στο παράδειγμα της δημιουργίας Έντυπα ανατροφοδότησης στο PHP Με τα επόμενα δεδομένα αποστολής στο ταχυδρομείο.

Για να το κάνετε αυτό, δημιουργήστε δύο αρχεία - forma.php. και mail.php.. Στο πρώτο αρχείο θα υπάρχει μόνο μια φόρμα με πεδία για την εισαγωγή του χρήστη. Εσωτερική ετικέτα μορφή - Κουμπί "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" Και χαρακτηριστικό Δράση.που αναφέρεται στον χειριστή - mail.php., Είναι σε αυτό ότι τα δεδομένα από τη φόρμα εμφανίζονται όταν πατάτε το κουμπί "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ". Στο παράδειγμά μας, αυτά τα έντυπα αποστέλλονται σε μια ιστοσελίδα με τίτλο "/Mail.php". Αυτή η σελίδα καταναλώνει το σενάριο Php.η οποία επεξεργάζεται τα δεδομένα της φόρμας:

Αυτά τα έντυπα αποστέλλονται με τη μέθοδο ΘΕΣΗ. (επεξεργασία ως $ _Post.). $ _Post. - Αυτή είναι μια σειρά μεταβλητών που μεταφέρονται στο τρέχον σενάριο μέσω της μεθόδου ΘΕΣΗ..

Παρακάτω βλέπετε τα περιεχόμενα του αρχείου forma.php.Ποια πεδία γεμίζει τον χρήστη σε κάποια ιστοσελίδα. Όλα τα πεδία εισόδου πεδίου πρέπει να έχουν ένα χαρακτηριστικό Ονομα., Συνταγογράφουμε τιμές μόνοι σας με βάση τη λογική.

Έντυπο ανατροφοδότησης στο PHP

Αφήστε ένα μήνυμα:

Το όνομα σου:



ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ:

Τηλεφωνικό νούμερο:

Μήνυμα:

Η περιοχή κειμένου μπορεί να περιέχει απεριόριστο αριθμό χαρακτήρων -\u003e

Έτσι, η φόρμα κοιτάζει οπτικά στο πρόγραμμα περιήγησης.

Επόμενη εγγραφή κώδικα για το αρχείο mail.php.. Να εφεύρει τα ονόματα για μεταβλητές. ΣΕ Php. Η μεταβλητή αρχίζει με ένα σημάδι $ και στη συνέχεια το όνομα της μεταβλητής. Η τιμή κειμένου της μεταβλητής είναι τα αποσπάσματα. Χρησιμοποιώντας τις μεταβλητές σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου διαχειριστή, τα περιεχόμενα της φόρμας μεταδίδονται, απλά αντικαθιστώντας το όνομα του στοιχείου φόρμας σε αγκύλες - τιμή Ονομα..

$ \u003d " [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]"// email του παραλήπτη δεδομένων από τη φόρμα
$ Tema \u003d "Έντυπο ανατροφοδότησης στο PHP". // θέμα του Eamel που έλαβε
$ μήνυμα \u003d "Το όνομά σας:" $ _ Post ["Όνομα"]. "
"// Αντιστοιχίστε μια μεταβλητή τιμή που λαμβάνεται από το όνομα \u003d Όνομα
$ Μήνυμα. \u003d "E-mail:". $ _ Post ["email"]. "
"// Λαμβάνεται από το όνομα φόρμας \u003d Email
$ Μήνυμα. \u003d "Τηλέφωνο:" $ _ Post ["τηλέφωνο"]. "
"// Λήψη από το όνομα \u003d Τηλεφωνική φόρμα
$ Μήνυμα. \u003d "Μήνυμα:". $ _ Post ["μήνυμα"]. "
"// Λήψη από το όνομα \u003d Μήνυμα
$ Headers \u003d "mime-έκδοση: 1.0". "\\ r \\ n"; // Τίτλος αντιστοιχεί στη μορφή συν ένα σύμβολο μετάφρασης συμβολοσειράς
$ Headers. \u003d "Τύπος περιεχομένου: Κείμενο / HTML; Charset \u003d UTF-8". "\\ r \\ n"; // υποδεικνύει τον τύπο του περιεχομένου που αποστέλλεται
Mail ($ to, $ tema, $ μήνυμα, $ κεφαλίδες); // Στέλνει μεταβλητές τιμές στον παραλήπτη στο email
?>

Έτσι, τα δεδομένα από τη συστοιχία $ _Post. θα μεταφερθούν στις αντίστοιχες μεταβλητές και αποστέλλονται στο ταχυδρομείο χρησιμοποιώντας τη λειτουργία Ταχυδρομείο. Ας συμπληρώσουμε το σχήμα μας και κάντε κλικ στο κουμπί Αποστολή. Μην ξεχάσετε να καθορίσετε το e-mail σας. Η επιστολή ήρθε αμέσως.

Φόρμα ανατροφοδότησης για τον ιστότοποΘα σας δείξω - με βάση τη χρήση της τεχνολογίας Ajax. Αλλά μην ανησυχείτε, δεν χρειάζεται να το ξέρετε, όλα είναι ήδη έτοιμα, θα πρέπει να εγκαταστήσει μόνο αυτή τη φόρμα και να εγκατασταθεί για τον εαυτό σας!

Παιδιά - το σενάριο είναι εντελώς ξεπερασμένο. Κάποιος εργάζεται, κάποιος δεν έχει. Και καταλαβαίνω και όλη την περισσότερη ενημέρωση - τεμπελιά. Ως εκ τούτου, δοκιμάστε τη διακριτική σας ευχέρεια.

Φόρμα ανατροφοδότησης PHP με αποστολή στο ταχυδρομείο

Αυτό Σχηματίζουν ανατροφοδότηση επί τόπου Πολύ λειτουργικό από μόνο του, πολλά plug-ins συνδέονται με αυτήν, η οποία δημιουργεί μια ελκυστική εμφάνιση και ελέγχει την εγκυρότητα (διαβάστε την ορθότητα) των δεδομένων που καταχωρίσατε. Αυτά τα plugins εργάζονται σε μεγάλο και ισχυρό! Και ονομάζεται αυτό:

1. Jqtransform - Plugin που σας επιτρέπει να κάνετε την εμφάνισή μας για τα σχόλια!

2. Διαμορφωτής - Και αυτό το plugin ελέγχει τη μορφή επαφών σχετικά με την ορθότητα των πληροφοριών που έχουν εισαχθεί και, οπότε εμφανίζονται οι αναδυόμενες άκρες!

Για την πλήρη εργασία αυτής της φόρμας θα χρησιμοποιηθεί κατηγορίας - phpmailer. Θεωρείται ένα από τα καλύτερα!

Σημείωση για το πιο έξυπνο:

Η φόρμα ανάδρασης για τον ιστότοπο μπορεί να γίνει σε HTML! Αλλά θα αρχίσει να λειτουργεί μόνο με PHP! Και σε καμία περίπτωση!

Αυτό είμαι για εκείνους που αναζητούν μια φόρμα ανατροφοδότησης μόνο σε HTML. Κάντε το, αλλά δεν θα λειτουργήσει!

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

Έχω σκάψει αυτή τη μορφή ανατροφοδότησης στην ιστοσελίδα www.tutorialzine.com Ο σύνδεσμος οδηγεί απευθείας στην αρχική σελίδα, δηλ. Ιστοσελίδα του συγγραφέα αυτής της φόρμας!

Όλα είναι στα αγγλικά εκεί, οπότε είχαμε ένα μικρό τσιμπήματα με τη Sasha, για να Russify αυτή τη μορφή επαφών και τα plugins που συνδέονται με αυτό.

Ομολογώ να είμαι ειλικρινής, και με αυτό το "μούχλα" υπήρχαν δύο μέρες, αφού τα διάφορα κοπάδια άρχισαν να αναδύονται, και η αντίστροφη μορφή επικοινωνίας ημιτελής στο τέλος, τόσο πιο όμορφη, δεν ήθελα να βρω! Έτσι, αν είστε ερασιτέχνης να κάνετε τα πάντα μόνοι σας και η σκέψη θα ταιριάζει στο ελαφρύ κεφάλι σας - ο ίδιος να Russify αυτή τη φόρμα, δεν θα περιορίσω μερικές συμβουλές, δεδομένου ότι απλά η μετάφραση των φράσεων δεν θα περιορίζεται σε:

1. Αυτή η μορφή ανατροφοδότησης ακονίζεται κάτω από τους αστικούς, από εκεί και έχει ληφθεί, οπότε θα σας στείλει αντί για κανονικούς ρωσικούς χαρακτήρες - Krakoyablla. Παρατηρήστε την κωδικοποίηση. Και γενικά, όλες οι "σφραγίδες" θα συσχετιστούν με αυτό!

2. Το σενάριο επικύρωσης αρχικά δεν κατανοεί τις επιστολές μας, οπότε θα χρειαστεί να τα καταχωρήσουν!

3. Ακόμη και μετά από αυτές τις ενέργειες, αν καθορίσετε το θέμα της γραφής στα ρωσικά, η επιστολή έρχεται με το θέμα - δεν υπάρχει θέμα (ελπίζω να γράψει σωστά), αντιμετωπίζεται αν καθορίσετε την κωδικοποίηση στο αρχείο κλάσης phpmailer.

4. Στην αρχική φόρμα, το κείμενο στα πεδία εισόδου που πιέζονται προς τα κάτω και όχι στη μέση. Αυτό είναι ένα σφάλμα plugin jqtransform.

Λοιπόν, όλα φαινόταν να ζωγραφίζουν και προειδοποίησαν. Ας πάμε περαιτέρω!

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

Σχεδιάζοντας στυλ:

HTML, σώμα (Ύψος: 100%, περιθώριο: 0;) HTML (φόντο-Χρώμα: #FFF, Χρώμα: # 333; Γραμματοσειρά: 12px / 14px Vertana, Tahoma, Sans-Serif; Δρομέας: Προεπιλογή;) # Φόρμα ανατροφοδότησης (Χρώμα φόντου: #ececec, περιθώριο: 50px auto 0; κείμενο-ευθυγράμμιση: κέντρο; πλάτος: 430px; padding: 15px;) # feedback-μορφή H2 (περιθωρίου-κάτω: 25px;) # εισόδου φόρμας ανατροφοδότησης, #feedback -Form Textarea (Χρώμα-Χρώμα: #FFF, σύνορα: 1px στερεό # A9A9A9; padding: 1px 5px; πλάτος: 90%;) # Εισαγωγή φόρμας ανάδρασης (Ύψος: 26px;) # Textarea Formback (Ύψος: 75px; Padding-Top: 5PX;) # Εισαγωγή φόρμας ανατροφοδότησης (περιθώριο: 15px; Χρώμα φόντου: # 0B7BB5; Σύνορα: 1px στερεό #ccccc, χρώμα: #FFFFFF; Γραμματοσειρά: Γραμμή Ύψος: 40px; Μετασχηματισμός κειμένου: κεφαλαία; πλάτος: 225px; δρομέας: δείκτης;)

Ως αποτέλεσμα όλων αυτών των ενεργειών, αυτή η φόρμα θα είναι:

Τώρα ήρθε η ώρα να κάνετε το διακομιστή. Το σενάριο μας θα περιλαμβάνει πολλά μέρη:

• Σύνθεση;
• Δευτερεύουσες λειτουργίες.
• Επεξεργασία δεδομένων αποστολής ·
• Εμφάνιση μηνυμάτων.

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

Σύνθεση

Σε αυτό το στάδιο, θα δημιουργήσουμε τρεις μεταβλητές: $ my_email (το γραμματοκιβώτιο στο οποίο αποστέλλονται δεδομένα), $ path_log (διαδρομή προς το αρχείο καταγραφής) και $ time_back (χρόνος επιστροφής χρόνου στην περιοχή).

// Καθορίστε το γραμματοκιβώτιό σας $ my_email \u003d " [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]"

Δευτερεύουσες λειτουργίες

Εδώ περιγράφουμε πέντε λειτουργίες που θα απλοποιήσουν την επεξεργασία δεδομένων.

Πρότυπα εξόδου μηνυμάτων:

Λειτουργία ERROR_MSG ($ μήνυμα) ($ μήνυμα \u003d "

"$ Μήνυμα".

"Επιστρέψτε $ μήνυμα,) λειτουργία successg_msg ($ μήνυμα) ($ μήνυμα \u003d"

"$ Μήνυμα".

"Επιστρέψτε το μήνυμα $;)

Εκκαθάριση δεδομένων από τη φόρμα:

Λειτουργία Clear_Data (Return Trim (Strip_Tags ($ var));)

Αποστολή επιστολής:

Λειτουργία send_mail ($ email, $ subj, $ κείμενο, $ από) ($ headers \u003d "από:". \\ R \\ n "; \\ r \\ n"? \\ R \\ n "? $ Headers. \u003d "Τύπος περιεχομένου: κείμενο / html; charset \u003d utf-8 \\ r \\ n"; $ αποτέλεσμα \u003d mail ($ email, $ subj, $ text, headers); αν (! ψευδής;) Επιστρέψτε το TRUE;)

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

Λειτουργία check_format ($ data, $ type) (περίπτωση "email": $ pattern \u003d "/) (+ (* +)) *.) +++ $ / i. (Επιστρέψτε το True;) Break, περίπτωση "τηλέφωνο": $ pattern \u003d "/ ^ (\\ + \\ d +)? * (\\ (\\ D + \\]); -] *) $ / "; αν (preg_match ($ μοτίβο, $ data)) (επιστροφή True;) Break;) Επιστρέψτε το FALSE;)

Όπως μπορείτε να δείτε όλες τις λειτουργίες ενός μικρού μεγέθους που έχουμε γράψει. Ήταν δυνατό να μην τους υπομείνετε για επεξεργασία δεδομένων, αλλά όταν πρέπει να αλλάξετε κάτι ή να επεκταθείτε, για παράδειγμα, check_format (), θα είναι πολύ πιο εύκολο και πιο βολικό.

Επεξεργασία δεδομένων αποστολής

Πρώτα απ 'όλα, μαθαίνουμε από ποια σελίδα ήρθε ο χρήστης. Στη συνέχεια, ορίζουμε τις μεταβλητές στις οποίες θα αποθηκευτούν τα μηνύματά μας και το καθεστώς αποστολής επιστολών.

// Μάθετε την προηγούμενη σελίδα $ prev_page \u003d $ _server ["http_referer"]; // Οι δημοσιεύσεις μας $ msg \u003d ""; // Κατάσταση επιστολής $ status_email \u003d "";

Τώρα, ώστε να μην υπάρχουν προβλήματα κωδικοποίησης, να το δείχνουν με την κεφαλίδα.

Κεφαλίδα ("τύπος περιεχομένου: κείμενο / html; charset \u003d utf-8");

Εάν ($ _ server ["request_method"] \u003d\u003d "post") (αν (ISSET ($ _ post ["αριθμός], $ _post [" email "], $ _post [" ερώτηση "])) ($ Clear_Data ($ _post ["αριθμός"]); $ email \u003d clear_data ($ _ post ["email"]); $ question \u003d clear_data ($ _ post ["ερώτηση]); αν (check_format ($ nice," τηλέφωνο " ") && check_format ($ email," email ") &&! Άδειο ($ ερώτηση)) (// που σχηματίσουμε $ e_title \u003d" (! Lang: νέο μήνυμα"; $e_body = "!} "; $ e_body. \u003d" "$ E_body. \u003d" Τηλέφωνο: "$ Αριθμός, $ e_body. \u003d"
"$ e_body. \u003d" mail: ". $ email, $ e_body. \u003d"
"$ e_body. \u003d" Ερώτηση: "$ ερώτηση, $ e_body. \u003d"

"; $ e_body. \u003d""// Τέλος, σχηματίζουμε ένα γράμμα (send_mail ($ my_mail, $ e_title, $ e_body, $ prev_page)) ($ status_email \u003d" επιτυχία "; $ msg \u003d successg_msg (" Σας ευχαριστώ για την ερώτησή σας.
Θα σας απαντήσουμε σύντομα. »),) Else ($ status_email \u003d" Σφάλμα "; $ msg \u003d error_msg (" Παρουσιάστηκε σφάλμα κατά την αποστολή ενός γράμματος. ");) // Γράψτε στο $ str \u003d" Ώρα: ". Ημερομηνία ("DMY G: I: s"). "" \\ n \\ r "; $ str. \u003d" Τηλέφωνο: ". $." \\ n \\ r "; $ str. \u003d" mail: "$ email". \\ N \\ r "; $ str. \u003d" Ερώτηση: "$ ερώτηση." \\ N \\ r "; $ str. \u003d" Γράμμα: "$ status_email." \\ N \\ r ", $ str. \u003d" \u003d \u003d\u003d \u003d \u003d \u003d \u003d \u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \\ N \\ R "· file_put_contents ($ path_log, $ str, file_append)?) Αλλιώς ($ msg \u003d error_msg (" γεμίστε έξω τη φόρμα δεξιά! ");)))) αλλού ($ msg \u003d error_msg (" Παρουσιάστηκε σφάλμα! ");))) αλλού (έξοδος;)

Στον γραπτό κώδικα, ορίζουμε αν στέλνουμε ένα έντυπο, διαφορετικά κλείνω αυτό το αρχείο χρησιμοποιώντας τη λειτουργία εξόδου. Στη συνέχεια, ελέγξτε την παρουσία στη θέση Post των κυττάρων με τα δεδομένα μας, αν ήρθαν, καθαρίστε τα από πιθανά σκουπίδια. Μετά τον καθαρισμό, ελέγξτε τις μορφές μηνυμάτων ηλεκτρονικού ταχυδρομείου και τηλεφώνου, καθώς και την παρουσία κειμένου σε μια μεταβλητή ερώτηση. Στη συνέχεια, δημιουργούμε μια επιστολή, στέλνουμε και γράψουμε logies όπου, εκτός από τα δεδομένα, εξοικονομούμε την κατάσταση της αποστολής μιας επιστολής. Έτσι θα μπορέσουμε να παρακολουθήσουμε τη λειτουργία της λειτουργίας της αλληλογραφίας () και ταυτόχρονα μην χάσετε τα δεδομένα.

Εμφάνιση μηνυμάτων

Έχουμε αφήσει μόνο να ειδοποιήσουμε τον χρήστη για μια επιτυχημένη ή "όχι πολύ" λειτουργία που ολοκληρώθηκε και να την επιστρέψει στην τοποθεσία με τη φόρμα. Για να το κάνετε αυτό, χρησιμοποιούμε το σήμα με τις εγκλείσεις του σεναρίου PHP.

Για να ανακατευθύνετε τον χρήστη πίσω στον ιστότοπο, θα χρησιμοποιήσουμε το ανανέωση του metagego, όπου κάνουν τα ένθετα του κώδικα PHP ήδη με τις δημιουργημένες μεταβλητές. Πρέπει ακόμα να χρησιμοποιήσουμε το JavaScript λίγο για να κάνετε μια σελίδα ελαφρώς δυναμική. Γράφουμε τη λειτουργία χρόνου (), η οποία θα είναι σε αντίστροφη σειρά για να μετρήσει τα δευτερόλεπτα πριν την ανακατεύθυνση.

Αυτό είναι όλο, η μορφή ανατροφοδότησης είναι έτοιμη.

Από τον συγγραφέα: Χαιρετισμούς σε σας, φίλους. Αυτό το άρθρο θα είναι μια συνέχιση στην οποία εφαρμόσαμε δεδομένα αποστολής δεδομένων στο διακομιστή χωρίς επανεκκίνηση της σελίδας. Εδώ θα συνεχίσουμε αυτό το θέμα και θα μάθουμε πώς να λαμβάνετε δεδομένα στο διακομιστή και να εφαρμόσετε την αποστολή της φόρμας σε ηλεκτρονικό ταχυδρομείο (email). Έτσι, ας ρυθμίσουμε τη φόρμα ανατροφοδότησης και να προσθέσουμε τη δυνατότητα να το στείλετε στο μήνυμα ηλεκτρονικού ταχυδρομείου.

Αρχεία προέλευσης του τρέχοντος αντικειμένου Μπορείτε να κάνετε λήψη λογισμικού.

Σε αυτό το μάθημα θα κάνουμε τα πάντα όσο το δυνατόν απλά και από μόνα τους. Συγκεκριμένα, για να στείλετε επιστολές, θα χρησιμοποιήσουμε την ειδική λειτουργία PHP που ονομάζεται Mail (), η οποία χρησιμοποιήθηκε πριν από την αποστολή επιστολών.

Ας ξεκινήσουμε με τη σύνταξη λειτουργίας αλληλογραφίας. Αυτή η λειτουργία έχει τρεις υποχρεωτικές παραμέτρους και δύο προαιρετικά (δεν απαιτείται). Απαιτούμενες παραμέτρους:

Για - παραλήπτης ηλεκτρονικού ταχυδρομείου (μπορείτε επίσης να καθορίσετε αρκετές διευθύνσεις, να τις μεταφέρετε μέσω του κόμματος).

Θέμα - το αντικείμενο της επιστολής.

Μήνυμα - κείμενο επιστολής.

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

Ας προσπαθήσουμε να στείλουμε ένα γράμμα χρησιμοποιώντας αυτή τη λειτουργία. Κάντε το στο αρχείο mail.php στο οποίο δεχόμαστε δεδομένα από τη φόρμα. Ο νέος κώδικας αυτού του αρχείου θα είναι:

Το μήνυμά σας δημοσιεύτηκε

";) Αλλού (ECHO"

Λάθος!

"; }

< ? php $ \u003d " [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]" ; // Διεύθυνση του παραλήπτη $ Θέμα \u003d. "Τηλεφωνική κλήση"; // θέμα επιστολής $ Μήνυμα \u003d. "Όνομα: ($ _post [" όνομα "]) \\ r \\ n"; // Προσθέστε το όνομα στο κείμενο $ Μήνυμα. \u003d. "Τηλέφωνο: ($ _post [" τηλέφωνο "])"; // Προσθέστε το τηλέφωνο στο κείμενο $ Κεφαλίδες. \u003d. "Τύπος περιεχομένου: κείμενο / πεδιάδα; charset \u003d utf-8". "\\ r \\ n"; // ορίζουμε την κωδικοποίηση $ Κεφαλίδες. \u003d "Από: [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]"." \\ r \\ n "; // Προσθέστε τον αποστολέα Αν (αλληλογραφία ($, $, θέμα, $ μήνυμα, $ κεφάλια)) ( Ηχώ. " Το μήνυμά σας δημοσιεύτηκε " ; ) Αλλού ( Ηχώ. " Λάθος! " ;

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

Όπως μπορείτε να δείτε, ο κώδικας λειτουργεί, σε απάντηση, λαμβάνουμε ένα μήνυμα που έστειλε η επιστολή. Δεδομένου ότι δουλεύουμε σε έναν τοπικό διακομιστή, εδώ γράμματα δεν αποστέλλονται πραγματικά στη λειτουργία αλληλογραφίας (), αποθηκεύονται ως αρχείο κειμένου σε ειδικό φάκελο. Σε Open Server, αυτό είναι ένα φάκελο \\ userdata \\ temp \\ email \\. Ας ανοίξουμε αυτόν τον φάκελο και βεβαιωθείτε ότι η επιστολή είναι εκεί, θα μοιάζει με αυτό:

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

$ (Λειτουργία (). Υποβολή (E.PreventDefault (E), VAR Data \u003d $ (αυτό) .Serialize (); $ .AJAX ((URL: "mail.php", τύπος: "post", δεδομένα: δεδομένα, δεδομένα, δεδομένα, BeForesert: Λειτουργία () ($ ("# υποβολή"). Επόμενο () Κείμενο (i "στέλνετε ...");), επιτυχία: λειτουργία (res) (res) ("είσοδος". ). Val (""); $ ("# υποβολή"). Επόμενο (). Html (res);), Σφάλμα: Λειτουργία () (Ειδοποίηση ("Σφάλμα!")))))))))))))))))))))))))))))))))))))))))))))))))))))))))) · ;

$ (Λειτουργία () ( $ ("#recall"). Υποβολή (λειτουργία (ε) μι. Προβολή (); vAR δεδομένων \u003d $ (αυτό). σειριοποίηση (); $. ajax (( uRL: "mail.php", Τύπος: "Post", Δεδομένα: Δεδομένα, beForesert: λειτουργία () () ( $ ("#Submit"). Επόμενο (). Κείμενο ("στέλνω ...");