Μια απλή φόρμα εισαγωγής δεδομένων html. Τι είναι μια φόρμα και πώς λειτουργεί. Χαρακτηριστικά φόρμας - ετικέτα

Φόρμα HTMLείναι ένα εργαλείο με το οποίο ένα έγγραφο HTML μπορεί να στείλει κάποιες πληροφορίες σε κάποιο προκαθορισμένο σημείο στον έξω κόσμο, όπου οι πληροφορίες θα υποβληθούν σε επεξεργασία με κάποιο τρόπο.

Είναι αρκετά δύσκολο να μιλήσουμε για φόρμες σε ένα σεμινάριο αφιερωμένο στην HTML. Ο λόγος είναι πολύ απλός: η δημιουργία μιας φόρμας HTML είναι πολύ πιο εύκολη από τη δημιουργία του "σημείου στον έξω κόσμο" στο οποίο η φόρμα HTML θα στείλει πληροφορίες. Στις περισσότερες περιπτώσεις, ένα τέτοιο "σημείο" είναι ένα πρόγραμμα γραμμένο σε Perl ή C.

Τα προγράμματα που επεξεργάζονται δεδομένα που υποβάλλονται από φόρμες ονομάζονται συχνά σενάρια CGI. Το ακρωνύμιο CGI σημαίνει Common Gateways Interface. Η σύνταξη σεναρίων CGI στις περισσότερες περιπτώσεις απαιτεί καλή γνώση της αντίστοιχης γλώσσας προγραμματισμού και των δυνατοτήτων λειτουργικό σύστημα Unix.

Επί του παρόντος, η γλώσσα PHP/FI έχει γίνει κάπως διαδεδομένη, οι οδηγίες της οποίας μπορούν να ενσωματωθούν απευθείας σε έγγραφα HTML (τα έγγραφα αποθηκεύονται ως αρχεία με την επέκταση *.pht ή *.php).

Φόρμες HTMLμεταδίδουν πληροφορίες σε προγράμματα χειριστή με τη μορφή ζευγών [όνομα μεταβλητής]=[τιμή μεταβλητής] . Πρέπει να καθοριστούν τα ονόματα των μεταβλητών με λατινικά γράμματα. Οι μεταβλητές τιμές αντιμετωπίζονται ως συμβολοσειρές από τους χειριστές, ακόμα κι αν περιέχουν μόνο αριθμούς.

Πώς λειτουργεί η φόρμα HTML

Η φόρμα ανοίγει με την ετικέτα

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

Ετικέτα

μπορεί να περιέχει τρία χαρακτηριστικά, ένα από τα οποία απαιτείται. Αυτά είναι τα χαρακτηριστικά:

Απαιτούμενο χαρακτηριστικό. Καθορίζει πού βρίσκεται ο χειριστής φόρμας.

Καθορίζει πώς (με άλλα λόγια, χρησιμοποιώντας ποια μέθοδο πρωτοκόλλου μεταφοράς υπερκειμένου) τα δεδομένα από τη φόρμα θα μεταφερθούν στον χειριστή. Οι έγκυρες τιμές είναι METHOD=POST και METHOD=GET. Εάν η τιμή του χαρακτηριστικού δεν έχει οριστεί, η METHOD=GET θεωρείται από προεπιλογή.

Καθορίζει τον τρόπο με τον οποίο θα κωδικοποιηθούν τα δεδομένα από τη φόρμα HTML για αποστολή στο πρόγραμμα χειρισμού. Εάν η τιμή του χαρακτηριστικού δεν έχει οριστεί, η προεπιλογή είναι ENCTYPE=application/x-www-form-urlencoded .

Η απλούστερη φόρμα HTML

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

Έχοντας συναντήσει μια τέτοια γραμμή μέσα στη φόρμα, το πρόγραμμα περιήγησης θα σχεδιάσει ένα κουμπί στην οθόνη με την επιγραφή Υποβολή (διαβάστε "υποβολή" με έμφαση στη δεύτερη συλλαβή, από το αγγλικό "submit"), όταν κάνετε κλικ, όλα τα δεδομένα είναι διαθέσιμα σε η φόρμα θα μεταφερθεί στον χειριστή που ορίζεται στην ετικέτα .

Η ετικέτα στο κουμπί μπορεί να οριστεί σε ό,τι θέλετε εισάγοντας το χαρακτηριστικό VALUE="[Ετικέτα]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

Τώρα ξέρουμε αρκετά για να γράφουμε απλούστερο HTMLμορφή (παράδειγμα 11). Δεν θα συλλέξει δεδομένα, αλλά απλώς θα μας επιστρέψει στο κείμενο αυτού του κεφαλαίου.

Παράδειγμα 11

Απλούστερη μορφή

Η επιγραφή που τοποθετείται στο κουμπί μπορεί, εάν είναι απαραίτητο, να μεταβιβαστεί στον χειριστή εισάγοντας το χαρακτηριστικό NAME=[όνομα] στον ορισμό του κουμπιού (διαβάστε "όνομα", από τα αγγλικά "όνομα"), για παράδειγμα:

Όταν κάνετε κλικ σε ένα τέτοιο κουμπί, ο χειριστής, μαζί με όλα τα άλλα δεδομένα, θα λάβει μια μεταβλητή κουμπιού με την τιμή Let's go! .

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

Πώς μια φόρμα HTML συλλέγει δεδομένα

Υπάρχουν και άλλα είδη στοιχείων . Κάθε στοιχείο πρέπει να περιλαμβάνει το χαρακτηριστικό NAME=[όνομα], το οποίο καθορίζει το όνομα του στοιχείου (και, κατά συνέπεια, το όνομα της μεταβλητής που θα μεταβιβαστεί στον χειριστή). Το όνομα πρέπει να προσδιορίζεται μόνο με λατινικά γράμματα. Τα περισσότερα είδη πρέπει να περιλαμβάνει το χαρακτηριστικό VALUE="[τιμή]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} Και , ωστόσο, αυτό το χαρακτηριστικό είναι προαιρετικό επειδή η τιμή της αντίστοιχης μεταβλητής μπορεί να εισαχθεί από τον χρήστη χρησιμοποιώντας το πληκτρολόγιο.

Βασικοί τύποι στοιχείων :

TYPE=κείμενο

Ορίζει ένα παράθυρο για την εισαγωγή μιας γραμμής κειμένου. Μπορεί να περιέχει πρόσθετα χαρακτηριστικά SIZE=[αριθμός] (πλάτος του παραθύρου εισαγωγής σε χαρακτήρες) και MAXLENGTH=[αριθμός] (μέγιστο επιτρεπόμενο μήκος της συμβολοσειράς εισαγωγής σε χαρακτήρες).

Παράδειγμα:

Ορίζει ένα παράθυρο 20 χαρακτήρων για την εισαγωγή κειμένου. Από προεπιλογή, το παράθυρο περιέχει το κείμενο Ivan, το οποίο ο χρήστης μπορεί να επεξεργαστεί. Το επεξεργασμένο (ή μη επεξεργασμένο) κείμενο μεταβιβάζεται στον χειριστή στη μεταβλητή χρήστη.

TYPE=κωδικός πρόσβασης

Ορίζει ένα παράθυρο για την εισαγωγή κωδικού πρόσβασης. Απολύτως παρόμοιο με τον τύπο κειμένου, μόνο που αντί για σύμβολα του εισαγόμενου κειμένου εμφανίζει αστερίσκους (*) στην οθόνη. Παράδειγμα:

Ορίζει ένα παράθυρο 20 χαρακτήρων για την εισαγωγή κωδικού πρόσβασης. Το μέγιστο επιτρεπόμενο μήκος κωδικού πρόσβασης είναι 10 χαρακτήρες. Ο εισαγόμενος κωδικός πρόσβασης μεταβιβάζεται στον χειριστή στη μεταβλητή pw.

TYPE=ραδιόφωνο

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

Παράδειγμα:

9600 bps
14400 bps
28800 bps

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

TYPE=πλαίσιο ελέγχου

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

Παράδειγμα:

Προσωπικοί υπολογιστές
Σταθμοί εργασίας
Διακομιστές τοπικά δίκτυα
Διακομιστές Διαδικτύου

Ορίζει μια ομάδα τεσσάρων τετραγώνων. Το δεύτερο και το τέταρτο τετράγωνο σημειώνονται αρχικά. Εάν ο χρήστης δεν κάνει αλλαγές, δύο μεταβλητές θα περάσουν στον χειριστή: comp=WS και comp=IS .

TYPE=κρυφό

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

Παράδειγμα:

Καθορίζει μια κρυφή μεταβλητή έκδοσης που μεταβιβάζεται στον χειριστή με την τιμή 1.1.

TYPE=επαναφορά

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

Παράδειγμα:

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

