Μικρό πράγμα από html. Δημιουργία φορμών HTML

3. Δημιουργήστε πεδία φόρμας

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

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

4. Πεδία εισαγωγής κειμένου

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

Γάτα

7. Κουμπιά

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

Για να εμφανίσετε σωστά το στοιχείο

διαφορετικά προγράμματα περιήγησηςπρέπει να καθορίσετε το χαρακτηριστικό type, για παράδειγμα, .

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

8. Πλαίσια ελέγχου και κουμπιά επιλογής σε φόρμες

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

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

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

Περιγραφή

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

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

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

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

Γνωρίσματα

Η προεπιλεγμένη τιμή είναι η δεσμευμένη συμβολοσειρά "UNKNOWN" (τα προγράμματα περιήγησης ερμηνεύουν αυτήν την τιμή ως χαρακτήρα που κωδικοποιεί πανομοιότυπο με αυτόν του εγγράφου που περιέχει το στοιχείο ).

• ενέργεια: Υποδεικνύει τη διεύθυνση αποστολής δεδομένων από τη συμπληρωμένη φόρμα, όπου θα γίνει επεξεργασία αυτών των πληροφοριών.αυτόματη συμπλήρωση: Καθορίζει εάν θα ενεργοποιηθεί ή θα απενεργοποιηθεί η αυτόματη συμπλήρωση φόρμας. Όταν είναι ενεργοποιημένη η αυτόματη συμπλήρωση, το πρόγραμμα περιήγησης συμπληρώνει αυτόματα τις τιμές που εισήγαγε ο χρήστης την προηγούμενη φορά που χρησιμοποίησε τη φόρμα. Πιθανές τιμές χαρακτηριστικών:
• επί:το πρόγραμμα περιήγησης εμφανίζει αυτόματα τις τιμές που εισήγαγε προηγουμένως ο χρήστης (προεπιλεγμένη τιμή).

μακριά από:

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

• Σημείωση: Το χαρακτηριστικό αυτόματης συμπλήρωσης δεν υποστηρίζεται από το πρόγραμμα περιήγησης Opera. Enctype: Καθορίζει τον τρόπο με τον οποίο κωδικοποιούνται τα δεδομένα της φόρμας όταν υποβάλλονται στον διακομιστή. Μπορεί να χρησιμοποιηθεί μόνο σε συνδυασμό με το χαρακτηριστικό method="post". Πιθανές τιμές:
• application/x-www-form-urlencoded:προεπιλογή: όλοι οι χαρακτήρες κωδικοποιούνται πριν από την αποστολή (τα κενά μετατρέπονται σε χαρακτήρες "+" και οι ειδικοί χαρακτήρες μετατρέπονται σε τιμές ASCII HEX). πολυμερή/μορφή-δεδομένα:
• οι χαρακτήρες δεν είναι κωδικοποιημένοι. Χρησιμοποιείται για στοιχεία, του οποίου το χαρακτηριστικό type έχει οριστεί σε "file".

• Τα κενά διαστήματα μετατρέπονται στον χαρακτήρα "+", αλλά δεν κωδικοποιούν ειδικούς χαρακτήρες, όπως απόστροφους, σε δεκαεξαδικές τιμές.μέθοδος: Καθορίζει τη μέθοδο μεταφοράς δεδομένων HTTP που θα χρησιμοποιηθεί κατά την υποβολή δεδομένων φόρμας. Πιθανές τιμές: παίρνω:Τα δεδομένα μεταβιβάζονται στη γραμμή διευθύνσεων του προγράμματος περιήγησης ως ζεύγη όνομα=τιμή προσαρτώντας τα στο τέλος της διεύθυνσης URL. Ένα ερωτηματικό (?) χρησιμοποιείται ως διαχωριστικό μεταξύ της κύριας διεύθυνσης URL και των μεταδιδόμενων δεδομένων, και ένας χαρακτήρας συμπλεκτών (&) χρησιμοποιείται για τον διαχωρισμό των μεταδιδόμενων δεδομένων μεταξύ τους.
• Αυτή η μέθοδοςχρησιμοποιείται κατά την αποστολή μικρών δεδομένων.

