Πώς να δημιουργήσετε μια φόρμα HTML (Επεξηγούνται παραδείγματα)

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

Δομή μιας φόρμας HTML

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

τα στοιχεία εισόδου πηγαίνουν εδώ

Στοιχεία εισόδου

Πεδία κειμένου

Τα πεδία κειμένου δημιουργούνται χρησιμοποιώντας την ετικέτα με την ιδιότητα τύπος στρωμένος κείμενο. Για παράδειγμα:

Ονομα:




Τηλέφωνο

Το στοιχείο χρησιμοποιείται για πεδία εισαγωγής αριθμού τηλεφώνου.

Τηλέφωνο:


Ημερομηνία

Το στοιχείο χρησιμοποιείται για την επιλογή ημερομηνίας.

Ημερομηνία γέννησης:


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

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

Κωδικός πρόσβασης:


Αρχείο

Το στοιχείο χρησιμοποιείται για να επιτρέπει στο χρήστη να επιλέξει ένα αρχείο από το τοπικό του σύστημα αρχείων.

Ανέβασμα αρχείου:


Πλαίσιο ελέγχου

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

Αποδέχομαι τους όρους και τις προϋποθέσεις

Ραδιόφωνο

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

Γένος:

Ανδρας

γυναίκες

Αριθμός

Το στοιχείο χρησιμοποιείται για αριθμητικά πεδία εισαγωγής.

Ποσό:


Εύρος

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

Ενταση ΗΧΟΥ:




Κουμπιά

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

Ονομα:




Χειρισμός Εισαγωγής Φόρμας

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

Μέθοδος GET

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

τα στοιχεία εισόδου πηγαίνουν εδώ

Μέθοδος POST

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

τα στοιχεία εισόδου πηγαίνουν εδώ

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

Παράδειγμα φόρμας HTML με όλα τα στοιχεία 

Ακολουθεί μια φόρμα που χρησιμοποιεί όλα τα στοιχεία που εξετάσαμε σε αυτό το άρθρο:

Φόρμα εγγραφής

Ονομα:



Επίθετο:



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



Τηλέφωνο:



Ημερομηνία γέννησης:



Κωδικός πρόσβασης:



Ανέβασμα αρχείου:



Αποδέχομαι τους όρους και τις προϋποθέσεις


Γένος:

Ανδρας

γυναίκες

Ποσό:



Ενταση ΗΧΟΥ:




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

Το κουμπί "Υποβολή" στο τέλος είναι αυτό που θα είναι υπεύθυνο για την υποβολή της φόρμας στη διεύθυνση URL που καθορίζεται στο χαρακτηριστικό δράση Της ετικέτας σχήμα (σε αυτήν την περίπτωση, "/submit_form"). Προκειμένου αυτή η φόρμα να λειτουργήσει σε έναν πραγματικό ιστότοπο, θα πρέπει να έχετε έναν διακομιστή ρυθμισμένο ώστε να λαμβάνει και να επεξεργάζεται τις πληροφορίες από αυτήν τη φόρμα στη διαδρομή "/submit_form".