Δημιουργία φορμών στον ιστό (Οδηγός)

Δημιουργία φόρμας ιστοσελίδας (πρακτικό μάθημα)

Γλώσσα: Γερμανικά

Δημιουργία φορμών ιστοσελίδων (πρακτικό εγχειρίδιο)

Πώς να δημιουργήσετε φόρμες ιστοσελίδων για τις ιστοσελίδες σας - Εξηγείται βήμα προς βήμα! Είτε θέλετε να ζητήσετε ονόματα, διευθύνσεις ηλεκτρονικού ταχυδρομείου, κωδικούς πρόσβασης, checkboxes, ημερομηνίες, λίστες ή dropdowns: Μάθετε σε αυτό το πρακτικό εγχειρίδιο, πώς να πάτε από την πρώτη φόρμα HTML σε μια πλήρως λειτουργική φόρμα ιστοσελίδας.

Δημιουργία φορμών στον ιστό - από τις βασικές αρχές έως τις λειτουργικές φόρμες
Δημιουργήστε και αναγνωρίστε σωστά τα πεδία εισαγωγής ηλεκτρονικού ταχυδρομείου, κωδικό και άλλων πληροφοριών.
Κουτιά ελέγχου, κουμπιά επιλογής, αναπτυσσόμενα μενού, πολλαπλές γραμμές κειμένου και άλλα δημιουργήστε
Περιεκτικό εξάωρο πρακτικό μάθημα από τον προγραμματιστή Stephan Haewß
Με αρχεία έργου για την αναπαραγωγή των παρουσιαζόμενων περιεχομένων
Ιδανικό για web developers, web designers και front-end developers

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

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

λεπτομέρειες

Περιεχόμενα: 6 h Σεμινάριο βίντεο
Άδεια: ιδιωτική και εμπορική Δικαιώματα χρήσης
Μπόνους: περιλαμβάνεται υλικό εργασίας

Κατηγορίες

Σχεδιασμός Ιστοσελίδων, CMS & Ανάπτυξη

Δημιουργήθηκε με αγάπη από:

Stephan Haewß

Δημιουργία φόρμας ιστοσελίδας - Εισαγωγή

Δημιουργία φορμών στον ιστό: 1.1 | Εισαγωγή και επισκόπηση

Δωρεάν

Δημιουργία φορμών ιστού: 1.1 | Εισαγωγή και επισκόπηση

Εδώ μπορείς να μάθεις για το τι συμβαίνει στο μάθημα και τι μπορείς να περιμένεις.

Δημιουργία Φορμών Ιστού: 1.2 | HTML-Φόρμες - Για ποιον λόγο και πώς να τις χρησιμοποιήσετε;

Δημιουργία Φορμών Ιστού: 1.2 | Φόρμες HTML - Γιατί και πώς να τις χρησιμοποιήσετε;

Γιατί πρέπει κανείς να χρησιμοποιεί καθόλου φόρμες HTML και πώς γίνεται αυτό γενικά;

Δημιουργία φόρμας στον ιστό: 1.3 | Δημιουργία πρώτου έργου

Δημιουργία φορμών στον ιστό: 1.3 | Δημιουργία πρώτου έργου

Εδώ δημιουργείται το έργο όπου θα ενσωματωθεί η πρώτη φόρμα.

Δημιουργία ιστοσελίδων: 1.4 | Η πρώτη φόρμα HTML

Δημιουργία διαδικτυακών φορμών: 1.4 | Την πρώτη φόρμα HTML

Δημιουργείς την πρώτη σου απλή φόρμα και μαθαίνεις την βασική δομή.

Έντυπα

Δημιουργία Φορμών Ιστοσελίδων: 2.1 | Γιατί να χρησιμοποιήσουμε φόρμες ή το στοιχείο <form>;

Δημιουργία φορμών στον ιστό: 2.1 | Γιατί να χρησιμοποιούμε φόρμες ή την ετικέτα <form>;

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

Λήψη αρχείου έργου

Δημιουργία φορμών στον ιστό: 2.2 | Ανάγνωση δεδομένων φόρμας με JavaScript

Δημιουργία web forms: 2.2 | Ανάγνωση δεδομένων φόρμας με JavaScript