name: Καθορίζει το όνομα της φόρμας. Το όνομα μπορεί να χρησιμοποιηθεί σε JavaScript για αναφορά σε ένα στοιχείο με όνομα ή για αναφορά σε δεδομένα φόρμας μετά την υποβολή του. Εάν χρησιμοποιούνται πολλές φόρμες σε ένα έγγραφο, τότε τα ονόματά τους δεν πρέπει να επαναλαμβάνονται και δεν πρέπει να μείνει μια κενή συμβολοσειρά ως τιμή χαρακτηριστικού. novalidate: Υποδεικνύει ότι τα δεδομένα που εισάγονται στη φόρμα δεν θα επικυρωθούν πριν από την υποβολή. Πιθανές τιμές για το χαρακτηριστικό novalidate boolean:Σημείωση: το χαρακτηριστικό novalidate δεν υποστηρίζεται σε IE9 και μεταγενέστερα

προηγούμενες εκδόσεις , και στο Safari. Target: Καθορίζει το όνομα του πλαισίου ή

• λέξη-κλειδί, το οποίο καθορίζει πού θα εμφανίζεται η απάντηση που λαμβάνεται μετά την υποβολή της φόρμας.
• _κενό:ανοίγει το έγγραφο σε νέο παράθυρο ή καρτέλα.
• _εαυτός:ανοίγει ένα έγγραφο στον ίδιο κατάλογο όπου βρίσκεται ο σύνδεσμος (προεπιλεγμένη τιμή).
• _μητρική εταιρεία:ανοίγει το έγγραφο στο γονικό πλαίσιο.
• _κορυφή:ανοίγει το έγγραφο σε όλο το πλάτος του παραθύρου.

frame_name: ανοίγει ένα έγγραφο σε ένα iframe του οποίου το όνομα καθορίστηκε ως τιμή.

Ετικέτα

Προεπιλεγμένο στυλ

Περιγραφή

frame_name:

Γνωρίσματα

Η διεύθυνση του προγράμματος ή του εγγράφου που επεξεργάζεται τα δεδομένα της φόρμας.

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

Η μέθοδος για την κωδικοποίηση δεδομένων φόρμας.

Πώς νομίζετε ότι σημαίνει η συντομογραφία "OS"; α1Αξιωματικοί

α2

λειτουργικό σύστημα

α3

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

Στοιχείο

Και με τη σειρά, τι κάναμε σε αυτό το παράδειγμα:

• Δημοσιεύτηκε δυοπεδία κειμένου μονής γραμμής ( ) για να εισάγει ο χρήστης το όνομα και το επώνυμό του. Εκχώρησε μοναδικά ονόματα σε αυτά τα πεδία χρησιμοποιώντας το χαρακτηριστικό name ( για σωστή μετάδοση και επεξεργασία της φόρμας, φροντίστε να υποδείξετε για κάθε στοιχείο αυτό το χαρακτηριστικό). Επιπλέον, το χαρακτηριστικό value ορίστηκε στις προεπιλεγμένες τιμές για αυτά τα πεδία (κατά τη συμπλήρωση των πεδίων, η τιμή αυτού του χαρακτηριστικού θα αντιστοιχεί στην είσοδο του χρήστη).
• Δημοσιεύτηκε δυοκουμπιά επιλογής ( ) για να επιλέξετε μία από έναν περιορισμένο αριθμό επιλογών. Λάβετε υπόψη ότι για τα κουμπιά επιλογής πρέπει να καθοριστεί το ίδιο όνομαώστε να μπορείτε να επιλέξετε μόνο μία επιλογή από αυτές που προσφέρονται.
Για πρώτακουμπιά επιλογής καθορίσαμε το χαρακτηριστικό

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

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

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

Για να καλύψει αυτές τις ανάγκες, η HTML προσφέρει διαδραστική ελέγχουςμορφές:

• πεδία κειμένου (για μία ή περισσότερες γραμμές).
• διακόπτες?
• πλαίσια ελέγχου?
• αναπτυσσόμενες λίστες·
• widgets για λήψη.
• κουμπιά υποβολής.

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

Στοιχείο

