Γεια σου, αγαπητέ habrafriend! Σε αυτό το σεμινάριο, θα μάθουμε πώς να δημιουργήσουμε δύο φόρμες HTML5: μια φόρμα σύνδεσης και μια φόρμα εγγραφής. Αυτά τα σχήματα θα αντικατασταθούν μεταξύ τους χρησιμοποιώντας την ψευδο-κλάση CSS3 :target. Θα χρησιμοποιήσουμε CSS3 και μια γραμματοσειρά εικονιδίων. Η ιδέα αυτής της επίδειξης είναι να δείξει στον χρήστη μια φόρμα σύνδεσης και να του παράσχει έναν σύνδεσμο "μετάβαση σε" στη φόρμα εγγραφής.
Σε αυτό το σεμινάριο θα μιλήσω λεπτομερώς για το πώς να δημιουργήσετε ένα εφέ όπως στο Demo 1.

HTML

Εδώ έχουμε χρησιμοποιήσει πολλά κόλπα HTML5. Για παράδειγμα, στοιχείο τύπος=κωδικός πρόσβασηςαποκρύπτει αυτόματα αυτό που πληκτρολογεί ο χρήστης και αντικαθιστά χαρακτήρες με τελείες ή αστερίσκους (ανάλογα με το πρόγραμμα περιήγησης). Στοιχείο τύπος = emailεπιτρέπει στο πρόγραμμα περιήγησης να ελέγξει ότι η μορφή είναι σωστή διευθύνσεις ηλεκτρονικού ταχυδρομείου. Επιπλέον, χρησιμοποιήσαμε την παράμετρο απαιτώ=απαιτείται; προγράμματα περιήγησης που υποστηρίζουν αυτή η παράμετροςδεν θα επιτρέψει στον χρήστη να υποβάλει τη φόρμα μέχρι να συμπληρωθεί το πεδίο, δεν απαιτείται JavaScript εδώ. Παράμετρος αυτόματη συμπλήρωση=ενεργοποίησηθα συμπληρώσει αυτόματα ορισμένα πεδία. Χρησιμοποιήσαμε επίσης εναλλακτικό κείμενο για να καθοδηγήσουμε τον χρήστη κατά τη συμπλήρωση της φόρμας.

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

Το δεύτερο σημείο σχετίζεται με τη χρήση γραμματοσειράς με εικονίδια. Θα χρησιμοποιήσουμε το data-attribute για να εμφανίσουμε τα εικονίδια. Ρύθμιση παραμέτρου data-icon=”icon_character”Με τους κατάλληλους χαρακτήρες στο HTML, χρειάζεται μόνο να εκχωρήσουμε έναν κανόνα στο CSS για το στυλ όλων των εικονιδίων. Μπορείτε να διαβάσετε περισσότερα για αυτήν την τεχνική στον ιστότοπο: 24 τρόποι: Εμφάνιση εικονιδίων με γραμματοσειρές και χαρακτηριστικά δεδομένων.

CSS

Για την καθαρότητα του κώδικα θα παραλείψω βασικές παραμέτρους(html, body, κ.λπ.), αλλά μπορείτε να τα βρείτε σε αρχεία πηγής. Και πάλι, χρησιμοποιώ τεχνικές CSS3 που δεν λειτουργούν σε όλα τα προγράμματα περιήγησης. Ας ξεκινήσουμε λοιπόν!

Σχεδιασμός φορμών με χρήση CSS3

Αρχικά, ας δώσουμε στις φόρμες μας ένα βασικό στυλ.

#subscribe, #login( position: absolute; top: 0px; πλάτος: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); περίγραμμα: 1px solid rgba(147, 184, 189,0,8 εικονοστοιχεία-σκιά: 0px 5px rgba(105, 108, 109, 0,7), 0px 8px rgba(208, 223, 226 ;) z-index: 22;

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

/**** κείμενο ****/ #wrapper h1(μέγεθος γραμματοσειράς: 48px; χρώμα: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Προς το παρόν μόνο το webkit υποστηρίζει background-clip:text; **/ #wrapper h1( φόντο: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20 px, rgb(64, 111, 118) 20 px, rgb(64, 111, 118) 40 px, rgb(18, 83, 93) 40 px -webkit-text-fill-color: -webkit-background-clip: text ) #wrapper h1: " "; Εμφάνιση: πλάτος: 2 px: γραμμική κλίση (αριστερά, rgba (147,184,189,0) , rgba (147,184,189,1%). 147,184,189,0,8) 79%, rgba (147,184,189,0) 100%));

Σημειώστε ότι σήμερα μόνο προγράμματα περιήγησης με υποστήριξη webkit φόντο-κλιπ: κείμενο, οπότε θα φτιάξουμε ένα ριγέ φόντο μόνο για το webkit και θα το δέσουμε στην κεφαλίδα H1. Από την παράμετρο φόντο-κλιπ: κείμενολειτουργεί μόνο σε προγράμματα περιήγησης Webkit, αποφάσισα να εργαστώ μόνο με ιδιότητες webkit. Γι' αυτό χώρισα το CSS σε δύο μέρη και χρησιμοποίησα μόνο το webkit gradient. Ωστόσο, δεν πρέπει να χρησιμοποιείτε μόνο webkit στους ιστότοπούς σας! Έτσι, για παράδειγμα, η παράμετρος -webkit-text-fill-color: διαφανέςμας επιτρέπει να έχουμε διάφανο φόντο, αλλά μόνο για προγράμματα περιήγησης webkit, όλα τα άλλα προγράμματα περιήγησης θα αγνοήσουν αυτήν την ιδιότητα.