Μαθαίνεις πώς να διαβάζεις και να επεξεργάζεσαι τα δεδομένα που εισάγουν οι χρήστες με το JavaScript.

Δημιουργία φορμών ιστού: 2.3 | Κοσμοποίηση φόρμας και περισσότεροι τύποι εισόδου

Δημιουργία φορμών στον ιστό: 2.3 | Ομορφαίνοντας τη φόρμα και άλλοι τύποι εισαγωγής

Θα αναφερθώ στις δυνατότητες σχεδίασης φόρμας και θα σου παρουσιάσω διαφορετικά πεδία εισόδου.

Έλεγχος εισόδου και διαχείριση συμβάντων για φόρμες

Δημιουργία φορμών στο διαδίκτυο: 3.1 | Πρώτη επικύρωση με εισαγωγή ηλεκτρονικού ταχυδρομείου

Δημιουργία φόρμας στον ιστό: 3.1 | Πρώτος έλεγχος με είσοδο ηλεκτρονικού ταχυδρομείου

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

Δημιουργία φορμών στο διαδίκτυο: 3.2 | Τύπος εισόδου αριθμός και χαρακτηριστικά

Δημιουργία φορμών στον ιστό: 3.2 | Τύπος εισόδου αριθμού και Χαρακτηριστικά

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

Δημιουργία φορμών στον ιστό: 3.3 | Αντίδραση σε αλλαγές στο στοιχείο εισόδου

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

Δημιουργία διαδικτυακών φορμών: 3.4 | Αντιδράστε σε αλλαγές με τη χρήση της addEventListener

Δημιουργία φόρμας στον ιστό: 3.4 | Αντιδράστε σε αλλαγές με τη μέθοδο addEventListener

Εμβαθύνουμε στο θέμα της επεξεργασίας συμβάντων και χρησιμοποιούμε τη μέθοδο addEventListener για πιο ευέλικτες αντιδράσεις.

Δημιουργία φόρμας στον ιστό: 3.5 | Επισκόπηση: Το στοιχείο εισόδου

Δημιουργία φορμών στο διαδίκτυο: 3.5 | Επισκόπηση: Το στοιχείο εισαγωγής

Ένας εκτενής συνοπτικός περιγραφέας των διαφόρων τύπων input- και των ιδιοτήτων τους.

Δημιουργία διαδικτυακών φόρμων: 3.6 | Attributes: ανεπίσημο, απενεργοποιημένο, placeholder, ελάχιστο μήκος, μέγιστο μήκος

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

Δημιουργία φορμών στον ιστό: 3.7 | Χαρακτηριστικά: πρότυπο και υποχρεωτικό

Δημιουργία φόρμας στον ιστό: 3.7 | Χαρακτηριστικά: πρότυπο και υποχρεωτικό

Μαθαίνεις πώς να εκτελείς πολύπλοκους ελέγχους χρησιμοποιώντας τις τακτικές εκφράσεις και το γνωρίσμα required-.

Δημιουργία φόρμας στον ιστό: 3.8 | Το spellcheck-Χαρακτηριστικό

Δημιουργία φορμών στον ιστό: 3.8 | Το γνώρισμα spellcheck-

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

Δημιουργία φορμών στον ιστό: 3.9 | Τύπος εισόδου password

Δημιουργία φόρμας στον ιστό: 3.9 | Τύπος εισόδου κωδικού (password)

Μάθε πώς να δημιουργήσεις πεδία κωδικού πρόσβασης.

Κουτάκια επιλογής

Δημιουργία δικτυακών φορμών: 4.1 | Checkbox - Βασικές έννοιες

Δημιουργία ιστοσελιδιακύν τύπου: 4.1 | Κουτί ελέγχου - Θεμέλια

Ξεκινάμε με τις βασικές αρχές των κουτιών ελέγχου και των δυνατοτήτων χρήσης τους.

Δημιουργία φορμών στον ιστό: 4.2 | Χρησιμοποίηση Checkbox σε JS

Δημιουργία φορμών στον ιστό: 4.2 | Χρήση checkbox στην JS