Εκτός από τα στοιχεία , οι φόρμες HTML μπορούν να περιέχουν μενού .</p> <p>Μενού <SELECT>των n στοιχείων μοιάζει κάπως έτσι:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[τιμή 1]">[κείμενο 1] <OPTION VALUE="[τιμή 2]">[κείμενο 2] ... <OPTION VALUE="[n τιμή]">[κείμενο ν]</SELECT> </p><p>Όπως μπορείτε να δείτε, το μενού ξεκινά με την ετικέτα <SELECT>και τελειώνει με την ετικέτα</SELECT>. Ετικέτα <SELECT>περιέχει <a href="https://radiobud.ru/el/life-hacks-for-pc/kakie-atributy-yavlyayutsya-obyazatelnymi-dlya-tega-input-adresa-elektronnoi-pochty.html">απαιτούμενο χαρακτηριστικό</a> NAME , το οποίο καθορίζει το όνομα της μεταβλητής που δημιουργεί το μενού.</p> <p>Ετικέτα <SELECT>μπορεί επίσης να περιέχει ένα χαρακτηριστικό MULTIPLE, η παρουσία του οποίου υποδεικνύει ότι μπορούν να επιλεγούν πολλά στοιχεία από το μενού. Τα περισσότερα προγράμματα περιήγησης εμφανίζουν ένα μενού <SELECT MULTIPLE>με τη μορφή παραθύρου στο οποίο βρίσκονται τα στοιχεία μενού (το ύψος του παραθύρου σε γραμμές μπορεί να οριστεί με το χαρακτηριστικό SIZE=[number]). Μενού <SELECT>στις περισσότερες περιπτώσεις εμφανίζεται ως αναπτυσσόμενο μενού.</p> <p>Ετικέτα <OPTION>ορίζει ένα στοιχείο μενού. Το απαιτούμενο χαρακτηριστικό VALUE ορίζει την τιμή που θα μεταβιβαστεί στον χειριστή εάν επιλεγεί αυτό το στοιχείο μενού. Ετικέτα <OPTION>μπορεί να περιλαμβάνει ένα επιλεγμένο χαρακτηριστικό που υποδεικνύει ότι το στοιχείο ελέγχεται από προεπιλογή.</p> <h3>Ας δούμε ένα μικρό παράδειγμα:</h3> <SELECT NAME="selection"> <OPTION VALUE="Επιλογή 1" checked>Επιλογή 1 <OPTION VALUE="επιλογή 2">Επιλογή 2 <OPTION VALUE="επιλογή 3">Επιλογή 3</SELECT> <p>Αυτό το τμήμα ορίζει ένα μενού τριών στοιχείων: Επιλογή 1, Επιλογή 2 και Επιλογή 3. Από προεπιλογή, είναι επιλεγμένο το στοιχείο Επιλογή 1. Ο χειριστής θα λάβει μια μεταβλητή επιλογής της οποίας η τιμή μπορεί να είναι option1 (προεπιλογή), option2 ή option3.</p> <p>Μετά από όλα όσα έχουμε ήδη μάθει, το στοιχείο <TEXTAREA>μπορεί να φαίνεται αρκετά απλό. Για παράδειγμα:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>Και εδώ είναι η διεύθυνσή σου...

Απαιτούνται όλα τα χαρακτηριστικά. Το χαρακτηριστικό NAME ορίζει το όνομα με το οποίο θα μεταφερθούν τα περιεχόμενα του παραθύρου στον χειριστή (στο παράδειγμα - διεύθυνση). Το χαρακτηριστικό ROWS ορίζει το ύψος του παραθύρου σε σειρές (5 στο παράδειγμα). Το χαρακτηριστικό COLS ορίζει το πλάτος του παραθύρου σε χαρακτήρες (50 στο παράδειγμα).

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