είναι ένα στοιχείο μπλοκ που ορίζει αλληλεπιδραστικόςμέρος μιας ιστοσελίδας. Ως αποτέλεσμα, όλα τα στοιχεία ελέγχου (όπως π , ή <button>) πρέπει να είναι <i>μέσα</i>στοιχείο <form> .</p><p>Δύο χαρακτηριστικά HTML <b>απαραίτητος</b>:</p><ul><li>Η ενέργεια περιέχει μια διεύθυνση που καθορίζει <i>Οπου</i>θα σταλούν πληροφορίες φόρμας.</li><li>Η μέθοδος μπορεί να είναι είτε GET είτε POST και καθορίζει εάν <i>Πως</i>Οι πληροφορίες της φόρμας θα σταλούν.</li> </ul><p>Συνήθως, οι πληροφορίες της φόρμας αποστέλλονται στο <b>υπηρέτης</b>. <i>Πως</i>Στη συνέχεια, αυτά τα δεδομένα θα υποβληθούν σε επεξεργασία πέρα ​​από το πεδίο εφαρμογής αυτού του εγχειριδίου.</p><p>Σκεφτείτε μια φόρμα ως μια συλλογή στοιχείων ελέγχου που συνεργάζονται για την ολοκλήρωση <b>ένας</b>λειτουργία. Εάν γράψατε μια φόρμα σύνδεσης ιστότοπου, μπορεί να έχετε <b>τρία</b>πεδία:</p><ul><li>πεδίο ηλεκτρονικού ταχυδρομείου <input type="email"> </li><li>πεδίο κωδικού πρόσβασης <input type="password"> </li><li>κουμπί υποβολής <input type="submit"> </li> </ul><p>Αυτά τα τρία <a href="https://rembitpro.ru/el/wi-fi-setup/css-dvoinaya-ramka-sozdanie-ramok-sredstvami-css-kak-sdelat/">στοιχείο HTML</a>θα περιέχονται σε μία φόρμα <span><form action="/login" method="POST"> </span>.</p><p>Μπορείτε παρομοίως να προσθέσετε μια φόρμα εγγραφής στην ίδια σελίδα HTML, σε ξεχωριστό στοιχείο <form> .</p><h2>Πεδία κειμένου</h2><p>Σχεδόν όλες οι μορφές απαιτούν <b>κείμενο</b>εισαγωγή από χρήστες για να εισαγάγουν το όνομά τους, τη διεύθυνση email, τον κωδικό πρόσβασης, τη διεύθυνση κ.λπ. Τα πεδία κειμένου της φόρμας διατίθενται σε διαφορετικές ποικιλίες.</p><p>Παρόλο που αυτά τα πεδία είναι πολύ παρόμοια και επιτρέπουν στους χρήστες να εισάγουν οποιοδήποτε είδος κειμένου (ακόμη και λανθασμένο), ο τύπος τους παρέχει μια συγκεκριμένη <b>σημασιολογία</b>για εισαγωγή, προσδιορίζοντας ποιες πληροφορίες είναι το πεδίο <b>πρέπει</b>περιέχω.</p><p>Τα προγράμματα περιήγησης ενδέχεται στη συνέχεια να αλλάξουν ελαφρώς τη διεπαφή του στοιχείου ελέγχου για βελτίωση <i>διαδραστικότητα</i>ή προτείνετε ποιο περιεχόμενο αναμένεται.</p><p>Για παράδειγμα, το πεδίο κωδικού πρόσβασης εμφανίζει τελείες αντί για σύμβολα. Και το πεδίο αριθμών σάς επιτρέπει να αυξήσετε/μειώσετε την τιμή χρησιμοποιώντας τα πλήκτρα πάνω και κάτω.</p><h2>κράτησης θέσης</h2><p>Μπορούν να εμφανιστούν πεδία κειμένου <b>υποδηλωτικός</b>κείμενο που θα εξαφανιστεί μόλις εισαχθεί κάποιο κείμενο.</p><p> <input type="text" placeholder="Εισαγάγετε το όνομά σας"> </p><p>Εάν αρχίσετε να πληκτρολογείτε κάτι, θα δείτε το κείμενο "Εισαγάγετε το όνομά σας" να εξαφανίζεται.</p><h2><label></h2><p>Δεδομένου ότι τα ίδια τα στοιχεία της φόρμας δεν είναι πολύ περιγραφικά, συνήθως προηγείται κείμενο. <b>επιγραφή</b>.</p><p> <label>E-mail</label> <input type="email"> </p><p>Ενώ το σύμβολο κράτησης θέσης παρέχει ήδη κάποια υπόδειξη σχετικά με το αναμενόμενο περιεχόμενο, οι ετικέτες έχουν το πλεονέκτημα ότι παραμένουν ορατές ανά πάσα στιγμή και μπορούν να χρησιμοποιηθούν μαζί με άλλους τύπους στοιχείων φόρμας, όπως πλαίσια ελέγχου ή κουμπιά επιλογής.</p><p>Αν και μπορείτε να χρησιμοποιήσετε σύντομες παραγράφους για να περιγράψετε στοιχεία φόρμας, χρησιμοποιώντας <label>είναι σημασιολογικά πιο σωστή γιατί υπάρχουν μόνο σε μορφές. <label>μπορεί επίσης να συσχετιστεί με ένα συγκεκριμένο στοιχείο φόρμας χρησιμοποιώντας το χαρακτηριστικό for που αντιστοιχεί στην τιμή id του πεδίου.</p><p> <label for="first_name">Ονομα</label> <input id="first_name" type="text"> </p><p>Όταν κάνετε κλικ στην ετικέτα, η εστίαση πηγαίνει στο πεδίο κειμένου και τοποθετεί τον κέρσορα μέσα σε αυτό. Μέχρι στιγμής αυτό το πακέτο φαίνεται άχρηστο, αλλά θα είναι χρήσιμο με τα πλαίσια ελέγχου και τους διακόπτες.</p><h2>Πλαίσια ελέγχου</h2><p><b>Πλαίσια ελέγχου</b>- Αυτά είναι στοιχεία φόρμας που έχουν μόνο δύο καταστάσεις: ενεργοποίηση ή απενεργοποίηση. Βασικά επιτρέπουν στο χρήστη να πει "Ναι" ή "Όχι" σε κάτι.</p><p> <input type="checkbox">Θυμήσου με</p><p>Επειδή μπορεί να είναι δύσκολο να κάνετε κλικ σε ένα μικρό πλαίσιο ελέγχου, συνιστάται να τοποθετήσετε το πλαίσιο ελέγχου και την περιγραφή του μέσα <label> .</p><p> <label> <input type="checkbox">Συμφωνώ με τους όρους</label> </p><p>Μπορείτε να κάνετε κλικ στο κείμενο "Συμφωνώ με τους όρους" για να αλλάξετε το πλαίσιο ελέγχου.</p><p>Από προεπιλογή, το πλαίσιο ελέγχου είναι απενεργοποιημένο. Μπορείτε να το επισημάνετε ως ενεργοποιημένο απλά χρησιμοποιώντας το επιλεγμένο χαρακτηριστικό.</p><p> <label> <input type="checkbox" checked>Χρησιμοποιήστε τη διεύθυνση χρέωσής μου</label> </p><h2>Διακόπτες</h2><p>Μπορείτε να παρέχετε στον χρήστη <b>λίστα επιλογών</b>επιλέγεται με διακόπτες.</p><p>Για να λειτουργήσει αυτό το στοιχείο φόρμας, πρέπει ο κώδικας HTML σας <b>ομάδα</b>λίστα των κουμπιών επιλογής μαζί. Αυτό επιτυγχάνεται χρησιμοποιώντας την ίδια τιμή για το χαρακτηριστικό name:</p><p> <label>Συζυγική κατάσταση</label> <label> <input type="radio" name="status">Μονόκλινο</label> <label> <input type="radio" name="status">Παντρεμένος</label> <label> <input type="radio" name="status">Διαζευγμένος</label> <label> <input type="radio" name="status">Χήρος</label> </p><p>Επειδή όλα τα κουμπιά επιλογής χρησιμοποιούν την ίδια τιμή για το χαρακτηριστικό name (σε αυτήν την περίπτωση, την τιμή της κατάστασης ), η επιλογή μιας επιλογής θα αντικαταστήσει όλες τις άλλες. Οι διακόπτες είναι <b>αλληλοαποκλειστικά</b>.</p><h3>Διαφορά μεταξύ κουμπιών επιλογής και πλαισίων ελέγχου</h3><p>Αν και το πλαίσιο ελέγχου υπάρχει <b>μόνος μου</b>, οι διακόπτες μπορούν να εμφανίζονται μόνο στη φόρμα <b>λίστα</b>(που σημαίνει τουλάχιστον δύο επιλογές).</p><p>Επιπλέον, κάνοντας κλικ στο πλαίσιο ελέγχου είναι <b>αυθαίρετος</b>, ενώ επιλέγετε ένα από τα κουμπιά επιλογής είναι <b>επιτακτικός</b>. Αυτός είναι ο λόγος για τον οποίο δεν είναι δυνατό να απενεργοποιήσετε τον διακόπτη εάν επιλέξετε την πλησιέστερη επιλογή. Στο τέλος, επιλέγεται πάντα ένας από τους διακόπτες.</p><h2>Αναπτυσσόμενα μενού</h2><p>Εάν ο αριθμός των επιλογών από τις οποίες μπορείτε να επιλέξετε καταλαμβάνει πολύ χώρο, μπορείτε να χρησιμοποιήσετε τα αναπτυσσόμενα μενού <select> .</p><p>Λειτουργούν παρόμοια με διακόπτες, μόνο η διάταξη είναι διαφορετική.</p><p> <select> <option>Ιανουάριος</option> <option>Φεβρουάριος</option> <option>Πορεία</option> <option>Απρίλιος</option> <option>Μάιος</option> <option>Ιούνιος</option> <option>Ιούλιος</option> <option>Αύγουστος</option> <option>Σεπτέμβριος</option> <option>Οκτώβριος</option> <option>Νοέμβριος</option> <option>Δεκέμβριος</option> </select> </p><h3>Πολλαπλές επιλογές από το αναπτυσσόμενο μενού</h3><p>Εάν προσθέσετε το χαρακτηριστικό πολλαπλών, μπορείτε να παρέχετε τη δυνατότητα επιλογής πολλαπλών επιλογών.</p><p> <label>Τι προγράμματα περιήγησης χρησιμοποιείτε;</label> <select multiple> <option><a href="https://rembitpro.ru/el/internet/pravilnaya-pereustanovka-brauzera-google-chrome-bez-poteri-zakladok-pereustanovka/">Google Chrome</a></option> <option><a href="https://rembitpro.ru/el/data-recovery/ustanovka-plagina-crypto-interface-plugin-dlya-raboty-s-elektronnoi-podpisyu-v/">Internet Explorer</a></option> <option><a href="https://rembitpro.ru/el/wi-fi-setup/ustanovka-plagina-kriptopro-csp-v-brauzere-mozilla-firefox-kripto-pro-ecp/">Mozilla Firefox</a></option> <option>Οπερα</option> <option>Σαφάρι</option> </select> </p><p>Επιλέξτε πολλές επιλογές κρατώντας πατημένο το Ctrl (ή ⌘) και κάνοντας κλικ. Αυτό μπορεί να είναι μια καλή εναλλακτική για τη χρήση πολλαπλών πλαισίων ελέγχου ανά γραμμή.</p><h2>Παράδειγμα: πλήρης φόρμα εγγραφής</h2> <form action="/signup" method="POST"> <p> <label>Εφεση</label> <label> <input type="radio" name="title" value="κ">Mr.</label> <label> <input type="radio" name="title" value="κα">κα.</label> </p> <p> <label>Ονομα</label> <input type="text" name="first_name"> </p> <p> <label>Επώνυμο</label> <input type="text" name="last_name"> </p> <p> <label>E-mail</label> <input type="email" name="email"> </p> <p> <label>Τηλέφωνο</label> <input type="tel" name="phone"> </p> <p> <label>Σύνθημα</label> <input type="password" name="password"> </p> <p> <label>Επιβεβαιώστε τον κωδικό πρόσβασής σας</label> <input type="password" name="password_confirm"> </p> <p> <label>Χώρα</label> <select name="country"> <option>Καναδάς</option> <option>Γαλλία</option> <option>Γερμανία</option> <option>Ιταλία</option> <option>Ιαπωνία</option> <option>Ρωσία</option> <option>Ηνωμένο Βασίλειο</option> <option>ΗΠΑ</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Συμφωνώ με τους όρους χρήσης</label> </p> <p> <button>Μητρώο</button> </p> </form> <p>Άλλα στοιχεία φόρμας είναι επίσης διαθέσιμα, αλλά εξετάσαμε τα πιο χρησιμοποιημένα.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> <div class="clear"></div> <div class="afterpage author_rank"> <div class="social"> <div class="expert-title">Μοιραστείτε αυτό το άρθρο:</div> <div style="float:left" class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetype="big"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> <div class="clear"></div> <div class="related_posts"> <div class="title">Σχετικά άρθρα <span></span></div> <ul> <div class='yarpp-related'> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/cf58ebc7cb08e7f6bdfb5206c801c61a.jpg" alt="Πώς να αναγνωρίσετε τους επισκέπτες του VKontakte - αποκαλύπτοντας ανώνυμους επισκέπτες" title="Πώς να αναγνωρίσετε τους επισκέπτες του VKontakte - αποκαλύπτοντας ανώνυμους επισκέπτες" loading=lazy loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 Απριλίου 2015</div> <a class="replace post_243" href="https://rembitpro.ru/el/windows/est-li-prilozhenie-kotoroe-pokazyvaet-gostei-vkontakte-kak-uznat-gostei/">Πώς να αναγνωρίσετε τους επισκέπτες του VKontakte - αποκαλύπτοντας ανώνυμους επισκέπτες</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/91feda1f12316e7e2bb1d02a927c2f13.jpg" alt="Απαιτήσεις συστήματος Neverwinter Online Απαιτήσεις συστήματος Neverwinter σε απευθείας σύνδεση σε υπολογιστή" title="Απαιτήσεις συστήματος Neverwinter Online Απαιτήσεις συστήματος Neverwinter σε απευθείας σύνδεση σε υπολογιστή" loading=lazy loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 Απριλίου 2015</div> <a class="replace post_243" href="https://rembitpro.ru/el/wi-fi-setup/neverwinter-online-sistemnye-trebovaniya-dlya-igry-sistemnye-trebovaniya-neverwinter/">Απαιτήσεις συστήματος Neverwinter Online Απαιτήσεις συστήματος Neverwinter σε απευθείας σύνδεση σε υπολογιστή</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/8ba7beeb15ae42a9e9bece1c7cd98130.jpg" alt="Στιγμιότυπο οθόνης μιας παραγγελίας στο Aliexpress Πώς να τραβήξετε στιγμιότυπα οθόνης για απόδειξη στο Aliexpress" title="Στιγμιότυπο οθόνης μιας παραγγελίας στο Aliexpress Πώς να τραβήξετε στιγμιότυπα οθόνης για απόδειξη στο Aliexpress" loading=lazy loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 Απριλίου 2015</div> <a class="replace post_243" href="https://rembitpro.ru/el/viruses/skrinshot-chto-eto-takoe-i-kak-sdelat-skrin-skrinshot-zakaza-na/">Στιγμιότυπο οθόνης μιας παραγγελίας στο Aliexpress Πώς να τραβήξετε στιγμιότυπα οθόνης για απόδειξη στο Aliexpress</a> </div> </div> <div class="clear"></div> </li> <li> <div> <div class="top"> <div class="replace post_243"> <div class="img_border"> <span></span> <img src="/uploads/a53360c8487b2ffaf2b34fbf9180eae2.jpg" alt="Πώς να πληρώσετε με ασφάλεια για αγορές στο Aliexpress;" title="Πώς να πληρώσετε με ασφάλεια για αγορές στο Aliexpress;" loading=lazy loading=lazy> </div> </div> </div> <div class="clear"></div> <div class="info"> <div class="date">17 Απριλίου 2015</div> <a class="replace post_243" href="https://rembitpro.ru/el/data-recovery/aliekspress-kak-oplachivat-tovar-kak-bezopasno-platit-za/">Πώς να πληρώσετε με ασφάλεια για αγορές στο Aliexpress;</a> </div> </div> <div class="clear"></div> </li> </div> </ul> </div> <div class="clear"></div> <div class="clear"></div> <div class="bread_wrap" xmlns:v="http://rdf.data-vocabulary.org/#"> </div> <div class="clear"></div> </div> <div class="sidebar col-xs-12 col-md-3 col-lg-3"> <div class="aside nav podrubriki"><div class="first_title"></div><div class="subnavtitle">Τύποι <span></span></div><ul class="subnav"> <li><span class="asideli related-link" data-href="/category/wi-fi-setup/">Ρύθμιση Wi-Fi</span></li> <li><span class="asideli related-link" data-href="/category/windows/">Windows</span></li> <li><span class="asideli related-link" data-href="/category/viruses/">Ιούς</span></li> <li><span class="asideli related-link" data-href="/category/internet/">Internet</span></li> <li><span class="asideli related-link" data-href="/category/programs/">Προγράμματα</span></li> <li><span class="asideli related-link" data-href="/category/repair/">Επισκευή</span></li> </div> <div class="clear"></div> <div class="sidebar_pop_articles"> <div class="title">Δημοφιλή άρθρα <span></span></div> <ul> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i1.wp.com/programmywindows.com/scr/adreader_2m.jpg" alt="Πρόσθετες δυνατότητες του Adobe Acrobat Reader DC" title="Πρόσθετες δυνατότητες του Adobe Acrobat Reader DC" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/programs/adob-utility-dlya-windows-7-dopolnitelnye-vozmozhnosti-adobe-acrobat-reader-dc/" class="replace post_87">Πρόσθετες δυνατότητες του Adobe Acrobat Reader DC</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i1.wp.com/computerologia.ru/wp-content/uploads/2015/05/perejti-v-razdel-nastrojki.png" alt="Πώς να αλλάξετε το όνομα και το επώνυμο στο Odnoklassniki;" title="Πώς να αλλάξετε το όνομα και το επώνυμο στο Odnoklassniki;" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/repair/kak-pomenyat-svoe-imya-v-odnoklassnikah-kak-pomenyat-imya-i-familiyu/" class="replace post_87">Πώς να αλλάξετε το όνομα και το επώνυμο στο Odnoklassniki;</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i1.wp.com/buhgalter911.com/Res/Images/img_2016_07_18_151208.jpg" alt="Τι να κάνετε αν"поле объекта не обнаружено"" title="Τι να κάνετε αν"поле объекта не обнаружено"" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/data-recovery/pole-obekta-ne-obnaruzheno-gruppa-izmenenie-segmenta-chto-delat-esli-pole/" class="replace post_87">Τι να κάνετε εάν το "πεδίο αντικειμένου δεν εντοπίστηκε"</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i2.wp.com/habrastorage.org/storage2/53f/798/b27/53f798b27ebe5c2040d2e12a9f6d9a32.png" alt="Πώς να το χρησιμοποιήσετε στην επιχείρηση και γιατί είναι δωρεάν;" title="Πώς να το χρησιμοποιήσετε στην επιχείρηση και γιατί είναι δωρεάν;" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/data-recovery/bitriks24-chto-eto-takoe-kak-ispolzovat-v-biznese-i-pochemu/" class="replace post_87">Πώς να το χρησιμοποιήσετε στην επιχείρηση και γιατί είναι δωρεάν;</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i1.wp.com/artemvm.info/images/articles/thumbs/image__0036-012-1cv8-bystryi-poisk-v-1c82-i-1c83.jpg" alt="Αναζήτηση πλήρους κειμένου Ξεκινήστε τη δημιουργία ευρετηρίου αναζήτησης πλήρους κειμένου σε 1c" title="Αναζήτηση πλήρους κειμένου Ξεκινήστε τη δημιουργία ευρετηρίου αναζήτησης πλήρους κειμένου σε 1c" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/data-recovery/polnotekstovyi-poisk-i-ego-vozmozhnosti-polnotekstovyi-poisk/" class="replace post_87">Αναζήτηση πλήρους κειμένου Ξεκινήστε τη δημιουργία ευρετηρίου αναζήτησης πλήρους κειμένου σε 1c</a> </div> </div> <div class="clear"></div> </li> <li> <div class="replace post_87"> <div class="top"> <div class="img_border"> <span></span> <img src="https://i2.wp.com/vxzone.com/sites/default/files/oldsiteimages/images/stories/conveyance/rp-receipt/zayavlenie-rozisk2.jpg" alt="Πώς να παραλάβετε ένα δέμα στο ταχυδρομείο"Алиэкспресс": пошаговая инструкция и рекомендации Можно ли получать посылку на почте" title="Πώς να παραλάβετε ένα δέμα στο ταχυδρομείο"Алиэкспресс": пошаговая инструкция и рекомендации Можно ли получать посылку на почте" loading=lazy loading=lazy> </div> </div> <div class="info"> <a href="https://rembitpro.ru/el/wi-fi-setup/kak-pravilno-poluchit-posylku-v-pochtovom-otdelenii-kak-na/" class="replace post_87">Πώς να λάβετε ένα δέμα από το Aliexpress στο ταχυδρομείο: βήμα προς βήμα οδηγίες και συστάσεις Είναι δυνατόν να λάβετε ένα δέμα στο ταχυδρομείο;</a> </div> </div> <div class="clear"></div> </li> </ul> <div class="clear"></div> </div> <div class="clear"></div> <div class="sidebar_new_articles"> <div class="title">Νέα άρθρα <span></span></div> <ul> <li> <a href="https://rembitpro.ru/el/repair/posle-ustanovki-avasta-propal-internet-net-soedineniya-s-internetom/" class="replace post_1054">Δεν υπάρχει σύνδεση στο διαδίκτυο μετά την αφαίρεση του ιού</a> <div class="clear"></div> </li> <li> <a href="https://rembitpro.ru/el/internet/chto-takoe-printer-plotter-skaner-mnogofunkcionalnoe-ustroistvo-chto-eto/" class="replace post_1054">Πολυλειτουργική συσκευή - τι είναι;</a> <div class="clear"></div> </li> <li> <a href="https://rembitpro.ru/el/programs/ustanovka-archlinux-ustanovka-i-pervonachalnaya-nastroika-archlinux-ustanovka/" class="replace post_1054">Εγκατάσταση και αρχική διαμόρφωση του ArchLinux</a> <div class="clear"></div> </li> <li> <a href="https://rembitpro.ru/el/viruses/lokalnaya-set-s-pomoshchyu-routera-nastroika-lokalnoi-seti-cherez/" class="replace post_1054">Ρύθμιση τοπικού δικτύου μέσω δρομολογητή</a> <div class="clear"></div> </li> <li> <a href="https://rembitpro.ru/el/internet/skachat-igry-na-android-yaponskie-krossvordy-skachat-yaponskie/" class="replace post_1054">Κατεβάστε τα ιαπωνικά σταυρόλεξα CrossMe για android v</a> <div class="clear"></div> </li> </ul> <div class="clear"></div> </div> <div class="clear"></div> <div class="sidebar_question"> </div><p></p><div class="clear"></div></div> </div> <div class="clear"></div> <div class="section morkovin-antireklama-sidebar Closure"><div id="smartrotator_ad_1610"></div></div> </div> <div class="clear"></div> <div class="clear"></div> </div> </div> <div class="clear"></div> <footer class="footer"> <div class="kartasajta"><a href="https://rembitpro.ru/el/sitemap.xml">Χάρτης τοποθεσίας</a></div> <div class="top_footer"> <div class="inner"> <div class="footer_col col-xs-6 col-sm-4 col-md-4"> <span data-href="/" class="related-link logo"> <div class="logo_text1"><img src="/images/logo.svg" loading=lazy loading=lazy></div> </span> <div class="clear"></div> <p class="copyright">© 2024 rembitpro.ru - Ρύθμιση και επισκευή εξοπλισμού υπολογιστών <br /> <span></span> </p> </div> <div class="footer_col col-xs-12 col-sm-2 col-md-2"> <p class="foot_cat_title">Αλλος</p> <ul class="categories"> <li><span class="related-link" data-href="">Σχετικά με τον ιστότοπο</span></li> <li><span class="related-link" data-href="">Διαφήμιση</span></li> <li><span class="related-link" data-href="/feedback/">Επαφές</span></li> </ul> </div> <div class="footer_col col-xs-6 col-sm-2 col-md-2 rubric_col"> <p class="foot_cat_title">Κατηγορίες</p> <ul id="nav" class="categories"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/wi-fi-setup/">Ρύθμιση Wi-Fi</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/windows/">Windows</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/viruses/">Ιούς</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/internet/">Internet</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/programs/">Προγράμματα</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rembitpro.ru/el/category/repair/">Επισκευή</a></li> </ul> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> </footer> <div id="toTop"></div> <script type="text/javascript" src="https://rembitpro.ru/wp-content/plugins/service_binet/ajax.js"></script><button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu"> <span class="responsive-menu-box"> <span class="responsive-menu-inner"></span> </span> </button><div id="responsive-menu-container" class="slide-left" style="padding:20px;"> <ul> <li><a style="color:white;" href="https://rembitpro.ru/el/category/wi-fi-setup/">Ρύθμιση Wi-Fi</a></li> <li><a style="color:white;" href="https://rembitpro.ru/el/category/windows/">Windows</a></li> <li><a style="color:white;" href="https://rembitpro.ru/el/category/viruses/">Ιούς</a></li> <li><a style="color:white;" href="https://rembitpro.ru/el/category/internet/">Internet</a></li> <li><a style="color:white;" href="https://rembitpro.ru/el/category/programs/">Προγράμματα</a></li> <li><a style="color:white;" href="https://rembitpro.ru/el/category/repair/">Επισκευή</a></li> </ul> </div> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript' src='https://rembitpro.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript'> /* <![CDATA[ */ var JQLBSettings = { "fitToScreen":"1","resizeSpeed":"400","displayDownloadLink":"0","navbarOnTop":"0","loopImages":"","resizeCenter":"","marginSize":"0","linkTarget":"","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/rembitpro.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/next.gif","jqlb_previous_button_image":"http:\/\/rembitpro.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/rembitpro.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"} ; /* ]]> */ </script> <script type='text/javascript' src='https://rembitpro.ru/wp-content/plugins/wp-lightbox-2/wp-lightbox-2.min.js?ver=1.3.4.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://rembitpro.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> <script src="https://rembitpro.ru/wp-content/themes/avada/js/jquery.jshowoff.min.js"></script> <script> (function($){ $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#toTop').fadeIn(100); } else { $('#toTop').fadeOut(100); } } ); $('#toTop').click(function() { $('body,html').animate({ scrollTop:0} ,400); } ); $('.navbar-toggle').click(function(e){ e.preventDefault(); $('#navbar').show(500); $('.wrapper, footer, body, .mobile_search').addClass('righted'); $('.navbar-toggle').fadeOut(500); } ); $('.mobile_close').click(function(e){ e.preventDefault(); $('#navbar').hide(500); $('.wrapper, footer, body, .mobile_search').removeClass('righted'); $('.navbar-toggle').fadeIn(500); } ); $('#features').jshowoff({ autoPlay: true, hoverPause: false, speed:3000, changeSpeed: 200, links: true, effect: 'fade', controls: false } ); } )(jQuery); </script> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> </html>