Μαθαίνεις πώς να διαβάζεις και να θέτεις την κατάσταση των κουτιών ελέγχου με το JavaScript.

Δημιουργία φορμών στον ιστό: 4.3 | Σχεδιασμός κουτιού ελέγχου

Δημιουργία φόρμας ιστοσελίδας: 4.3 | Σχεδιασμός κουτιού επιλογής

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

Τύποι εισαγωγής φορμακιού και προχωρημένα πεδία

Δημιουργία φορμών στον ιστό: 5.1 | Κουμπιά επιλογής (Radiobuttons)

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

Δημιουργία web φόρμας: 5.2 | Μεταφόρτωση αρχείου

Δημιουργία φόρμας στον ιστό: 5.2 | Μεταφόρτωση αρχείων

Μαθαίνεις πώς να επιτρέπεις στους χρήστες να ανεβάζουν αρχεία.

Δημιουργία διαδικτυακών φορμών: 5.3 | Εισαγωγή αρχείων με JS

Δημιουργία φορμών στο διαδίκτυο: 5.3 | Είσοδος αρχείου με JS

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

Δημιουργία φόρμας στον ιστό: 5.4 | Κρυμμένα πεδία εισόδου

Δημιουργία φορμών στον ιστό: 5.4 | Κρυμμένα πεδία εισόδου

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

Δημιουργία φορμών στο διαδίκτυο: 5.5 | Εισαγωγή αριθμών

Δημιουργία φόρμας στον ιστό: 5.5 | Εισαγωγή αριθμών

Συγκεντρώνουμε τις διάφορες επιλογές εισαγωγής αριθμών.

Δημιουργία φορμών στο Διαδίκτυο: 5.6 | Ρυθμιζόμενος Μοχλός

Δημιουργία ηλεκτρονικών φορμών: 5.6 | Ρυθμιζόμενος διακόσμησης βάθους

Μαθαίνεις πώς να επιτρέπεις στον χρήστη να επιλέγει ένα συγκεκριμένο εύρος τιμών με τους range sliders και πώς μπορείς να υλοποιήσεις έναν slider.

Δημιουργία φορμών στο web: 5.7 | Εισαγωγή ημερομηνίας και ώρας

Δημιουργία φορμών στο διαδίκτυο: 5.7 | Εισαγωγή ημερομηνιών και ώρας

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

Δημιουργία φόρμας στον ιστό: 5.8 | Ηλεκτρονικό ταχυδρομείο και URL

Δημιουργία φόρμας ιστοσελίδας: 5.8 | Ηλεκτρονικό ταχυδρομείο και URL

Επικεντρωνόμαστε στα ειδικά πεδία εισόδου για διευθύνσεις email και URLs.

Δημιουργία φορμών στον ιστό: 5.9 | Χρώμα

Δημιουργία Φορμών Ιστοσελίδων: 5.9 | Χρώμα

Μαθαίνεις πώς να επιτρέπεις στους χρήστες να επιλέγουν χρώματα μέσω πεδίου επιλογής χρώματος.

Δημιουργία διαδικτυακών φορμών: 5.10 | Οι τύποι search και tel

Δημιουργία web forms: 5.10 | Οι τύποι search και tel

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

Δημιουργία φορμών στον ιστό: 5.11 | Εισαγωγή πολλαπλών γραμμών με textarea

Δημιουργία φόρμας στον ιστό: 5.11 | Εισαγωγή πολλαπλών γραμμών με textarea

Θα μάθεις πώς να υλοποιήσεις πολλαπλές γραμμές κειμένου χρησιμοποιώντας το στοιχείο textarea-.

Δημιουργία φορμών στον ιστό: 5.12 | Λίστες με επιλογή

Δημιουργία φόρμας στον ιστό: 5.12 | Λίστες με επιλογή

Εξηγώ πώς να δημιουργήσεις επιλέξιμες λίστες με το στοιχείο select-.

Επεκτεινμένη δομή φόρμας και επικύρωση με JavaScript και πλαίσια

Δημιουργία φορμαρίσματος στον ιστό: 6.1 | Ομαδοποίηση των επιλογών

Δημιουργία φορμών στον ιστό: 6.1 | Ομαδοποίηση των επιλογών