Είναι σημαντικό να γνωρίζετε ότι στο παράθυρο υπάρχουν ρωσικά γράμματα όταν περάσουν στον χειριστή, μπορούν να μετατραπούν στα αντίστοιχα αντικείμενα χαρακτήρων τους.</p> <h3>Παράδειγμα:</h3> <p>Για να δείξω τη χρήση μορφών HTML έγραψα <a href="https://radiobud.ru/el/ios/kak-ispolzovat-programmu-itunes-nebolshoi-manual-po-itunes.html">μικρό πρόγραμμα</a>σε PHP, η οποία βρίσκεται στη διεύθυνση:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Τα δεδομένα προέλευσης θα μεταφερθούν σε αυτό το πρόγραμμα με τη φόρμα που περιγράφεται στο παράδειγμα 12:</p><p> <HTML> <HEAD> <TITLE>Παράδειγμα 12</TITLE> </HEAD> <H1>Λίγο πιο σύνθετη μορφή</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Πες μας λίγα λόγια για σένα...</H2> <P>Δεν είναι απαραίτητο να παρέχετε γνήσιες πληροφορίες. Για λόγους επίδειξης, τα εικονικά είναι επίσης αρκετά κατάλληλα.</P> <P>Ονομα: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Επώνυμο: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Πάτωμα: <INPUT TYPE=radio NAME=gender VALUE="αρσενικός" checked>αρσενικός <INPUT TYPE=radio NAME=gender VALUE="θηλυκός">θηλυκός <BR>Ηλικία: <INPUT TYPE=text SIZE=5 NAME=age>χρόνια <BR> <INPUT TYPE=submit VALUE="Χειριστής εκτέλεσης"></P> </FORM> </BODY> </HTML> </p><p>Συμπληρώστε τη φόρμα HTML, κάντε κλικ στο κουμπί και δείτε τι συμβαίνει...</p> <p><b>Μικρό κόλπο <br>ή πώς να στείλετε τη φόρμα μέσω ταχυδρομείου</b></p><p>Όλα αυτά είναι ωραία, θα πουν οι σκεπτικιστές, αλλά γιατί διάολο χρειάζονται οι άνθρωποι φόρμες HTML που δεν έχουν τίποτα να τις επεξεργαστούν; Αυτό είναι εν μέρει αλήθεια, αλλά μόνο εν μέρει.</p> <p>Η HTML θέτει στη διάθεσή σας έναν αρκετά ισχυρό μηχανισμό για την αποστολή περιεχομένου φόρμας μέσω <a href="https://radiobud.ru/el/life-hacks-in-vk/bezopasnaya-elektronnaya-pochta-bez-slezhki-bezopasnaya-elektronnaya-pochta.html">ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ</a>. Εδώ είναι πώς φαίνεται στην πράξη.</p> <p>Ας πούμε ότι αλλάξαμε ελαφρώς το Παράδειγμα 12. Αντί για τη συμβολοσειρά</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>μπήκαμε στη γραμμή</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Λάβετε υπόψη ότι αλλάξαμε τον αλγόριθμο κωδικοποίησης σε κείμενο/απλό, δηλαδή, στην πραγματικότητα απενεργοποιήσαμε εντελώς την κωδικοποίηση.</p> <p>Ας υποθέσουμε τώρα ότι ο χρήστης υπέδειξε το όνομα Ivan, το επίθετο Petrov, το αρσενικό φύλο και την ηλικία 22 ετών. Τώρα το ερώτημα είναι: τι συμβαίνει εάν ο χρήστης κάνει κλικ στο κουμπί Run Handler;</p> <p>Η απάντηση είναι απλή. Το ακόλουθο μήνυμα θα σταλεί αυτόματα στο user@mail.box μέσω email:</p><p>Fn=Ivan ln=Petrov φύλο=ανδρική ηλικία=22</p><p>Δυστυχώς, δεν θα μπορούν όλοι οι χρήστες να χρησιμοποιήσουν αυτήν τη φόρμα HTML. Γεγονός είναι ότι όλη η εργασία για τη σύνταξη ενός μηνύματος και την εκκίνηση ενός προγράμματος email για την αποστολή του αναλαμβάνεται στην πραγματικότητα από το πρόγραμμα περιήγησης του χρήστη. Αυτό σημαίνει ότι η διαμόρφωση πρόσβασης στο Διαδίκτυο του χρήστη πρέπει να διασφαλίζει την ταυτόχρονη λειτουργία του Πρωτοκόλλου μεταφοράς υπερκειμένου και του πρωτοκόλλου παράδοσης εξερχόμενης αλληλογραφίας. Αυτό δεν είναι πάντα δυνατό. Ωστόσο, ακόμα κι αν αυτό είναι αδύνατο, τίποτα μοιραίο δεν θα συμβεί. Το πρόγραμμα περιήγησης θα εμφανίσει απλώς ένα μήνυμα σφάλματος.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Οι φόρμες έχουν σχεδιαστεί για να στέλνουν δεδομένα από τον χρήστη στον διακομιστή ιστού. Οι φόρμες σε HTML μπορούν να αποτελούνται από πεδία κειμένου και περιοχές κειμένου, πλαίσια ελέγχου και κουμπιά επιλογής και αναπτυσσόμενες λίστες. Όλα αυτά είναι στοιχεία φόρμας. Κάθε στοιχείο χρησιμεύει για να μεταφέρει κάποιο νόημα στον ιστότοπο. <br>Στον πυρήνα της, μια φόρμα HTML είναι μια ιστοσελίδα στην οποία βλέπετε περιοχές για την εισαγωγή των πληροφοριών σας. Αφού συμπληρώσετε τη φόρμα και κάνετε κλικ στην υποβολή, οι πληροφορίες από τη φόρμα συσκευάζονται και αποστέλλονται στον διακομιστή web για επεξεργασία από ένα σενάριο από την πλευρά του διακομιστή (αρχείο χειριστή). Μετά την επεξεργασία, μια άλλη ιστοσελίδα επιστρέφεται σε εσάς ως απάντηση. Το παρακάτω σχήμα δείχνει ξεκάθαρα πώς λειτουργεί η φόρμα:</p> <p>Δεν υπάρχει τίποτα δύσκολο στη δημιουργία φορμών HTML. Ο ευκολότερος τρόπος για να πάρετε μια ιδέα για τις φόρμες είναι να αναλύσετε λίγο κώδικα HTML και στη συνέχεια να δείτε πώς λειτουργεί. Το ακόλουθο παράδειγμα δείχνει τη σύνταξη για τη δημιουργία μιας απλής φόρμας HTML:</p> <h3>Παράδειγμα: Απλή φόρμα HTML</h3> <ul><li>Δοκιμάστε το μόνοι σας"</li> </ul><p>Η πρώτη μου μορφή: <br>Ονομα: <input type="text" name="firstname" value=""><br>Επώνυμο: <input type="text" name="lastname" value=""><br><input type="submit"></p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Απλή φόρμα</title> </head><br><body> <form action="action_form.php" method="POST"> <p>Η πρώτη μου μορφή: <br>Ονομα: <input type="text" name="firstname" value=""><br>Επώνυμο: <input type="text" name="lastname" value=""><br> <input type="submit"> </p> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Στοιχείο <b><form> </b> </h2> <p>Οι φόρμες εισάγονται σε ιστοσελίδες χρησιμοποιώντας το στοιχείο <b><form> </b>. Παρέχει ένα κοντέινερ για όλο το περιεχόμενο της φόρμας, συμπεριλαμβανομένων στοιχείων όπως πεδία κειμένου και κουμπιά, καθώς και οποιεσδήποτε άλλες ετικέτες <a href="https://radiobud.ru/el/life-hacks-for-smartphones/osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke-yazyk-html-dlya.html">Γλώσσα HTML</a>. Ωστόσο, δεν μπορεί να περιέχει άλλο στοιχείο <b><form> </b> .<br>Για να στείλετε τη φόρμα στον διακομιστή, χρησιμοποιήστε το κουμπί «Υποβολή», το ίδιο αποτέλεσμα θα ληφθεί εάν πατήσετε το πλήκτρο «Enter» μέσα στη φόρμα. Εάν το κουμπί "Υποβολή" δεν υπάρχει στη φόρμα, το κλειδί "Enter" μπορεί να χρησιμοποιηθεί για την υποβολή. <br>Τα περισσότερα χαρακτηριστικά στοιχείων <b><form> </b>επηρεάζουν την επεξεργασία της φόρμας και όχι τον σχεδιασμό της. Τα πιο συνηθισμένα από τα οποία είναι <b>δράση</b>Και <b>μέθοδος</b>. Χαρακτηριστικό <b>δράση</b>περιέχει τη διεύθυνση URL στην οποία θα σταλούν οι πληροφορίες στη φόρμα για επεξεργασία από τον διακομιστή. Χαρακτηριστικό <b>μέθοδος</b>είναι <a href="https://radiobud.ru/el/program/vvedenie-v-klient-servernye-tehnologii-veb-protokol-http-metody-i-struktura.html">Μέθοδος HTTP</a>, τα οποία πρέπει να χρησιμοποιούν τα προγράμματα περιήγησης για την υποβολή δεδομένων φόρμας.</p> <h2>Στοιχείο <b><input> </b> </h2> <p>Σχεδόν όλα τα πεδία φόρμας δημιουργούνται χρησιμοποιώντας το στοιχείο <b><input> </b>(από το αγγλικό input - input). <a href="https://radiobud.ru/el/computers/harakteristiki-materinskoi-platy-asus-maximus-4-extreme-obzor-i-testirovanie.html">Εμφάνιση</a>στοιχείο <b><input> </b>αλλάζει ανάλογα με την τιμή του χαρακτηριστικού του <b>τύπος</b>:</p><p> <input type="значение"> </p><p>Ακολουθούν ορισμένες τιμές χαρακτηριστικών <b>τύπος</b>:</p> <h2>Εισαγωγή κειμένου και κωδικού πρόσβασης</h2> <p>Ενα από τα πολλά <a href="https://radiobud.ru/el/life-hacks-for-ios/prostye-tipy.html">απλοί τύποι</a>Τα στοιχεία φόρμας είναι ένα πεδίο κειμένου σχεδιασμένο για την εισαγωγή κειμένου από μία γραμμή. <a href="https://radiobud.ru/el/game/transact-sql-tipy-dannyh-sql-tipy-dannyh.html">Αυτός ο τύπος</a>Η εισαγωγή κειμένου έχει οριστεί από προεπιλογή και επομένως είναι το πεδίο μιας γραμμής που θα εμφανιστεί εάν ξεχάσετε να καθορίσετε το χαρακτηριστικό <b>τύπος</b>. Για να προσθέσετε ένα πεδίο εισαγωγής κειμένου μιας γραμμής σε μια φόρμα, θα πρέπει να μπείτε μέσα στο στοιχείο <b><input> </b>καταχωρήστε το χαρακτηριστικό <b>τύπος</b>με τιμή κειμένου:</p><p> <input type="text"> </p><p>Το πεδίο εισαγωγής κωδικού πρόσβασης είναι ένας τύπος κανονικού <a href="https://radiobud.ru/el/life-hacks-wi-fi/podvinut-polya-vo-vsem-dokumente-kak-nastroit-tekstovoe-pole-v-microsoft.html">πεδίο κειμένου</a>. Υποστηρίζει τα ίδια χαρακτηριστικά με ένα πεδίο κειμένου μιας γραμμής. Χαρακτηριστικό <b>όνομα</b>ορίζει το όνομα του πεδίου εισαγωγής κωδικού πρόσβασης που θα σταλεί στον διακομιστή μαζί με τον κωδικό πρόσβασης που έχει εισαγάγει ο χρήστης. Για να δημιουργήσετε ένα πεδίο κωδικού πρόσβασης, πρέπει να ορίσετε το χαρακτηριστικό κωδικού πρόσβασης <b>τύπος</b>(κωδικός πρόσβασης (Αγγλικά) - κωδικός πρόσβασης):</p><p> <input type="password"> </p><p>Ένα παράδειγμα δημιουργίας φόρμας με πεδίο κωδικού πρόσβασης:</p> <h3>Παράδειγμα: Πεδίο κωδικού πρόσβασης</h3> <ul><li>Δοκιμάστε το μόνοι σας"</li> </ul><p>Η σύνδεσή σας: <input type="text" name="login" size="15" maxlength="30" value="το όνομα σου"></p> <p>Κωδικός πρόσβασης: <input type="password" name="password" size="15" maxlength="30" value="Κωδικός πρόσβασης"></p> <input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Η σύνδεσή σας: <input type="text" name="login" size="15" maxlength="30" value="το όνομα σου"> </p> <p>Κωδικός πρόσβασης: <input type="password" name="password" size="15" maxlength="30"> </p> <input type="submit"> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <p>Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό σε συνδυασμό με αυτό το χαρακτηριστικό <b>μέγιστο μήκος</b>, η αξία του οποίου καθορίζει <a href="https://radiobud.ru/el/life-hacks-for-pc/maksimalnoe-kolichestvo-zaprosov-v-yandekse-kak-polzovatsya.html">μέγιστο ποσό</a>χαρακτήρες που μπορούν να εισαχθούν <a href="https://radiobud.ru/el/program/kak-obedinit-yacheiki-v-excel-bez-poteri-dannyh-obedinenie-strok-stolbcov.html">αυτή τη γραμμή</a>. Μπορείτε επίσης να ορίσετε το μήκος του πεδίου εισαγωγής χρησιμοποιώντας το χαρακτηριστικό <b>Μέγεθος</b>. Από προεπιλογή, τα περισσότερα προγράμματα περιήγησης περιορίζουν το πλάτος ενός πεδίου κειμένου στους 20 χαρακτήρες. Για να ελέγξετε το πλάτος των νέων στοιχείων φόρμας, αντί για ένα χαρακτηριστικό <b>Μέγεθος</b>, συνιστούμε να χρησιμοποιήσετε Cascading Style Sheets (CSS). <br>Χαρακτηριστικό <b>αξία</b>καθορίζει την τιμή που εμφανίζεται από προεπιλογή στο πεδίο κειμένου κατά τη φόρτωση της φόρμας. Εισάγοντας μια προεπιλεγμένη τιμή στο πεδίο, μπορείτε να εξηγήσετε στον χρήστη ποια ακριβώς δεδομένα και σε ποια μορφή θέλετε να εισάγει ο χρήστης εδώ. Αυτό είναι σαν δείγμα, γιατί είναι πολύ πιο βολικό για τον χρήστη να συμπληρώσει τη φόρμα, βλέποντας ένα παράδειγμα μπροστά του.</p> <h2>Διακόπτες (ραδιόφωνο)</h2> <p>Στοιχείο <b><input> </b>τύπος <b>ραδιόφωνο</b>δημιουργεί διακόπτες που χρησιμοποιούν τη λογική αρχή "OR", επιτρέποντάς σας να επιλέξετε μόνο μία από πολλές τιμές: εάν επιλέξετε μία θέση, τότε όλες οι άλλες γίνονται ανενεργές. Η βασική σύνταξη ενός στοιχείου εναλλαγής είναι:</p><p> <input type="radio" name="имя _переменной" value="έννοια"> </p><p>Χαρακτηριστικό <b>όνομα</b>για διακόπτες απαιτείται και παίζει σημαντικό ρόλο στο συνδυασμό πολλών στοιχείων διακόπτη σε μια ομάδα. Για να συνδυάσετε κουμπιά επιλογής σε μια ομάδα, πρέπει να ορίσετε την ίδια τιμή χαρακτηριστικού <b>όνομα</b>Και <a href="https://radiobud.ru/el/instructions/shestnadcaterichnyi-kod-cveta-cvet-v-stilyah-mozhno-zadavat.html">διαφορετική σημασία</a>Χαρακτηριστικό <b>αξία</b>. Χαρακτηριστικό <b>αξία</b>ορίζει την τιμή του επιλεγμένου κουμπιού επιλογής που θα σταλεί στον διακομιστή. Η τιμή κάθε στοιχείου κουμπιού επιλογής πρέπει να είναι μοναδική εντός της ομάδας, έτσι ώστε ο διακομιστής να γνωρίζει ποια επιλογή απόκρισης επέλεξε ο χρήστης. <br>Χαρακτηριστική παρουσία <b>τετραγωνισμένος</b>(από τα αγγλικά - εγκατεστημένο) στο στοιχείο διακόπτη υποδεικνύει ποιες από τις προτεινόμενες επιλογές πρέπει να επιλεγούν από προεπιλογή κατά τη φόρτωση της σελίδας, εάν είναι απαραίτητο. <a href="https://radiobud.ru/el/life-hacks-for-ios/funkcionalnaya-zavisimost-bazy-dannyh-zavisimosti-mezhdu.html">Αυτή η ιδιότητα</a>μπορεί να οριστεί μόνο για ένα στοιχείο κουμπιού επιλογής από την ομάδα:</p> <h3></h3> <ul><li>Δοκιμάστε το μόνοι σας"</li> </ul><p>Πόσο χρονών είσαι?</p> <ol><li><input type="radio" name="age" value="18" checked>κάτω των 18</li> <li><input type="radio" name="age" value="18-24">από 18 έως 24</li> <li><input type="radio" name="age" value="25-34">από 25 έως 35</li> <li><input type="radio" name="age" value="35-50">περισσότερα από 35</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Πόσο χρονών είσαι?</p> <ol> <li><input type="radio" name="age" value="18" checked>κάτω των 18</li> <li><input type="radio" name="age" value="18-24">από 18 έως 24</li> <li><input type="radio" name="age" value="25-34">από 25 έως 35</li> <li><input type="radio" name="age" value="35-50">περισσότερα από 35</li> </ol> <input type="submit"< </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Πλαίσια ελέγχου</h2> <p>Στοιχείο <b><input> </b>τύπος <b>πλαίσιο ελέγχου</b>δημιουργεί πλαίσια ελέγχου που είναι παρόμοια με τα κουμπιά επιλογής, καθώς δίνουν στον χρήστη τη δυνατότητα να επιλέξει από τις επιλογές που παρέχετε. Η κύρια διαφορά από τα κουμπιά επιλογής είναι ότι ο επισκέπτης μπορεί να επιλέξει πολλές επιλογές ταυτόχρονα και οι ίδιες οι σημαίες υποδεικνύονται με τετράγωνα και όχι με κύκλους. Όπως και με τα κουμπιά επιλογής, δημιουργείται μια ομάδα πλαισίων ελέγχου εκχωρώντας σε κάθε στοιχείο την ίδια τιμή χαρακτηριστικού <b>όνομα</b>, ωστόσο, κάθε πλαίσιο ελέγχου έχει τη δική του σημασία. Η βασική σύνταξη ενός πλαισίου ελέγχου είναι:</p><p> <input type="checkbox" name="имя _переменной" value="έννοια"> </p><p>Χαρακτηριστικό <b>τετραγωνισμένος</b>, όπως και με τα κουμπιά επιλογής, καθορίζει ότι το πλαίσιο ελέγχου πρέπει να ελέγχεται από προεπιλογή όταν φορτώνεται η σελίδα. Αυτό το χαρακτηριστικό μπορεί να οριστεί ταυτόχρονα για πολλά πλαίσια ελέγχου ομάδας. <br>Το ακόλουθο παράδειγμα χρήσης πλαισίων ελέγχου έχει πολλές προεπιλεγμένες επιλογές απάντησης:</p> <h3>Παράδειγμα: Χρήση κουμπιών επιλογής</h3> <ul><li>Δοκιμάστε το μόνοι σας"</li> </ul> <ol><li><input type="checkbox" name="musik" value="juze" checked>Τζαζ</li> <li><input type="checkbox" name="musik" value="ακεφιά" checked>Ακεφιά</li> <li><input type="checkbox" name="musik" value="βράχος">Βράχος</li> <li><input type="checkbox" name="musik" value="σάνσον">Chanson</li> <li><input type="checkbox" name="musik" value="Χώρα">Χώρα</li> </ol><input type="submit"><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <p>Ποια είδη μουσικής σας αρέσουν;</p> <ol> <li><input type="checkbox" name="musik" value="juze" checked>Τζαζ</li> <li><input type="checkbox" name="musik" value="ακεφιά" checked>Ακεφιά</li> <li><input type="checkbox" name="musik" value="βράχος">Βράχος</li> <li><input type="checkbox" name="musik" value="σάνσον">Chanson</li> <li><input type="checkbox" name="musik" value="Χώρα">Χώρα</li> </ol> <input type="submit"< </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Κουμπιά επιβεβαίωσης (υποβολή) και εκκαθάρισης (επαναφορά).</h2> <p>Στοιχείο <b><input> </b>τύπος <b>υποβάλλουν</b>δημιουργεί ένα κουμπί στο οποίο, όταν πατηθεί, στέλνει το πρόγραμμα περιήγησης σε ένα σενάριο διακομιστή για να επεξεργαστεί τα δεδομένα που έχει καταχωρίσει ο χρήστης στη φόρμα. Αν δημιουργήσουμε ένα κουμπί που διαγράφει τη φόρμα, τότε εκχωρούμε το χαρακτηριστικό <b>τύπος</b>τιμή "επαναφοράς". στοιχείο <b><input> </b>τύπος <b>υποβάλλουν</b>μπορεί να εκχωρηθεί ένα προαιρετικό χαρακτηριστικό <b>όνομα</b>. Χαρακτηριστικό <b>αξία</b>χρησιμοποιείται σε αυτό το στοιχείο για να καθορίσει κείμενο που υποδεικνύει την ετικέτα στο κουμπί. Από προεπιλογή, τα προγράμματα περιήγησης έχουν γραμμένο στο κουμπί "Υποβολή", εάν δεν είστε ικανοποιημένοι με αυτό το κείμενο, εισαγάγετε το μόνοι σας. Δεδομένου ότι τα στυλ κουμπιών επιβεβαίωσης μπορεί να διαφέρουν σε διαφορετικά προγράμματα περιήγησης, είναι καλύτερο να προσαρμόσετε το στυλ κουμπιού μόνοι σας χρησιμοποιώντας εργαλεία CSS ή χρησιμοποιώντας γραφικά κουμπιά. <br>Δημιουργία κουμπιών επιβεβαίωσης και διαγραφής:</p> <h3>Παράδειγμα: Χρήση υποβολής και επαναφοράς</h3> <ul><li>Δοκιμάστε το μόνοι σας"</li> </ul> <input type="text" name="email"><input type="submit" name="podpisatsya" value="Εγγραφείτε"><input name="reset" type="reset" value="Σαφή"><p>Κάνοντας κλικ στο κουμπί Επαναφορά επαναφέρονται τυχόν δεδομένα που έχουν εισαχθεί από τον χρήστη.</p> <p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> </head><br><body> <form action="action_form.php" method="POST"> <input type="text" name="email"> <input type="submit" name="podpisatsya" value="Εγγραφείτε"> <input name="reset" type="reset" value="Σαφή"> </form> <script type="text/javascript">  </script><br> <br> </body><br></html></p> <h2>Το χαρακτηριστικό δράσης.</h2> <p>Κύριο για στοιχείο <b><form> </b>είναι μια ιδιότητα <b>δράση</b>, το οποίο καθορίζει τον χειριστή δεδομένων για τη φόρμα. Ένας χειριστής δεδομένων είναι ένα αρχείο που περιγράφει τι πρέπει να κάνετε με τα δεδομένα φόρμας. Το αποτέλεσμα αυτής της επεξεργασίας είναι μια νέα σελίδα HTML που επιστρέφεται στο πρόγραμμα περιήγησης. Με άλλα λόγια, στην ιδιότητα <b>δράση</b>καθορίζει τη διαδρομή URL προς ένα αρχείο χειριστή στον διακομιστή (μερικές φορές ονομάζεται σελίδα σεναρίου) για την επεξεργασία της φόρμας. Η σύνταξη έχει ως εξής:</p><p> <form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form> </p><p>Το αρχείο επεξεργασίας βρίσκεται στον διακομιστή <i>mytestserver.com</i>σε φάκελο <i>φάκελος ονόματος</i>και το όνομα του σεναρίου διακομιστή που θα επεξεργαστεί τα δεδομένα - <i>obrabotchik.php</i>. Όλα τα δεδομένα που καταχωρίσατε στη φόρμα της ιστοσελίδας θα μεταφερθούν σε αυτόν. Η επέκταση .php υποδεικνύει ότι η καθορισμένη φόρμα υποβάλλεται σε επεξεργασία από ένα σενάριο γραμμένο σε PHP. Ο ίδιος ο χειριστής μπορεί να γραφτεί σε άλλη γλώσσα, για παράδειγμα θα μπορούσε να είναι η γλώσσα σεναρίου Python, Ruby, κ.λπ. <br>Συνιστάται να ορίζετε πάντα την τιμή του χαρακτηριστικού <b>δράση</b>. Εάν η φόρμα πρέπει να μεταβιβάσει τιμές στην ίδια σελίδα όπου βρίσκεται, καταχωρίστε μια κενή συμβολοσειρά ως τιμή του χαρακτηριστικού action: action="".</p> <h2>χαρακτηριστικό της μεθόδου</h2> <p>Χαρακτηριστικό <b>μέθοδος</b>καθορίζει τον τρόπο μεταφοράς των πληροφοριών στον διακομιστή. Η μέθοδος υποβολής φόρμας που επιλέγετε εξαρτάται από τα δεδομένα που θέλετε να υποβάλετε με τη φόρμα. Ο όγκος αυτών των δεδομένων παίζει σημαντικό ρόλο εδώ. Οι πιο δημοφιλείς είναι δύο μέθοδοι μεταφοράς των δεδομένων πηγής της φόρμας σας από το πρόγραμμα περιήγησης στον διακομιστή: <b>ΠΑΙΡΝΩ</b>Και <b>ΘΕΣΗ</b>. Η μέθοδος μπορεί να οριστεί σε όποια επιλέξετε και αν δεν την καθορίσετε, θα χρησιμοποιηθεί η προεπιλογή <b>ΠΑΙΡΝΩ</b>. Ας εξετάσουμε τη χρήση καθενός από αυτά.</p> <h2>Μέθοδος POST</h2> <p>Μέθοδος <b>ΘΕΣΗ</b>Τα πακέτα σχηματίζουν δεδομένα και τα στέλνει στον διακομιστή χωρίς να το αντιληφθεί ο χρήστης, καθώς τα δεδομένα περιέχονται στο σώμα του μηνύματος. Πρόγραμμα περιήγησης στο Web, όταν χρησιμοποιείτε τη μέθοδο <b>ΘΕΣΗ</b>στέλνει ένα αίτημα στον διακομιστή που αποτελείται από ειδικές κεφαλίδες ακολουθούμενες από δεδομένα φόρμας. Δεδομένου ότι τα περιεχόμενα αυτού του αιτήματος είναι διαθέσιμα μόνο στον διακομιστή, η μέθοδος <b>ΘΕΣΗ</b>χρησιμοποιείται για τη μετάδοση εμπιστευτικών δεδομένων όπως κωδικούς πρόσβασης, στοιχεία τραπεζικής κάρτας και άλλα προσωπικά στοιχεία των χρηστών. Μέθοδος <b>ΘΕΣΗ</b>κατάλληλο και για αποστολή μεγάλου όγκου πληροφοριών, αφού σε αντίθεση με τη μέθοδο <b>ΠΑΙΡΝΩ</b>, δεν έχει περιορισμούς στον αριθμό των μεταδιδόμενων χαρακτήρων.</p> <h2>Μέθοδος GET</h2> <p>Όπως ήδη γνωρίζετε, η κύρια δουλειά ενός προγράμματος περιήγησης είναι να λαμβάνει ιστοσελίδες από τον διακομιστή. Όταν λοιπόν χρησιμοποιείτε τη μέθοδο <b>ΠΑΙΡΝΩ</b>, το πρόγραμμα περιήγησής σας απλώς ανακτά την ιστοσελίδα όπως κάνει πάντα. Μέθοδος <b>ΠΑΙΡΝΩ</b>αναδιπλώνει επίσης δεδομένα φόρμας, αλλά τα προσαρτά στο τέλος της διεύθυνσης URL πριν στείλει το αίτημα στον διακομιστή. Για να κατανοήσετε πώς λειτουργεί η μέθοδος <b>ΠΑΙΡΝΩ</b>, ας το δούμε στην πράξη. Ανοίξτε το πρώτο παράδειγμα από αυτό το μάθημα (Παράδειγμα: Απλή φόρμα HTML) στο Σημειωματάριο (για παράδειγμα Notepad++) και κάντε μια μικρή αλλαγή στον κώδικα HTML:</p><p> <form action="" method="GET"> </p><p>εκείνοι. αντικαθιστώ <b>ΘΕΣΗ</b>επί <b>ΠΑΙΡΝΩ</b>.<br>Αποθηκεύστε το αρχείο κάτω από το όνομα <i>file_name.html</i>και ανανεώστε τη σελίδα του προγράμματος περιήγησης (F5) και, για παράδειγμα, συμπληρώστε τη φόρμα <i>Βάσια Πούπκιν</i>και κάντε κλικ στο κουμπί «Υποβολή». Στη γραμμή διευθύνσεων του προγράμματος περιήγησής σας θα δείτε κάτι σαν αυτό:</p><p>File_name.html?firstname=Vasya&lastname=Pupkin</p><p>Τώρα μπορείτε να δείτε το όνομα κάθε στοιχείου φόρμας, καθώς και την τιμή του, ακριβώς εδώ στη διεύθυνση URL. <br>Η διεύθυνση URL διαχωρίζεται από τα υπόλοιπα δεδομένα της φόρμας με ένα ερωτηματικό και τα ονόματα και οι τιμές των μεταβλητών διαχωρίζονται με ένα σύμφωνο <b>(&) </b>.<br>Αυτή η μέθοδος θα πρέπει να χρησιμοποιείται εάν δεν μεταφέρετε μεγάλο όγκο πληροφοριών. <br>Αυτή η μέθοδος δεν θα λειτουργήσει εάν τα δεδομένα στη φόρμα σας είναι ευαίσθητα, όπως η αποθήκευση αριθμού τραπεζικής κάρτας ή κωδικού πρόσβασης. <br>Επιπλέον, η μέθοδος <b>ΠΑΙΡΝΩ</b>είναι ακατάλληλο εάν θέλετε να στείλετε αρχεία στον διακομιστή μαζί με τη φόρμα.</p> <h2>Ομαδοποίηση στοιχείων φόρμας</h2> <p>Τα στοιχεία φόρμας που σχετίζονται ως προς το νόημα μπορούν να ομαδοποιηθούν μεταξύ ετικετών <b><fieldset> </b>Και <b></fieldset> </b>. Θα εμφανιστεί το πρόγραμμα περιήγησης <b><fieldset> </b>με τη μορφή πλαισίου γύρω από μια ομάδα στοιχείων μορφής. Η εμφάνιση του πλαισίου μπορεί να αλλάξει χρησιμοποιώντας Cascading Style Sheets (CSS). <br>Για να προσθέσετε έναν τίτλο για κάθε ομάδα, θα χρειαστείτε ένα στοιχείο <b><legend> </b>, το οποίο καθορίζει το κείμενο του τίτλου της ομάδας που θα ενσωματωθεί στο πλαίσιο.</p> <br><p>Οι φόρμες σε HTML είναι το πιο περίπλοκο, αλλά από την άλλη πλευρά, ίσως το πιο ενδιαφέρον θέμα στην HTML.</p> <p>Οι φόρμες Ιστού επιτρέπουν στους επισκέπτες του ιστότοπου να εισάγουν ορισμένες πληροφορίες σε ειδικά πεδία και ο προγραμματιστής τις λαμβάνει με μια βολική μορφή για αυτόν.</p> <p>Ένα παράδειγμα φόρμας θα μπορούσε να είναι ένα βιβλίο επισκεπτών, ένα ερωτηματολόγιο ή μια διαδικτυακή δοκιμή. Οι φόρμες συμπληρώνονται κατά την εγγραφή στον ιστότοπο, κατά την υποβολή παραγγελιών σε ηλεκτρονικό κατάστημα κ.λπ.</p> <p>Χρησιμοποιώντας HTML, μπορείτε να δημιουργήσετε ένα πλαίσιο φόρμας: πεδία κειμένου, μενού, λίστες, κουμπιά, πλαίσια ελέγχου και κουμπιά επιλογής. Δηλαδή, εκείνα τα στοιχεία με τη βοήθεια των οποίων ορισμένες πληροφορίες εισάγονται στη φόρμα.</p> <p>Στη συνέχεια τα δεδομένα που εισάγονται στη φόρμα αποστέλλονται στον διακομιστή για επεξεργασία. Αλλά το HTML είναι ανίσχυρο εδώ - ένα πρόγραμμα ή ένα σενάριο που είναι συνδεδεμένο σε αυτό εργάζεται ήδη για την επεξεργασία της φόρμας. Τέτοια προγράμματα είναι συνήθως γραμμένα σε PHP ή JavaScript.</p> <h4>Χαρακτηριστικά φόρμας - ετικέτα <form></h4> <p>Μπορεί να υπάρχουν πολλές φόρμες σε μια ιστοσελίδα ( <i>όσο χρειάζεται ο προγραμματιστής</i>). Κάθε ένα από αυτά αρχίζει με την ετικέτα <form>και τελειώνει με μια ετικέτα κλεισίματος</form> .</p> <p><a href="https://radiobud.ru/el/life-hacks-for-pc/pobochnyi-register-form-php-php-self-v-atribute-formy-action.html">χαρακτηριστικό δράσης</a>είναι υποχρεωτική για οποιαδήποτε φόρμα - καθορίζει τη διεύθυνση στο αρχείο που εξυπηρετεί τη φόρμα ( <i>επεξεργάζεται τα δεδομένα που εισάγονται σε αυτό</i>).</p> <p>Το χαρακτηριστικό μέθοδος καθορίζει τον τρόπο υποβολής του περιεχομένου της φόρμας. Υπάρχουν δύο μέθοδοι - GET και POST. Τώρα δεν έχει νόημα να εμβαθύνουμε σε αυτές τις παραμέτρους, καθώς το θέμα της αποστολής πληροφοριών χρησιμοποιώντας τις μεθόδους GET και POST σχετίζεται με γλώσσες επεξεργασίας δεδομένων ( <i>για παράδειγμα PHP</i>). Αρκεί να γνωρίζουμε ότι είναι η μέθοδος μεταφοράς δεδομένων POST που χρησιμοποιείται στις περισσότερες περιπτώσεις σε φόρμες.</p> <p>Χαρακτηριστικό ονόματος ετικέτας <form>είναι προαιρετική. Αλλά εάν υπάρχουν πολλές φόρμες στο έγγραφο, τότε καθεμία από αυτές πρέπει να αναγνωριστεί με κάποιο τρόπο από τον χειριστή. Επομένως, η παρουσία του χαρακτηριστικού name σε αυτήν την περίπτωση είναι απαραίτητη - καθορίζει το μοναδικό όνομα της φόρμας.</p> <p>Μπορείτε επίσης να ορίσετε την κωδικοποίηση για τα δεδομένα εισόδου - το χαρακτηριστικό accept-charset είναι υπεύθυνο για αυτό και επίσης, χρησιμοποιώντας το χαρακτηριστικό target, ορίστε το παράθυρο στο οποίο θα εμφανίζεται το αποτέλεσμα της επεξεργασίας της υποβληθείσας φόρμας ( <i>σε νέο ή τρέχον παράθυρο</i>).</p> <p>Αλλά η ίδια η ετικέτα <form>δεν έχει νόημα, γιατί η φόρμα μεταδίδει δεδομένα που πρέπει πρώτα να εισαχθούν κάπου!</p> <h4>Εισαγωγή δεδομένων. Πεδία φόρμας - ετικέτα <input></h4> <p>Ετικέτα <input>Αυτή είναι η πιο κοινή ετικέτα που βρίσκεται σε φόρμες. Έχει σχεδιαστεί για να δημιουργεί διάφορα στοιχεία που χρησιμεύουν για την εισαγωγή δεδομένων σε μια φόρμα: πεδία κειμένου, κουμπιά, πλαίσια ελέγχου, κουμπιά επιλογής.</p> <p>type είναι το κύριο χαρακτηριστικό της ετικέτας <input>. Ορίζει τον τύπο πεδίου ( <i>στοιχείο</i>) έντυπα:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Τιμή χαρακτηριστικού type="..."</p> </td> <td width="245px"> <p>Αποτέλεσμα</p> </td> <td> <p>Περιγραφή</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Το όνομα σου..." ></p> </td> <td align="center"><form> <input type="text" size="20" value="Το όνομα σου..."></form> </td> <td><p>Πεδίο κειμένου μονής γραμμής για εισαγωγή κειμένου. Το χαρακτηριστικό size καθορίζει το πλάτος του πεδίου σε χαρακτήρες.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"><form> <input type="password" maxlength="10" size="20"></form> </td> <td><p>Πεδίο κειμένου για την εισαγωγή κωδικού πρόσβασης. <br>Το χαρακτηριστικό maxlength ορίζει τον μέγιστο αριθμό χαρακτήρων που μπορούν να εισαχθούν</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> <form> <input type="radio" name="radio" value="1" checked> 1 <input type="radio" name="radio" value="2"> 2 <input type="radio" name="radio" value="3"> 3 </form> </td> <td><p>Διακόπτης. <br>Μπορείτε να επιλέξετε μόνο μία επιλογή από αυτές που προσφέρονται. Το χαρακτηριστικό checked καθορίζει ένα προεπιλεγμένο πεδίο.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> <form> <input type="checkbox" checked>1 <input type="checkbox">2 <input type="checkbox">3 </form> </td> <td><p>Πλαίσιο ελέγχου. <br>Υπάρχουν πολλές επιλογές για να διαλέξετε.</span>Χαρακτηριστικό <span>Το επιλεγμένο ορίζει ένα προεπιλεγμένο πεδίο.</p> </td> </tr><tr><td><p><input type="button" value="Κουμπί" ></p> </td> <td align="center"><form> <input type="button" value="Κουμπί"></form> </td> <td><p>Κουμπί. <br>Το χαρακτηριστικό value ορίζει την ετικέτα στο κουμπί.</p> </td> </tr><tr><td><p><input type="reset" value="Επαναφορά" ></p> </td> <td align="center"><form> <input type="reset" value="Επαναφορά"></form> </td> <td><p>Κουμπί επαναφοράς. <br>Επιστρέφει τα πεδία φόρμας στην αρχική τους μορφή. Επαναφορά δεδομένων που έχουν εισαχθεί.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"><form> <input type="submit"></form> </td> <td><p>Κουμπί για την αποστολή των καταχωρημένων δεδομένων.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"><form> <input type="file"></form> </td> <td><p>Πεδίο για την εισαγωγή του ονόματος του αρχείου που αποστέλλεται.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"><form> <input type="image" src="img/buttom.gif"></form> </td> <td><p>Κουμπί-εικόνα. <br>Χρησιμοποιείται επίσης για την αποστολή δεδομένων στον διακομιστή. Το χαρακτηριστικό src καθορίζει τη διεύθυνση του αρχείου εικόνας.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"><form> <input type="hidden" size="20"></form> </td> <td><p>Κρυφό πεδίο - αόρατο στο χρήστη.</p> </td> </tr></table><h3>Αναπτυσσόμενο - Ετικέτες <select>Και <option></h3> <p>Ετικέτα <select>ίδιο με την ετικέτα <input>χρησιμεύει για τη συλλογή πληροφοριών - δημιουργεί μια λίστα από την οποία μπορούν να επιλεγούν ένα ή περισσότερα στοιχεία. Κάθε στοιχείο αντιστοιχεί σε μια τιμή, η οποία αποστέλλεται στον διακομιστή για επεξεργασία.</p> <p>Ο τύπος της λίστας που δημιουργείται εξαρτάται από την τιμή του χαρακτηριστικού μεγέθους: με μέγεθος= "1" ( <i>Προεπιλεγμένη τιμή</i>) η λίστα θα είναι αναπτυσσόμενη.</p> <p>Μια διαφορετική τιμή για το χαρακτηριστικό μέγεθος θα αντιστοιχεί στον αριθμό των εμφανιζόμενων στοιχείων της λίστας. Για παράδειγμα, με το size="3" , θα είναι ορατά τρία στοιχεία. Για να δείτε άλλα στοιχεία λίστας ( <i>αν υπάρχουν</i>) θα πρέπει να χρησιμοποιήσετε την κάθετη γραμμή κύλισης, η οποία προστίθεται αυτόματα.</p> <p>Από προεπιλογή, μπορεί να επιλεγεί μόνο ένα στοιχείο λίστας. Προσθήκη του πολλαπλού χαρακτηριστικού σε μια ετικέτα <select>σας επιτρέπει να επιλέξετε πολλά στοιχεία λίστας χρησιμοποιώντας το ποντίκι και τα πλήκτρα Ctrl και Shift.</p> <p>Εάν υπάρχει το χαρακτηριστικό πολλαπλών, θα εμφανιστούν όλα ή μέρος των στοιχείων της λίστας ( <i>ανάλογα με το πρόγραμμα περιήγησης</i>), εκτός εάν το χαρακτηριστικό μέγεθος έχει οριστεί σε έναν ορισμένο αριθμό ορατών στοιχείων.</p> <p>Το απαιτούμενο στοιχείο της αναπτυσσόμενης λίστας είναι η ετικέτα <option>. Βρίσκεται μέσα στην ετικέτα <select>και δημιουργεί κάθε στοιχείο λίστας.</p> <p>Χρήση του χαρακτηριστικού ονόματος της ετικέτας <select>στη λίστα δίνεται ένα όνομα και χρησιμοποιώντας το χαρακτηριστικό value της ετικέτας <option>στο στοιχείο της λίστας εκχωρείται μια τιμή. Έτσι, ένα ζεύγος «όνομα=τιμή» αποστέλλεται στον διακομιστή - το όνομα της λίστας και η τιμή των επιλεγμένων στοιχείων.</p> <p>Επιλεγμένο χαρακτηριστικό μιας ετικέτας <option>ορίζει ένα προηγουμένως επιλεγμένο στοιχείο λίστας και το χαρακτηριστικό απενεργοποιημένο αποκλείει το στοιχείο λίστας - δεν μπορεί να επιλεγεί.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>Η βασική κατεύθυνση είναι μία από τις τέσσερις κύριες κατευθύνσεις:</p> <br> <select name= "storona" > <br> <option value= "Βόρειος" >Βόρειος</option><br> <option value= "Νότος" >Νότος</option><br> <option value= "δυτικά" >δυτικά</option><br> <option value= "Ανατολή" >Ανατολή</option> <br> </select><br><p>7 Θαύματα του Κόσμου!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >Η Πυραμίδα του Χέοπα</option><br> <option value= "2" selected> <span>Κρεμαστοί κήποι της Βαβυλώνας</span> </option><br> <option value= "3" disabled> <span>Άγαλμα του Δία στην Ολυμπία</span> </option><br> <option value= "4" > <span>Ναός της Αρτέμιδος στην Έφεσο</span> </option><br> <option value= "5" > <span>μαυσωλείο στην Αλικαρνασσό</span> </option><br> <option value= "6" > <span>Ο Κολοσσός της Ρόδου</span> </option><br> <option value= "7" > <span>Αλεξανδρινός φάρος</span> </option><br> </select><br><p> <input type= "reset" value= "Επαναφορά" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <form> <p>Η βασική κατεύθυνση είναι μία από τις τέσσερις κύριες κατευθύνσεις:</p><p>Βόρεια Νοτιοδυτικά Ανατολικά</p><p>7 Θαύματα του Κόσμου!</p><p>Πυραμίδα του Χέοπα Κρεμαστοί κήποι της Βαβυλώνας Άγαλμα του Δία στην Ολυμπία Ναός της Αρτέμιδος στο Μαυσωλείο της Εφέσου στον Κολοσσό της Αλικαρνασσού της Ρόδου Φάρος της Αλεξάνδρειας</p><p><input type="reset" value="Επαναφορά"></p> </form> <h3>Πεδίο κειμένου πολλών γραμμών - ετικέτα <textarea></h3> <p>Ετικέτα <textarea>δημιουργεί ένα πεδίο κειμένου πολλών γραμμών. Επιτρέπεται να γίνονται σπασίματα γραμμής σε αυτό, οι οποίες διατηρούνται κατά τη μετάδοση δεδομένων στον χειριστή.</p> <p>Χαρακτηριστικό ονόματος ετικέτας <textarea>είναι υποχρεωτικό - χρησιμοποιώντας το, δίνεται ένα όνομα στο πεδίο κειμένου.</p> <p>Το χαρακτηριστικό disabled απενεργοποιεί το πεδίο - τα περιεχόμενα του πεδίου δεν μπορούν να αλλάξουν και δεν είναι προσβάσιμο. Το χαρακτηριστικό μόνο για ανάγνωση υποδεικνύει ότι το πεδίο είναι μόνο για ανάγνωση - ο χρήστης δεν έχει τη δυνατότητα να επεξεργαστεί το περιεχόμενο, αλλά είναι διαθέσιμο - μπορεί να επιλεγεί και, για παράδειγμα, να αντιγραφεί.</p> <p>Μπορείτε να ορίσετε το πλάτος του πεδίου κειμένου σε χαρακτήρες και το ύψος του πεδίου σε γραμμές χρησιμοποιώντας τα χαρακτηριστικά cols και rows, αντίστοιχα.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Εάν τα περιεχόμενα του πεδίου υπερβαίνουν το μέγεθός του, θα εμφανιστεί ένα ρυθμιστικό.</span>