Δημιουργήσαμε επίσης μια λεπτή γραμμή κάτω από τον τίτλο χρησιμοποιώντας το στοιχείο ψευδο-κλάσης :after. Χρησιμοποιήσαμε μια κλίση με ύψος 2 px και μειώσαμε την αδιαφάνεια στις άκρες στο μηδέν.

Τώρα ας φροντίσουμε τα πεδία εισαγωγής και ας τα κάνουμε να φαίνονται όμορφα.

/**** σύνθετο στυλ εισαγωγής ****/ /* σύμβολο κράτησης θέσης */ ::-webkit-input-placeholder ( χρώμα: rgb(190, 188, 188); στυλ γραμματοσειράς: πλάγια; ) είσοδος:-moz- σύμβολο κράτησης θέσης, περιοχή κειμένου:-moz-placeholder( χρώμα: rgb(190, 188, 188); στυλ γραμματοσειράς: πλάγια; ) εισαγωγή (περίγραμμα: κανένα; )

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

/* όλα τα πεδία εξαιρούν την υποβολή και το πλαίσιο ελέγχου */ #wrapper input:not())(πλάτος: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: border-radius: 3px 1px 0px rgba(168, 168, 0.6) inset: all 0,2s input:not(; εστίαση( περίγραμμα: 1 εικονοστοιχείο συμπαγές rgba(91, 90, 90, 0,7); φόντο: rgba(238, 236, 240, 0,2); πλαίσιο-σκιά: 0 εικονοστοιχεία 1 εικονοστοιχεία 4 εικονοστοιχεία 0 εικονοστοιχεία rgba(168 , 168, 168) σετ.

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

Τώρα ήρθε η ώρα να διασκεδάσουμε: γραμματοσειρά με εικονίδια. Εφόσον δεν μπορούμε να χρησιμοποιήσουμε τις ψευδοκλάσεις :before και :after, θα προσθέσουμε το εικονίδιο στην παράμετρο label και στη συνέχεια θα το τοποθετήσουμε στο πεδίο. Θα χρησιμοποιήσω τη βιβλιοθήκη fontomas. Μπορείτε να αντιστοιχίσετε τα εικονίδια με το αντίστοιχο γράμμα μόνοι σας. Απομνημόνευση χαρακτηριστικού εικονίδιο δεδομένων? Εδώ πρέπει να εισαγάγετε το γράμμα. χρησιμοποίησα data-icon='u'για σύνδεση, 'e' για email, 'p' για κωδικό πρόσβασης. Μόλις επέλεξα τα γράμματα, κατέβασα τη γραμματοσειρά και χρησιμοποίησα τη δημιουργία γραμματοσειρών fontsquirrel για να τη μετατρέψω σε μορφή κατάλληλη για το @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") μορφή ("svg"); βάρος γραμματοσειράς: κανονικό, στυλ γραμματοσειράς: κανονικό; ) /** μαγικό κόλπο! **/ :after ( περιεχόμενο: attr(εικονίδιο δεδομένων); γραμματοσειρά-οικογένεια: "FontomasCustomRegular"; χρώμα: rgb(106, 159, 171); θέση: απόλυτη; αριστερά: 10 px; επάνω: 35 px; πλάτος: 30 px; )

Αυτό είναι όλο. Δεν χρειάζεται να έχετε ξεχωριστή τάξη για κάθε εικονίδιο. Χρησιμοποιήσαμε την παράμετρο περιεχόμενο: attr(εικονίδιο δεδομένων)για να λάβετε το γράμμα από το χαρακτηριστικό data-icon. Έτσι, χρειάζεται μόνο να αντιστοιχίσουμε μια γραμματοσειρά, να επιλέξουμε ένα χρώμα και να τοποθετήσουμε ένα εικονίδιο.

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

/*style και τα δύο κουμπιά*/ #wrapper είσοδος p.button( πλάτος: 30%; δρομέας: δείκτης; φόντο: rgb(61, 157, 179); padding: 8px 5px; γραμματοσειρά οικογένειας: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; χρώμα: #fff; μέγεθος γραμματοσειράς: 24px; περίγραμμα: 1px συμπαγές rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0 , 0, 0,5); (210, 210, 210); κουμπί εισαγωγής: εστίαση( φόντο: rgb(40, 137, 154); θέση: σχετική; επάνω: 1 εικονοστοιχείο; περίγραμμα: 1 εικονοστοιχείο συμπαγές rgb(12, 76, 87); πλαίσιο-σκιά: 0 εικονοστοιχεία 1 εικονοστοιχεία 6 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0 , 0, 0,2) ένθετο; ) p.login.button, p.signin.button(στοίχιση κειμένου: δεξιά, περιθώριο: 5 px 0; )

Το κόλπο είναι να χρησιμοποιήσετε το πλαίσιο-σκιά για να δημιουργήσετε πολλαπλά καρέ. Φυσικά, μπορείτε να χρησιμοποιήσετε μόνο ένα πλαίσιο, αλλά μπορείτε επίσης να χρησιμοποιήσετε πολλά. Θα χρησιμοποιήσουμε την παράμετρο μήκος για να δημιουργήσουμε ένα «ψεύτικο» δεύτερο λευκό περίγραμμα, πλάτους 3 εικονοστοιχείων, χωρίς θάμπωμα.

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