Μαθαίνεις πώς μπορείς να ομαδοποιήσεις τις επιλογές σε μια λίστα επιλογών.

Δημιουργία φόρμας στο διαδίκτυο: 6.2 | Λίστες προτάσεων με datalist

Δημιουργία φορμών στον ιστό: 6.2 | Λίστες προτάσεων με τη χρήση datalist

Θα σου δείξω πώς να δημιουργήσεις λίστες προτάσεων για τα πεδία εισόδου.

Δημιουργία φορμών ιστού: 6.3 | Το χαρακτηριστικό συμπλήρωσης αυτόματων πλαισίων

Δημιουργία φορμών στον ιστό: 6.3 | Το χαρακτηριστικό αυτόματης συμπλήρωσης

Μαθαίνεις πώς να ενεργοποιήσεις την αυτόματη συμπλήρωση εισόδων.

Δημιουργία φορμών ιστοσελίδας: 6.4 | Τμήματα φόρμας με fieldsets

Δημιουργία φορμών στον ιστό: 6.4 | Τμήματα φόρμας με Fieldsets

Εξηγώ πώς να δομήσεις την φόρμα σου με στοιχεία πεδίου fieldset.

Δημιουργία φορμών στον ιστό: 6.5 | Επικύρωση μέσω JavaScript

Δημιουργία φορμών ιστοσελίδας: 6.5 | Επικύρωση μέσω JavaScript

Μια εκτενής εισαγωγή στον πελατηκό έλεγχο φόρμας με JavaScript.

Δημιουργία φόρμας ιστοσελίδας: 6.6 | Εξυπηρέτηση στην πλευρά του διακομιστή με Node.JS και Express

Δημιουργία φορμών στον ιστό: 6.6 | Εξυπηρέτηση στον διακομιστή με το Node.JS και το Express

Θα σου δείξω πώς να λαμβάνεις τα δεδομένα φόρμας που έχουν σταλεί στον διακομιστή χρησιμοποιώντας το Node.js και το Express .

Λήψη αρχείου έργου

Δημιουργία web forms: 6.7 | Λήψη δεδομένων φόρμας με GET handler

Δημιουργία Φορμών Ιστοσελίδας: 6.7 | Λήψη δεδομένων φόρμας με GET handler

Μαθαίνεις πώς να λαμβάνεις δεδομένα φόρμας με τη μέθοδο GET.

Δημιουργία φορμών ιστοσελίδων: Λήψη δεδομένων φόρμας με χειριστή POST

Δημιουργία φορμών στον ιστό: 6.8 | Λήψη δεδομένων φόρμας με POST-χειριστή

Εξηγώ πώς λαμβάνεις δεδομένα φόρμας χρησιμοποιώντας τη μέθοδο POST.

Δημιουργία φορμών στον ιστό: 6.9 | Δημιουργία φορμών και στοιχείων φόρμας σε React - Δημιουργία έργου

Δημιουργία δικτυακών φορμών: 6.9 | Δημιουργία φόρμας και στοιχείων φόρμας σε React - Δημιουργία έργου

Ξεκινάμε τη δημιουργία ενός έργου React και την ενσωμάτωση φορμών.

Λήψη αρχείου έργου

Δημιουργία φορμών στον ιστό: 6.10 | Στοιχεία εισόδου στο React

Μαθαίνεις πώς να χρησιμοποιείς διάφορα στοιχεία εισόδου στο React.

Δημιουργία φορμών στον ιστό: 6.11 | Στοιχεία επιλογής και πεδίου κειμένου στο React

Δημιουργία φορμών στον ιστό: 6.11 | Στοιχεία επιλογής και πεδίου κειμένου (textarea) στο React

Ασχολούμαστε με τα στοιχεία select- και textarea- στο React.

Δημιουργία Φόρμας στον Ιστό: 6.12 | Φόρμες με Alpine.js

Δημιουργία φορμών στον ιστό: 6.12 | Φόρμες με Alpine.js

Θα σου δείξω πώς να χειρίζεσαι φόρμες με το πλαίσιο εργασίας JavaScript Alpine.js.

Λήψη αρχείου έργου

Δημιουργία φορμών στον ιστό: 6.13 | Φόρμες με VueJs