Εάν τα περιεχόμενα του πεδίου υπερβαίνουν το μέγεθός του, θα εμφανιστεί ένα ρυθμιστικό.

Παράδειγμα χρήσης φόρμας

Τώρα ας δούμε πώς λειτουργεί η φόρμα.

Φόρμα παραγγελίας εκπαιδευτικού βίντεο:

Οι φόρμες HTML είναι πολύπλοκα στοιχεία διεπαφής. Περιλαμβάνουν διαφορετικά λειτουργικά στοιχεία: πεδία εισαγωγής Και , λίστες <select>, συμβουλές κ.λπ. Όλος ο κώδικας φόρμας περιέχεται στο στοιχείο <form> .</p> <p>Οι περισσότερες πληροφορίες φόρμας ιστού μεταφέρονται χρησιμοποιώντας το στοιχείο <input>. Για να εισαγάγετε μία γραμμή κειμένου, χρησιμοποιήστε το στοιχείο <input type="text">, για πολλαπλές γραμμές - στοιχείο <textarea>. Στοιχείο <select>δημιουργεί μια αναπτυσσόμενη λίστα.</p> <p>Στοιχείο <label>δημιουργεί ετικέτες για πεδία φόρμας. Υπάρχουν δύο τρόποι ομαδοποίησης ετικετών και πεδίων. Εάν το πεδίο βρίσκεται μέσα σε ένα στοιχείο <label>, τότε το χαρακτηριστικό for δεν χρειάζεται να καθοριστεί.</p><p> <label for="lastname">Επίθετο</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Επίθετο</label> <label>Επίθετο <input type="text" name="lastname"></label> </p><p>Τα πεδία φόρμας μπορούν να χωριστούν σε λογικά μπλοκ χρησιμοποιώντας το στοιχείο <fieldset>. Κάθε ενότητα μπορεί να ονομαστεί χρησιμοποιώντας το στοιχείο <legend> .</p><p> <fieldset> <legend>Στοιχεία επικοινωνίας</legend> <label>Ονομα <input type="text" required></label> <label>ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Ρύζι. 1. Ομαδοποίηση πεδίων φόρμας</p><p>Για να γίνει η φόρμα πιο κατανοητή στους χρήστες, προστίθεται κείμενο στα πεδία της φόρμας για να παρέχει ένα παράδειγμα των δεδομένων εισαγωγής. Αυτός ο τύπος κειμένου ονομάζεται κείμενο μπαλαντέρ και δημιουργείται χρησιμοποιώντας το χαρακτηριστικό κράτησης θέσης.</p> <p>Τα υποχρεωτικά πεδία πρέπει επίσης να επισημανθούν. Πριν από την HTML5, ο αστερίσκος * χρησιμοποιήθηκε δίπλα στο όνομα του πεδίου. Η νέα προδιαγραφή εισάγει ένα ειδικό απαιτούμενο χαρακτηριστικό, το οποίο σας επιτρέπει να επισημάνετε ένα απαιτούμενο πεδίο στο επίπεδο σήμανσης. Αυτό το χαρακτηριστικό δίνει εντολή στο πρόγραμμα περιήγησης (υποθέτοντας ότι υποστηρίζει HTML5) να μην στέλνει δεδομένα αφού ο χρήστης κάνει κλικ στην υποβολή μέχρι να συμπληρωθούν τα καθορισμένα πεδία.</p><p> <input type="text" required placeholder="το όνομα σου"> </p><p>Για να αλλάξετε την εμφάνιση ενός πεδίου κειμένου κατά τη λήψη εστίασης, χρησιμοποιήστε την ψευδοκλάση εστίασης. Για παράδειγμα, μπορείτε να κάνετε το φόντο του τρέχοντος πεδίου πιο σκούρο ή να προσθέσετε ένα έγχρωμο περίγραμμα για να ξεχωρίζει από τα υπόλοιπα:</p><p>Είσοδος: εστίαση ( φόντο: #eaeaea; )</p><p>Ένα άλλο χρήσιμο χαρακτηριστικό HTML5 είναι το χαρακτηριστικό autofocus. Σας επιτρέπει να ρυθμίσετε αυτόματα την εστίαση στο επιθυμητό αρχικό πεδίο για στοιχεία <input>Και <textarea>(μόνο ένα στοιχείο κάθε φόρμας).</p> <h2>Παράδειγμα δημιουργίας φόρμας εγγραφής</h2> <p><b>Σήμανση HTML</b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Εγγραφή</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Ονομα</label> <input type="text" name="name" required> </div> <div class="radio">Πάτωμα <label> <input type="radio" name="sex" value="αρσενικός">αρσενικός <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="θηλυκός">θηλυκός <div class="radio-control female"></div> </label> </div> <div> <label for="email">ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ</label> <input type="email" name="email" required> </div> <div> <label for="country">Μια χώρα</label> <select name="country"> <option>Επιλέξτε τη χώρα διαμονής σας</option> <option value="Ρωσία">Ρωσία</option> <option value="Ουκρανία">Ουκρανία</option> <option value="Λευκορωσία">Λευκορωσία</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Στείλετε</button> </form> </div> </p><p><b>Σημείωση</b><br>action="form.php" - σύνδεσμος προς το αρχείο χειριστή φόρμας. Δημιουργήστε ένα αρχείο σε κωδικοποίηση UTF-8, ανεβάστε το στον διακομιστή και αντικαταστήστε το action="form.php" με τη διαδρομή προς το αρχείο στον διακομιστή σας.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Ρύζι. 2. Προεπιλεγμένη εμφάνιση φόρμας <p>Όπως μπορείτε να δείτε από το σχήμα, κάθε στοιχείο φόρμας έχει προεπιλεγμένα στυλ προγράμματος περιήγησης. Ας καθαρίσουμε τα στυλ και ας διαμορφώσουμε τα στοιχεία της φόρμας.</p><p> Form-wrap ( πλάτος: 550 px; φόντο: #ffd500; περίγραμμα ακτίνας: 20 px; ) .form-wrap *(μετάβαση: .1 s linear) .profile (πλάτος: 240 px; float: αριστερά; στοίχιση κειμένου: κέντρο, συμπλήρωση : 30 px; ) μορφή ( φόντο: λευκό; float: αριστερά; πλάτος: calc (100% - 240 px); padding: 30 px; border-radius: 0 20 px 20 px; ) form div:after ( περιεχόμενο: ""; εμφάνιση: πίνακας; καθαρό: και τα δύο; ) φόρμα div ( περιθώριο-κάτω: 15 px; θέση: σχετική; ) h1 (μέγεθος γραμματοσειράς: 24 px; βάρος γραμματοσειράς: 400; θέση: σχετική ; margin-top: 50 px ) h1:after ( content: "\f138"; font-family: FontAwesome; position: absolute; 50px; left: 50%; transformation: translateX(-50; %) ) /******************** στυλ στοιχείων φόρμας ******************** ** / label, span ( οθόνη: μπλοκ; μέγεθος γραμματοσειράς: 14 px; margin-bottom: 8 px; ) είσοδος, είσοδος (πλάτος περιγράμματος: 0; περίγραμμα: κανένα; περιθώριο: 0; πλάτος: 100%; padding: 10 px 15px; φόντο: #e6e6e6 ) input:focus, input:focus ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio label ( θέση: σχετική; padding-left: 50 px; δρομέας: δείκτης; πλάτος: 50%; float: αριστερά; ύψος γραμμής: 40 px; ) .radio input ( position: absolute; opacity: 0; ) .radio -control ( θέση: απόλυτη; επάνω: 0; αριστερά: 0; ύψος: 40 εικονοστοιχεία; πλάτος: 40 εικονοστοιχεία; φόντο: #e6e6e6; ακτίνα περιγράμματος: 50%; στοίχιση κειμένου: κέντρο; ) .male:before ( περιεχόμενο: " \f222"; γραμματοσειρά-οικογένεια: FontAwesome; βάρος γραμματοσειράς: έντονη γραφή; ) .female:before ( περιεχόμενο: "\f221"; γραμματοσειρά-οικογένεια: FontAwesome; βάρος γραμματοσειράς: έντονη γραφή; ) .radio label:hover input ~. radio-control, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: κόκκινο; */ -moz-appearance: κανένας; κορυφή: 38 px; δεξιά: 15 px; πλάτος: 0; ύψος: 0; pointer-events: none; /*ενεργοποιήστε την εμφάνιση της λίστας όταν κάνετε κλικ στο βέλος*/ border-style: solid; πλάτος περιγράμματος: 8 εικονοστοιχεία 5 εικονοστοιχεία 0 5 εικονοστοιχεία; χρώμα περιγράμματος: #7b7b7b διαφανές διαφανές διάφανο; ) κουμπί ( συμπλήρωση: 10 εικονοστοιχεία 0, πλάτος περιγράμματος: 0, οθόνη: μπλοκ, πλάτος: 120 εικονοστοιχεία, περιθώριο: 25 εικονοστοιχεία αυτόματα 0, φόντο: #60e6c5, χρώμα: λευκό, μέγεθος γραμματοσειράς: 14 εικονοστοιχεία, περίγραμμα: κανένα, μετατροπή κειμένου : κεφαλαία ) /******************** προσθήκη προσαρμοστικότητας στη φόρμα ****************** ** **/ @media (μέγιστο πλάτος: 600 εικονοστοιχεία) ( .form-wrap (περιθώριο: 20 εικονοστοιχεία αυτόματα; μέγ. πλάτος: 550 εικονοστοιχεία; πλάτος: 100%;) .προφίλ, φόρμα (επιπλέον: κανένα; πλάτος: 100% .</p><p><b>Αρχείο Form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: your_email." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! άδεια($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "Σας ευχαριστούμε! Έχετε εγγραφεί επιτυχώς."; ) ?></p><p><b>Σημείωση</b><br>Στη μεταβλητή $subject, καθορίστε το κείμενο που θα εμφανίζεται ως τίτλος του γράμματος. <br>Your_name - εδώ μπορείτε να καθορίσετε το όνομα που θα εμφανίζεται στο πεδίο "από ποιον είναι το γράμμα". <br>αντικαταστήστε το your_site_url με τη διεύθυνση του ιστότοπου με τη φόρμα εγγραφής. <br>αντικαταστήστε το your_email με τη διεύθυνση email σας. <br>$headers .= "Bcc: your_email". "\r\n"; στέλνει BCC στη διεύθυνση email σας.</p> <p>Λαμβάνοντας υπόψη τις βασικές ετικέτες HTML, δεν μπορούμε παρά να αγγίξουμε ένα τόσο σημαντικό στοιχείο όπως οι φόρμες. Συχνά απαιτείται ανατροφοδότηση σε ιστοσελίδες. Για παράδειγμα, συμπλήρωση μιας φόρμας στον ιστότοπο, εγγραφή, εξουσιοδότηση, σχόλια κ.λπ. Σε όλες αυτές τις περιπτώσεις, ο χρήστης συμπληρώνει ειδικές περιοχές (πεδία φόρμας) στη σελίδα και μετά τα δεδομένα αποστέλλονται στον διακομιστή. Οι φόρμες χρησιμοποιούνται για τη δημιουργία σχολίων. Μια φόρμα είναι ένα τμήμα ενός εγγράφου HTML που προορίζεται για είσοδο χρήστη.</p><p>Το σχήμα δείχνει μια φόρμα εγγραφής μαθητή στον ιστότοπο ενός εκπαιδευτικού ιδρύματος.</p><p>Ένα δοχείο χρησιμοποιείται για τη δημιουργία μιας φόρμας <form></form>με το χαρακτηριστικό action, το οποίο καθορίζει τη σελίδα στον διακομιστή που θα επεξεργαστεί τα δεδομένα που αποστέλλονται από τη φόρμα.</p><p>Η δομή στην απλούστερη μορφή της:</p><p><formaction="адрес страницы обработчика формы"><br>στοιχεία μορφής... <br></form></p><p>Κάθε φόρμα πρέπει επίσης να έχει ένα κουμπί υποβολής για την υποβολή δεδομένων μετά τη συμπλήρωση της φόρμας.</p><p>Δομή κουμπιού:</p><p><input type="submit" name="имя кнопки" value="εμφανιζόμενο όνομα"></p><p>Έτσι, για την εγγραφή σχεδόν όλων των στοιχείων φόρμας, χρησιμοποιείται η ετικέτα <input>με το χαρακτηριστικό type. Για να δημιουργήσετε ένα κουμπί που επαναφέρει όλα τα δεδομένα από φόρμες, χρησιμοποιείται η ακόλουθη δομή:</p><p><input type="reset" name="имя кнопки" value="εμφανιζόμενο όνομα"></p><p>Για να δημιουργήσετε ένα πεδίο κειμένου, υπάρχει μια παράμετρος κειμένου. Χρησιμοποιούνται οι ακόλουθες παράμετροι: όνομα – όνομα πεδίου. μέγεθος – για το πεδίο σε σύμβολα. maxlength – ο μέγιστος δυνατός αριθμός χαρακτήρων στο πεδίο. τιμή – πληροφορίες που εμφανίζονται στη φόρμα από προεπιλογή</p><p>Παράδειγμα καταχώρισης φόρμας με δύο πεδία κειμένου:</p><p><form action="obrabotka.php"><br>Εισάγετε το όνομά σας: <br><br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br><br>Εισαγάγετε επώνυμο: <br><br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><br><input type="submit" name="otpravit" value="Στείλετε"><br><input type="reset" name="ochistit" value="Σαφή"><br></form></p><p>Το αποτέλεσμα της φόρμας φαίνεται στο σχήμα.</p><p><img src='https://i2.wp.com/webriz.ru/information/userfiles/1/saiti/1/forms/forma-html-primer.jpg.png' width="100%" loading=lazy loading=lazy></p><p>Εάν πρέπει να εισαγάγετε μεγάλο όγκο πληροφοριών σε ένα πεδίο κειμένου, για παράδειγμα, ένα σχόλιο, χρησιμοποιήστε τη φόρμα περιοχής κειμένου, η οποία δημιουργείται με χρήση ετικέτας <textarea>με τα ακόλουθα χαρακτηριστικά: όνομα – όνομα περιοχής. cols – αριθμός στηλών περιοχής. σειρές – αριθμός σειρών. wrap – τρόπος τύλιξης γραμμών (on – wrap lines, off – not wrap lines).</p><p>Στον παραπάνω κώδικα ας προσθέσουμε ένα πεδίο περιοχής κειμένου:</p><p>Ενα σχόλιο: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Το αποτέλεσμα του κώδικα που λειτουργεί με την περιοχή κειμένου φαίνεται στο σχήμα.

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

Για να επισημανθεί το στοιχείο κατά τη φόρτωση της σελίδας, είναι απαραίτητο στην ετικέτα

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

Δομή ενός πλαισίου ελέγχου και καταχώρισης κουμπιού επιλογής:

κείμενο

Κουμπί ραδιοφώνου:

κείμενο

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

Ένα άλλο στοιχείο φόρμας είναι ένα κουμπί, που καθορίζεται χρησιμοποιώντας το χαρακτηριστικό type tag με το κουμπί τιμής:

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

Για να εμφανίσετε ένα μήνυμα σε ένα ειδικό παράθυρο, χρησιμοποιήστε την εντολή JavaScript – aler. Το αποτέλεσμα του παραδείγματος φαίνεται στο σχήμα.

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

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

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

Το κρυφό στοιχείο φόρμας θα είναι αόρατο στο παράθυρο του προγράμματος περιήγησης.

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

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