/* στυλ του πλαισίου ελέγχου "Remember me"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . Keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label(πλάτος: 80%; )

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

P.change_link( θέση: απόλυτη; χρώμα: rgb(127, 124, 124); αριστερά: 0 εικονοστοιχεία; ύψος: 20 εικονοστοιχεία; πλάτος: 440 εικονοστοιχεία; συμπλήρωση: 17 εικονοστοιχεία 30 εικονοστοιχεία 20 εικονοστοιχεία 30 εικονοστοιχεία; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; δεξιά border-top: 1px solid rgb(219, 229, 232), border-radius: 0 0 5px 5px background: rgb(225, 234, 235): repeating-linear-gradient; 247. οθόνη: inline-block: bold-background: rgb(248, 241) χρώμα: rgb (29, 162, 193); περίγραμμα: 4 px: rgb (203, 214, 247) 198) #wrapper p.change_link a:active(θέση: σχετική; επάνω: 1px; )

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

Δημιουργία κινούμενων εικόνων

Το πρώτο πράγμα που θα κάνουμε είναι να αποκρύψουμε το δεύτερο σχήμα θέτοντας την αδιαφάνεια σε 0:

#register( z-index: 21; opacity: 0; )

Θυμάστε ότι η φόρμα σύνδεσης έχει δείκτη z: 22; Για τη δεύτερη φόρμα θα εκχωρήσουμε αυτήν την παράμετρο στο 21 για να την βάλουμε "κάτω" από τη φόρμα σύνδεσης.

Τώρα το διασκεδαστικό μέρος: ανταλλάσσουμε τις φόρμες χρησιμοποιώντας την ψευδοκλάση:στόχος. Πρέπει να καταλάβετε ένα πράγμα για το :target: θα χρησιμοποιήσουμε άγκυρες για να το μετακινήσουμε. Η συνήθης συμπεριφορά μιας άγκυρας είναι να μεταβεί σε ένα συγκεκριμένο στοιχείο σελίδας. Αλλά δεν το θέλουμε αυτό, θέλουμε απλώς να ανταλλάξουμε τα σχήματα. Αυτό είναι όπου το κόλπο μας να χρησιμοποιήσουμε δύο συνδέσμους στην κορυφή της σελίδας έρχεται να σώσει. Αντί να μας κατευθύνουν απευθείας στη δεύτερη φόρμα και να ρισκάρουμε το φαινόμενο άλματος, θα δώσουμε στους συνδέσμους μια παράμετρο οθόνη: καμία. Αυτό θα σας βοηθήσει να αποφύγετε το άλμα. Ανακάλυψα αυτό το κόλπο στον ιστότοπο: CSS3 create (γαλλικά).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

Αυτό συμβαίνει: όταν κάνουμε κλικ στο κουμπί Συμμετοχή, κατευθυνόμαστε στο #toreregister. Στη συνέχεια εμφανίζεται το animation και μόνο τότε μεταβαίνουμε στο στοιχείο #register. Χρησιμοποιούμε ένα κινούμενο σχέδιο που ονομάζεται fadeInLeft. Εφόσον «κρύβουμε» το σχήμα χρησιμοποιώντας μηδενική διαφάνεια, θα εφαρμόσουμε ένα κινούμενο σχέδιο που θα εμφανίζεται σταδιακά. Αλλάξαμε επίσης τον δείκτη z έτσι ώστε να εμφανίζεται πάνω από το άλλο σχήμα. Το ίδιο συμβαίνει και με την άλλη μορφή.
Εδώ είναι ο κώδικας για το κινούμενο σχέδιο. Χρησιμοποιήσαμε το πλαίσιο κινούμενων σχεδίων CSS3 από τον Dan Eden και προσαρμόσαμε αυτό το πλαίσιο για το σεμινάριο μας.

Animate( animation-διάρκεια: 0,5s; animation-timing-function: ease; animation-fill-mode: και τα δύο; ) @keyframes fadeInLeft ( 0% ( αδιαφάνεια: 0; μετασχηματισμός: translateX(-20px); ) 100% (αδιαφάνεια : 1 μετασχηματισμός: translateX(0);

Το σχήμα που "εξαφανίζεται" θα έχει ένα fade animation στα αριστερά:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( αδιαφάνεια: 1; μετατροπή: translateX(0); ) 100% ( αδιαφάνεια : 0 μετασχηματισμός: translateX(-20px);

Τώρα μπορείτε να χρησιμοποιήσετε άλλα κινούμενα σχέδια από το αρχείο animate.css του Dan Eden: απλώς αλλάξτε την κλάση .animate και τα ονόματα κινούμενων εικόνων. Θα βρείτε επίσης πολλά άλλα κινούμενα σχέδια στο τέλος του αρχείου animate-custom.css.

Αυτό είναι όλο φίλοι. Ελπίζω να σας άρεσε αυτό το σεμινάριο!

Σημειώστε ότι σε ορισμένα προγράμματα περιήγησης η επιλογή φόντο-κλιπ: κείμενοΔεν υποστηρίζεται. ΣΕ Internet Explorer 9 κινούμενα σχέδια δεν λειτουργούν. Στον Internet Explorer 8 και νεότερη έκδοση, η ψευδοκλάση ψευδοκλάσης:target δεν υποστηρίζεται, επομένως αυτό το εφέ δεν θα λειτουργήσει καθόλου εκεί.

ΥΣΤΕΡΟΓΡΑΦΟ.Θα δεχτώ ευχαρίστως οποιαδήποτε σχόλια σχετικά με τη μετάφραση σε προσωπικό μήνυμα. Ευχαριστώ!

Ετικέτες: Προσθήκη ετικετών

Γειά σου! Τώρα θα προσπαθήσουμε να εφαρμόσουμε τα περισσότερα απλή εγγραφήστον ιστότοπο με χρησιμοποιώντας PHP+ MySQL. Για να γίνει αυτό, το Apache πρέπει να είναι εγκατεστημένο στον υπολογιστή σας. Η αρχή λειτουργίας του σεναρίου μας φαίνεται παρακάτω.

1. Ας ξεκινήσουμε δημιουργώντας τον πίνακα χρηστών στη βάση δεδομένων. Θα περιέχει δεδομένα χρήστη (login και password). Ας πάμε στο phpmyadmin (αν δημιουργείτε μια βάση δεδομένων στον υπολογιστή σας http://localhost/phpmyadmin/). Δημιουργήστε έναν πίνακα χρήστες, θα έχει 3 πεδία.

το δημιουργώ σε βάση δεδομένων mysql, μπορείτε να δημιουργήσετε σε άλλη βάση δεδομένων. Στη συνέχεια, ορίστε τις τιμές όπως στο σχήμα:

2. Απαιτείται σύνδεση σε αυτόν τον πίνακα.Ας δημιουργήσουμε ένα αρχείο bd.php. Το ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ:

$db = mysql_connect("ο διακομιστής σας MySQL", "login for this server","password for this server");
mysql_select_db ("όνομα της βάσης δεδομένων στην οποία συνδέουμε", $db);
?>

Στην περίπτωσή μου μοιάζει με αυτό:

$db = mysql_connect("localhost","user","1234");
mysql_select_db("mysql",$db);
?>

Αποθηκεύσετε bd.php.
Εξαιρετική! Έχουμε έναν πίνακα στη βάση δεδομένων και μια σύνδεση με αυτόν. Τώρα μπορείτε να ξεκινήσετε τη δημιουργία μιας σελίδας στην οποία οι χρήστες θα αφήνουν τα δεδομένα τους.

3. Δημιουργήστε ένα αρχείο reg.php με περιεχόμενο (όλα τα σχόλια μέσα):

Εγγραφή

Η σύνδεσή σας:

Ο κωδικός σας:

4. Δημιουργήστε ένα αρχείο, το οποίο θα εισάγει δεδομένα στη βάση δεδομένων και θα αποθηκεύσει τον χρήστη. save_user.php(σχόλια μέσα):

{
}
//εάν εισαγάγετε τη σύνδεση και τον κωδικό πρόσβασης, τα επεξεργαζόμαστε έτσι ώστε οι ετικέτες και τα σενάρια να μην λειτουργούν, ποτέ δεν ξέρετε τι μπορούν να εισαγάγουν οι χρήστες


//αφαίρεση επιπλέον διαστημάτων
$login = trim($login);
$password = trim($password);
// σύνδεση στη βάση δεδομένων
// ελέγξτε για την ύπαρξη χρήστη με την ίδια σύνδεση
$result = mysql_query("SELECT id FROM users WHERE login="$login"",$db);
if (!empty($myrow["id"])) (
exit("Λυπούμαστε, η σύνδεση που εισαγάγατε είναι ήδη εγγεγραμμένη. Εισαγάγετε άλλη σύνδεση.");
}
// εάν αυτό δεν συμβαίνει, τότε αποθηκεύστε τα δεδομένα
$result2 = mysql_query("INSERT INTO users (login,password) VALUES("$login","$password")");
// Ελέγξτε εάν υπάρχουν σφάλματα
εάν ($result2=="TRUE")
{
echo "Έχετε εγγραφεί με επιτυχία! Τώρα μπορείτε να εισέλθετε στον ιστότοπο. Αρχική σελίδα";
}
αλλού(
echo "Σφάλμα! Δεν είστε εγγεγραμμένος.";
}
?>

5. Τώρα οι χρήστες μας μπορούν να εγγραφούν!Στη συνέχεια, πρέπει να δημιουργήσετε μια «πόρτα» για να μπουν ήδη εγγεγραμμένοι χρήστες στον ιστότοπο. index.php(σχόλια μέσα) :

// όλη η διαδικασία λειτουργεί σε συνεδρίες. Είναι όπου αποθηκεύονται τα δεδομένα του χρήστη ενώ βρίσκεται στον ιστότοπο. Είναι πολύ σημαντικό να τα λανσάρουμε στην αρχή κιόλας της σελίδας!!!
session_start();
?>

Αρχική σελίδα

Η σύνδεσή σας:

Ο κωδικός σας:

Κανω ΕΓΓΡΑΦΗ

// Ελέγξτε εάν οι μεταβλητές σύνδεσης και αναγνωριστικού χρήστη είναι κενές
εάν (κενό($_SESSION["login"]) ή κενό($_SESSION["id"]))
{
// Εάν είναι κενό, τότε δεν εμφανίζουμε τον σύνδεσμο
echo "Έχετε συνδεθεί ως επισκέπτης
Αυτός ο σύνδεσμος είναι διαθέσιμος μόνο σε εγγεγραμμένους χρήστες".
}
αλλού
{

Στο αρχείο index.phpΘα εμφανίσουμε έναν σύνδεσμο που θα είναι ανοιχτός μόνο σε εγγεγραμμένους χρήστες. Αυτό είναι όλο το νόημα του σεναρίου - ο περιορισμός της πρόσβασης σε οποιαδήποτε δεδομένα.

6. Παραμένει ένα αρχείο με επαλήθευση των εισαγόμενων στοιχείων σύνδεσης και κωδικού πρόσβασης. testreg.php (σχόλια μέσα):

session_start();// όλη η διαδικασία λειτουργεί σε συνεδρίες. Είναι όπου αποθηκεύονται τα δεδομένα του χρήστη ενώ βρίσκεται στον ιστότοπο. Είναι πολύ σημαντικό να τα λανσάρουμε στην αρχή κιόλας της σελίδας!!!
if (isset($_POST["login"])) ($login = $_POST["login"]; if ($login == "") ( unset($login);) ) //εισαγάγετε τη σύνδεση που έχει εισαχθεί από ο χρήστης στη μεταβλητή $login, εάν είναι κενή, τότε καταστρέψτε τη μεταβλητή
if (isset($_POST["password"])) ($password=$_POST["password"]; if ($password =="") ( unset($password);) )
//βάλτε τον κωδικό πρόσβασης που εισήγαγε ο χρήστης στη μεταβλητή $password, εάν είναι κενός, τότε καταστρέψτε τη μεταβλητή
εάν (κενό($login) ή κενό($password)) //εάν ο χρήστης δεν έχει εισαγάγει στοιχεία σύνδεσης ή κωδικό πρόσβασης, τότε παρουσιάζουμε ένα σφάλμα και διακόπτουμε το σενάριο
{
exit ("Δεν έχετε εισαγάγει όλες τις πληροφορίες, επιστρέψτε και συμπληρώστε όλα τα πεδία!");
}
//εάν εισαγάγετε τη σύνδεση και τον κωδικό πρόσβασης, τα επεξεργαζόμαστε έτσι ώστε οι ετικέτες και τα σενάρια να μην λειτουργούν, ποτέ δεν ξέρετε τι μπορούν να εισαγάγουν οι χρήστες
$login = stripslashes($login);
$login = htmlspecialchars($login);
$password = stripslashes($password);
$password = htmlspecialchars($password);
//αφαίρεση επιπλέον διαστημάτων
$login = trim($login);
$password = trim($password);
// σύνδεση στη βάση δεδομένων
include("bd.php");// το αρχείο bd.php πρέπει να βρίσκεται στον ίδιο φάκελο με όλα τα άλλα, αν δεν είναι, απλώς αλλάξτε τη διαδρομή

$result = mysql_query("SELECT * FROM users WHERE login="$login"",$db); //ανάκτηση από τη βάση δεδομένων όλων των δεδομένων σχετικά με τον χρήστη με την εισαγόμενη σύνδεση
$myrow = mysql_fetch_array($result);
if (κενό($myrow["password"]))
{
//αν δεν υπάρχει ο χρήστης με τα καταχωρημένα στοιχεία σύνδεσης
}
αλλού(
//αν υπάρχει, τότε ελέγξτε τους κωδικούς πρόσβασης
αν ($myrow["password"]==$password) (
//αν οι κωδικοί πρόσβασης ταιριάζουν, τότε ξεκινάμε μια συνεδρία για τον χρήστη! Μπορείτε να τον συγχαρείτε, μπήκε!
$_SESSION["login"]=$myrow["login"];
$_SESSION["id"]=$myrow["id"];//αυτά τα δεδομένα χρησιμοποιούνται πολύ συχνά, επομένως ο συνδεδεμένος χρήστης θα "τα φέρει μαζί του"
echo "Έχετε μπει με επιτυχία στον ιστότοπο! Αρχική σελίδα";
}
αλλού(
//αν οι κωδικοί πρόσβασης δεν ταιριάζουν

Έξοδος ("Λυπούμαστε, η σύνδεση ή ο κωδικός πρόσβασης που εισαγάγατε είναι λάθος.");
}
}
?>

ΟΚ όλα τελείωσαν τώρα! Το μάθημα μπορεί να είναι βαρετό, αλλά πολύ χρήσιμο. Εδώ εμφανίζεται μόνο η ιδέα της εγγραφής, τότε μπορείτε να τη βελτιώσετε: προσθέστε προστασία, σχεδίαση, πεδία δεδομένων, φόρτωση avatar, αποσύνδεση από τον λογαριασμό (για να το κάνετε αυτό, απλώς καταστρέψτε τις μεταβλητές από τη συνεδρία με τη συνάρτηση απενεργοποίηση) και ούτω καθεξής. Καλή τύχη!

Τα ελεγξα όλα, δουλεύει σωστά!

Οδηγίες

Ξεκινήστε να δημιουργείτε μια φόρμα εγγραφής με μια ετικέτα

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

Ανοιγμα αρχείο htmlκαι αρχίστε να εισάγετε τον κωδικό. Η ετικέτα που είναι υπεύθυνη για τη δημιουργία της φόρμας είναι η "φόρμα". Καταγράφουμε την ετικέτα μαζί με τα χαρακτηριστικά “form action=”obrabotka.php” method=”post” name”forma1””. Ας αρχίσουμε να δημιουργούμε στοιχεία φόρμας. Σχεδόν όλα τα στοιχεία γίνονται χρησιμοποιώντας μια ετικέτα , και το χαρακτηριστικό "type" του, το οποίο είναι υπεύθυνο για τον τύπο των δεδομένων, για παράδειγμα κείμενο, κωδικό πρόσβασης κ.λπ. Πάντα ορίζουμε το όνομα "όνομα" σε οποιοδήποτε από τα χαρακτηριστικά.

Εισαγάγετε: "br" Πληκτρολογήστε το όνομά σας: "br"

"input type="text" name="fio""

"br" Εισάγετε τον κωδικό πρόσβασης: "br"

"input type="password" name="pass""

"br"Εισαγάγετε E-mail:l"br"

"input type="text" name="email"".

Στη συνέχεια, δημιουργούμε ένα στοιχείο επιλογής κουμπιού επιλογής. Ένα κουμπί επιλογής είναι ένα στοιχείο φόρμας στο οποίο, όταν κάνετε κλικ σε αυτό με τον κέρσορα, άλλα κουμπιά επιλογής απενεργοποιούνται. Ας εξηγήσουμε με ένα παράδειγμα της φόρμας μας. Όταν παραγγείλετε ένα μάθημα, η επιλογή θα αποτελείται είτε από CD ή DVD, επομένως πρέπει να επιλέξετε ένα. Το στοιχείο του χαρακτηριστικού "τύπος" - "ραδιόφωνο" είναι υπεύθυνο για τη δημιουργία ενός τέτοιου κουμπιού. Θα καθορίσουμε το ίδιο όνομα για τον τύπο μέσου, επομένως θα καθορίσουμε το χαρακτηριστικό "value" έτσι ώστε ο χειριστής να μπορεί να προσδιορίσει με ακρίβεια την τιμή της μεταβλητής. Γράφουμε τον κωδικό: "br"Επιλέξτε την επιλογή μέσο αποθήκευσης: "br"

"input type="radio" name="disc" value="cd"" CD "br"!}

"input type="radio" name="disc" value="dvd"" DVD "br"!}

Εάν το χαρακτηριστικό "value" προστεθεί στο κείμενο, τότε η φόρμα θα εμφανίσει αμέσως την τιμή που εκχωρήσαμε σε αυτό το χαρακτηριστικό. Για παράδειγμα, έτσι ώστε η φόρμα πλήρους ονόματος περιέχει ήδη κάποιο είδος ονόματος (τιμή = «όνομα»).

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

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


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

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

Πηγές:

• Ιστοσελίδα της κοινοπραξίας W3C
• φόρμα παραγγελίας προϊόντος για τον ιστότοπο

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

Οδηγίες

Παω σε διοικητικό πάνελ Joomla και ανοίξτε τις ενσωματωμένες ρυθμίσεις λειτουργικών μονάδων. Μεταβείτε στην καρτέλα "Για προχωρημένους" και κάντε κλικ στο κουμπί "Δημιουργία". Θα εμφανιστεί το παράθυρο "Modules Manager", στο οποίο πρέπει να επιλέξετε και να ενεργοποιήσετε μορφή εγγραφή. Καθορίστε τον επιθυμητό τίτλο για τον τίτλο και επιλέξτε το πλαίσιο δίπλα στη γραμμή "Εμφάνιση τίτλου".

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

Ανεβάστε το στοιχείο Εργαλείο δημιουργίας κοινότητας στον ιστότοπό σας. Για να το κάνετε αυτό, μεταβείτε στην ενότητα "Μεταφόρτωση αρχείου πακέτου" και κάντε κλικ στο κουμπί "Αναζήτηση". Μετά την επιλογή απαραίτητα έγγραφαΚάντε κλικ στο κουμπί "Λήψη και εγκατάσταση". Μεταβείτε στον πίνακα διαχείρισης και εκτελέστε εγκατεστημένο εξάρτημα.

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

Δημιουργώ Αντίγραφο ασφαλείαςαρχεία που θα τροποποιήσετε για να κάνετε προσαρμογές μορφή εγγραφή. Αυτό θα σας επιτρέψει να επαναφέρετε όλες τις ενέργειες και να επαναφέρετε τη λειτουργικότητα του ιστότοπου σε περίπτωση αποτυχίας. Καθορίστε ποια πεδία θέλετε να επεξεργαστείτε ή να προσθέσετε. Για παράδειγμα, θέλετε να προσθέσετε σε μορφή εγγραφήπεδίο "Πόλη".

Ανοίξτε το αρχείο default.php, το οποίο βρίσκεται στη διεύθυνση components/com_user/views/register/tmpl. Προσθέστε μια οθόνη "Πόλεις" εισάγοντας σε μορφή εγγραφήαντίστοιχο κώδικα HTML. Για να το κάνετε αυτό, μπορείτε να αντιγράψετε οποιοδήποτε άλλο στοιχείο και να το επεξεργαστείτε για την πόλη. Κάντε αυτές τις αλλαγές στον πίνακα jos_users. Ανοίξτε το αρχείο user.php, το οποίο βρίσκεται στη διεύθυνση libraries/joomla/database/table. Προσθέστε μια νέα μεταβλητή σε αυτό. Αποθηκεύστε τις ρυθμίσεις και επανεκκινήστε τον ιστότοπο.

Πηγές:

• Πώς να αλλάξετε ενότητα στο joomla

Συμβουλή 7: Πώς να κάνετε μια προσωρινή εγγραφή χωρίς ιδιοκτήτη

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

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

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

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

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

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

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

Συμβουλή 8: Πώς να συμπληρώσετε τη φόρμα 3-NDFL για την πώληση αυτοκινήτου

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

Θα χρειαστείτε

• - υπολογιστή;
• - Πρόσβαση στο διαδίκτυο;
• - Πρόγραμμα "Δήλωση" από το GNIIVS της Ομοσπονδιακής Φορολογικής Υπηρεσίας της Ρωσικής Ομοσπονδίας.
• - συμφωνία αγοράς και πώλησης αυτοκινήτου·
• - έγγραφα που επιβεβαιώνουν το άλλο εισόδημά σας και την πληρωμή του φόρου εισοδήματος φυσικών προσώπων σε αυτό για το παρελθόν έτος.

Οδηγίες

Μπορείτε να κατεβάσετε την τελευταία έκδοση του προγράμματος στον ιστότοπο του Κύριου Κέντρου Ερευνών της Ομοσπονδιακής Φορολογικής Υπηρεσίας (GNIVC FTS) της Ρωσίας. Απλώνεται

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

Το σενάριο δοκιμάστηκε με επιτυχία εκδόσεις PHP 5.3.3 και PHP 5.6.3

Τι μπορεί και έχει το σενάριο

• Εγγραφή νέων χρηστών.
• Εξουσιοδότηση χρηστών και καταγραφή cookies για μια συγκεκριμένη περίοδο (δεν χρειάζεται να συνδέεστε κάθε φορά).
• Εμφάνιση και απόκρυψη ορισμένων πληροφοριών για εξουσιοδοτημένους και μη εξουσιοδοτημένους χρήστες, αντίστοιχα.
• Διαθέτει ΠΙΝΑΚΑΣ ΔΙΑΧΕΙΡΙΣΤΗ όπου μπορείτε να επεξεργαστείτε όλα τα δεδομένα και να διαγράψετε χρήστες.

Υπάρχουν επίσης DEMO και Admin Panels

ΒΗΜΑ 1.
Εάν χρησιμοποιείτε το σενάριο τοπικής εγγραφής και εξουσιοδότησης χρησιμοποιώντας το DENWER, τότε δεν χρειάζεται να κάνετε αλλαγές στα αρχεία για να συνδεθείτε στη βάση δεδομένων.
Διαφορετικά, ανοίξτε τα αρχεία: stayt.php, classes/Auth.class.php και adminka/connect.php και στο επάνω μέρος αντικαταστήστε τα δεδομένα για τη σύνδεση στη βάση δεδομένων με τα δικά σας.

ΒΗΜΑ 2.
Μεταβείτε (αν χρησιμοποιείτε το DENWER) στη διεύθυνση: http://localhost/Tools/phpmyadmin/, εάν χρησιμοποιείτε τη φιλοξενία, κάντε κλικ στο Databases και δημιουργήστε μια νέα βάση δεδομένων με το όνομα: registr και σύγκριση: utf8_general_ci.
Μπορείτε, φυσικά, να ορίσετε το δικό σας όνομα, αλλά στη συνέχεια φροντίστε να το αντικαταστήσετε στα αρχεία για να συνδεθείτε στη βάση δεδομένων (δείτε βήμα 1).

ΒΗΜΑ 3.
Κάντε κλικ στη βάση δεδομένων μητρώου που δημιουργήθηκε και στη συνέχεια στην επάνω καρτέλα SQL και στο παράθυρο εισαγωγής που εμφανίζεται, επικολλήστε αυτόν τον κωδικό και κάντε κλικ στο OK.

ΔΗΜΙΟΥΡΓΗΣΤΕ ΠΙΝΑΚΑ ΑΝ ΔΕΝ ΥΠΑΡΧΕΙ «my_users» («id» int(11) NOT NULL AUTO_INCREMENT, «username» varchar(255) NOT NULL, «names» varchar(15) NOT NULL, «password» varchar(255) NOT NULL, `salt` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Ολα! Μεταβείτε στη διεύθυνσή σας στο πρόγραμμα περιήγησης, δοκιμάστε και πειραματιστείτε.

Πίνακας Διαχειριστή

Αφού ολοκληρώσετε τουλάχιστον μία εγγραφή, μπορείτε να μεταβείτε στην ενότητα ADMIN.
Είσοδος στον Πίνακα ΔΙΑΧΕΙΡΙΣΗΣ:

Http://your_site.ru/adminka/

Μην ξεχάσετε να ασφαλίσετε αυτόν τον φάκελο και μπορείτε επίσης να τον μετονομάσετε.
Όταν ανοίγετε τον Πίνακα Διαχειριστή, κάντε κλικ στο κουμπί ΑΝΑΖΗΤΗΣΗ και θα εμφανιστούν όλοι οι εγγεγραμμένοι χρήστες, όπου όταν κάνετε κλικ στο συγκεκριμένο αριθμό ID, θα δείτε δεδομένα χρήστη για επεξεργασία.

Μπορείτε επίσης να βρείτε γρήγορα έναν χρήστη μέσω του e-mail του για να το κάνετε αυτό, απλώς εισάγετε ένα γνωστό e-mail στο πεδίο ΑΝΑΖΗΤΗΣΗ και κάντε κλικ στο κουμπί.
Δεν συνιστώ τη χρήση του κουμπιού ADD, καθώς ο χρήστης προστίθεται στο σύστημα χωρίς κωδικό πρόσβασης. Και δεν έχω ιδέα γιατί το κατάφεραν.

Αυτό είναι όλο, εάν δεν σας βγει ή δεν είναι ξεκάθαρο, κάντε ερωτήσεις.

Στην πορεία, μπορείτε να προσπαθήσετε να πουλήσετε πληροφορίες (προϊόντα).

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

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

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

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

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

Λοιπόν, ας ξεκινήσουμε!

Μεταβείτε στα Έγγραφα Google (Drive) και συνδεθείτε.

Στην αριστερή γωνία, κάντε κλικ στο κουμπί Δημιουργία και επιλέξτε Φόρμα.

Ο επεξεργαστής φόρμας θα εμφανιστεί σε νέο παράθυρο.

Όπως μπορείτε να δείτε, μπορείτε να εισαγάγετε έναν τίτλο και μια περιγραφή σε αυτόν και έχουμε ήδη δύο πεδία κειμένου έτοιμα στη φόρμα. Στο πρώτο πεδίο στη γραμμή «Ερώτηση», έγραψα «Το όνομά σου». Στις «Επεξηγήσεις» έβαλα «Εισάγετε το δικό σας Το πραγματικό του όνομα" Το πεδίο "Τύπος ερώτησης" έμεινε ως "Κείμενο". Επέλεξα επίσης το πλαίσιο ελέγχου "Να γίνει υποχρεωτική η ερώτηση" - αυτό δεν θα επιτρέψει στον χρήστη να υποβάλει δεδομένα μέχρι να συμπληρώσει αυτό το πεδίο.

Κάντε κλικ στο κουμπί «Τέλος».

Ας περάσουμε στο δεύτερο ερώτημα. Για να το κάνετε αυτό, επιλέξτε το με ένα κλικ του ποντικιού και κάντε κλικ στο εικονίδιο επεξεργασίας.
Για παράδειγμα, ας συμπληρώσουμε αυτήν την ερώτηση ως εξής: Ερώτηση - Τι σας ενδιαφέρει;, Επεξήγηση - Περιγράψτε τα ενδιαφέροντά σας και τους τομείς στους οποίους θεωρείτε ότι είστε ειδικοί, Αλλάξτε τον τύπο της ερώτησης σε - Κείμενο (παράγραφος). Επιλέξτε το πλαίσιο ελέγχου "Κάντε αυτήν την ερώτηση υποχρεωτική".

Κάντε κλικ στο κουμπί «Τέλος».

Έχουμε τελειώσει τα κενά, οπότε για να προσθέσουμε νέα πεδία πρέπει να κάνουμε κλικ στο κουμπί «Προσθήκη στοιχείου» στην επάνω αριστερή γωνία. Αυτή τη φορά θα επιλέξουμε το στοιχείο "Ένα από τη λίστα".

Ας συμπληρώσουμε αυτήν την ερώτηση ως εξής: Ερώτηση – Το φύλο σας, Επεξηγήσεις – αφήστε το κενό, Τύπος ερώτησης άδεια – Μία από τη λίστα, Μην τσεκάρετε το πλαίσιο «Μετάβαση στη σελίδα απάντησης». Θα το χρειαστείτε εάν αποφασίσετε να δημιουργήσετε φόρμες πολλών σελίδων. Και πάλι, επιλέξτε το πλαίσιο ελέγχου "Κάντε αυτήν την ερώτηση υποχρεωτική".

Κάντε κλικ στο κουμπί «Τέλος».

Προσθήκη νέο στοιχείο- "Πολλές από τη λίστα." Δεν θα ξαναγράψω τις επιλογές μου - απλά κοιτάξτε την εικόνα.

Κάντε κλικ στο «Τέλος».

Προσθέστε ένα νέο στοιχείο - "Αναπτυσσόμενη λίστα". Συμπληρώστε όπως στην εικόνα.

Κάντε κλικ στο «Τέλος». Προσθέστε ένα νέο στοιχείο - "Κλίμακα". Όπως και πριν, συμπληρώστε το παράδειγμα της εικόνας.

Κάντε κλικ στο «Τέλος». Θα μοιάζει με αυτό:

Προσθέστε ένα νέο στοιχείο - "Πλέγμα". Ας συμπληρώσουμε...

Ας δούμε..

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

Προσθέτουμε τον κώδικα που προκύπτει στη σελίδα μας και θαυμάζουμε το αποτέλεσμα.

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

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

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

Στο μενού "Προσθήκη στοιχείου", έχουμε δύο μη περιγραφόμενα στοιχεία - αυτά είναι η "Επικεφαλίδα ενότητας" και η "Αλλαγή σελίδας". Συνήθως τα χρησιμοποιώ μαζί. Μερικές φορές το σχήμα αποδεικνύεται πολύ επίμηκες και συνιστάται να το χωρίσετε σε δύο μέρη. Το "Page Break" χρησιμοποιείται για αυτούς τους σκοπούς. Προσθέτω όμως την "Επικεφαλίδα ενότητας" μετά το διάλειμμα, έτσι ώστε ο χρήστης να μην ξεχάσει τι συμπληρώνει και γιατί.

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

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

Το επόμενο μενού είναι "Προβολή απαντήσεων". Περιέχει μόνο δύο στοιχεία: "Σύνοψη" και "Πίνακας".

Το επόμενο μενού είναι «Αποστολή από ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" σας επιτρέπει να στείλετε τη φόρμα σας στο email του χρήστη.

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

Κάντε κλικ στο έγγραφο. Θα ανοίξει σε νέο παράθυρο.

Όπως μπορείτε να δείτε, τα αποτελέσματα αποθηκεύονται σε μια βολική μορφή πίνακα.

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

Για να επεξεργαστείτε τη φόρμα εγγραφής, θα χρειαστεί να επιλέξετε «Επεξεργασία Φόρμας» από το μενού «Φόρμες».

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

Μάλλον αυτό είναι όλο. Σας ευχαριστώ όλους για την προσοχή σας. Εάν έχετε οποιεσδήποτε ερωτήσεις, ρωτήστε τις στα σχόλια - θα προσπαθήσω να βοηθήσω.