Θα εξηγήσω πώς να ενσωματώσεις φόρμες σε εφαρμογές Vue.js.

Λήψη αρχείου έργου

Λεπτομέρειες περιεχομένου

Φόρμες Ιστού και τα πεδία εισόδου τους – Εξηγούνται βήμα προς βήμα
Θέλεις να επεκτείνεις τις γνώσεις σου στη δημιουργία Φορμών Ιστού; Με αυτό το εγχειρίδιο, θα μάθεις πως να δημιουργήσεις λειτουργικές φόρμες με HTML, JavaScript, καθώς επίσης και με server-side scripts και βιβλιοθήκες. Είτε πρόκειται για απλή συλλογή ονομάτων και email είτε για πολύπλοκη φόρμα επικοινωνίας – μετά από αυτό το μάθημα θα είσαι σε θέση να προγραμματίσεις τις δικές σου φόρμες ιστού με τα απαραίτητα πεδία εισόδου και να τις ενσωματώσεις στις ιστοσελίδες σου.
Το video tutorial διάρκειας άνω των έξι ωρών από τον προγραμματιστή λογισμικού και μάθηματα Stephan Haewß απευθύνεται σε όλους όσους θέλουν να δημιουργήσουν φόρμες ιστού, σε προγραμματιστές που χρησιμοποιούν φόρμες σε JS-UI frameworks, και σε web developers που θέλουν να παίρνουν είσοδο από τους χρήστες χωρίς πολύ JavaScript. Ιδανικό για web developers, web designers, front end developers, για αρχάριους και προχωρημένους – και είναι εύκολο να κατανοηθεί από κάποιον με βασικές γνώσεις HTML.

Βασικές αρχές HTML για φόρμες στις ιστοσελίδες σου

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

Δυναμικές φόρμες ιστού, επεξεργασία στον server & φόρμες σε σύγχρονα πλαίσια JavaScript

Η αλληλεπίδραση με τα στοιχεία των φορμών μπορεί να ελεγχθεί με στόχο να δημιουργηθεί μια δυναμική και χρήστη-φιλική εμπειρία. Έτσι μπορούν να διαβαστούν, να επεξεργαστούν και να επικυρωθούν αυτόματα οι εισόδοι. Μέσω ελέγχου εισόδου στον client μπορούν να ανιχνευτούν αμέσως λανθασμένα ή μη πλήρη δεδομένα από τον χρήστη πριν αποσταλούν στον server. Αυτό βελτιώνει την ποιότητα δεδομένων και μειώνει τις πιθανές πηγές σφαλμάτων. Ένας άλλος σημαντικός παράγοντας είναι η δυναμική προσαρμογή των φορμών στις εισόδους και αλληλεπιδράσεις των χρηστών. Όλα αυτά τα θέματα συζητούνται στο video tutorial.

Επιπλέον, θα ασχοληθείς με την αποστολή και λήψη δεδομένων φόρμας στον server καθώς και την επεξεργασία στην πλευρά του server μέσω του Node.js και του Express. Επιπλέον, θα εξετάσεις τη χρήση φορμών ιστού σε σύγχρονα πλαίσια JavaScript, όπως η ενσωμάτωση φορμών σε εφαρμογές React και τη δημιουργία αντίδρασης φορμών με React-Hooks και στοιχεία. Απέκτησε σημαντικές συμβουλές για τη σχεδίαση φορμών και στοιχείων φόρμας καθώς και για την ασφάλεια των δεδομένων.

Αυτό που θα μάθεις σε αυτό το πρακτικό εγχειρίδιο

Χρησιμοποίησε το μάθημα για να αποκτήσεις εκτενείς γνώσεις στη δημιουργία HTML φορμών. Μάθε τα διαφορετικά πεδία εισόδου και τα ξεχωριστά χαρακτηριστικά τους. Μάθε πώς να ελέγχεις τα στοιχεία φόρμας με JavaScript και πώς να εφαρμόζεις τα attributes και τις επικυρώσεις. Δες επίσης πώς να ενσωματώνεις φόρμες σε σύγχρονα πλαίσια JavaScript όπως React, VueJs και AlpineJs.