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

Χρησιμοποίησα αυτό το σενάριο κατά τη δημιουργία του ιστότοπου www.prtut.ru.

Επίδειξη σεναρίου

Στο παράδειγμα, απαιτούνται όλα τα πεδία.

Περιγραφή

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

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

JavaScript

συνάρτηση isEmpty(str) ( // Έλεγχος για κενή συμβολοσειρά. for (var intLoop = 0; intLoop

Δεδομένου ότι ο έλεγχος πραγματοποιείται από την πλευρά του πελάτη και το σενάριο εκτελείται απευθείας στο πρόγραμμα περιήγησης του χρήστη, οι προειδοποιήσεις φαίνονται διαφορετικές στο Google Chrome, στο Mozilla Firefox, στο Opera και στο πρόγραμμα περιήγησης Yandex.

Φαίνεται ότι δεν υπάρχει τίποτα περίπλοκο στο σχεδιασμό των πεδίων εισαγωγής: σχεδιάστε άδεια ορθογώνια για την εισαγωγή δεδομένων, ο χρήστης θα κάνει τα υπόλοιπα μόνος του. Ωστόσο, όλα δεν είναι τόσο απλά. Κρίνοντας από το μήκος του άρθρου, είναι σαφές ότι υπάρχουν πολλοί κανόνες και χαρακτηριστικά. Ο χρήστης πρέπει να «καθοδηγείται από το χέρι», να του δείχνει τα πάντα, να του εξηγεί και να βοηθάει. Τότε και μόνο τότε θα μπορέσουμε να πάρουμε τα επιθυμητά δεδομένα από αυτόν. Λοιπόν, ας ξεκινήσουμε!

7+ κανόνες πεδίων εισαγωγής

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

Γράψτε περιγραφές και συμβουλές

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

Υπάρχουν διάφοροι τύποι υποδείξεων:

1) Εικονίδια

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

Ωστόσο, δεν πρέπει να ξεχνάμε ότι χρειάζονται πάντα εξηγήσεις.

2) Παραδείγματα

Ο ευκολότερος τρόπος για να πείτε πώς να συμπληρώσετε ένα πεδίο είναι να δείξετε ένα παράδειγμα. Ενδεικτικό παράδειγμα: " [email προστατευμένο]»

3) Επεξηγήσεις

Αυτός ο τύπος περιγραφής χρησιμεύει για να εξηγήσει πώς θα χρησιμοποιήσει ο ιστότοπος τα δεδομένα και σε τι χρειάζονται. Για παράδειγμα: «Χρειαζόμαστε mail για να σας ειδοποιήσουμε για την κατάσταση της παραγγελίας σας. Δεν θα στείλουμε spam».

Χρησιμοποιήστε μάσκες

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

Ακολουθούν μερικά παραδείγματα διαφορετικών μασκών:

Επισημάνετε τα απαιτούμενα πεδία

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

Είναι καλύτερα να ομαδοποιήσετε όλα τα απαιτούμενα πεδία και να τα τοποθετήσετε στην αρχή της φόρμας.

Παρεμπιπτόντως, το παραπάνω παράδειγμα δείχνει επίσης 2 τύπους συμβουλών: παραδείγματα και επεξηγήσεις.

Εστίαση και πληκτρολόγιο

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

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

Όταν χρησιμοποιείτε υποδείξεις με αυτόματη συμπλήρωση (για παράδειγμα, σε μια αναζήτηση), θα πρέπει να μπορείτε να επιλέξετε ένα στοιχείο χρησιμοποιώντας βέλη και να το επιβεβαιώσετε πατώντας το πλήκτρο Enter.

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

Χρησιμοποιήστε τα δεδομένα που έχετε ήδη εισάγει

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

Πεδία εισαγωγής ομάδας

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

Προσέξτε το μέγεθος του πεδίου

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

Τελικά

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

Πολλοί σχολαστικοί τύποι θα πουν ότι δεν υπήρχαν καθόλου 7 κανόνες (και κάποιοι δεν το πρόσεξαν καν, χα χα χα). Ωστόσο, πολλοί από τους κανόνες είναι μικροί, οπότε τους υπολόγισα ως τους μισούς. Και γενικά, μου αρέσει ο αριθμός 7 =)

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

Ένα πραγματικό παράδειγμα μπορείτε να δείτε εδώ:

Κατεβάστε

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

Μέρος HTML

Ας δούμε από τι αποτελείται αυτή η φόρμα:

21 22 23 24 25 26 27 28 29 <form class = "contact_form" action = "#" μέθοδος = "post" name = "contact_form" > <ul > <li > <h2 >Γράψτε μας</h2> <span class = "required_notification" >* Τα πεδία είναι υποχρεωτικά</span> </li> <li > <ετικέτα για = "όνομα" >Ονομα:</label> <τύπος εισαγωγής = σύμβολο κράτησης θέσης "κείμενο" = "Petrov Alexander"απαιτείται / > </li> <li > <label for = "email" >ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ:</label> <τύπος εισαγωγής = "email" name = "email" placeholder = "name@site" required / > !} <span class = "form_hint" >Για παράδειγμα "name@site"</span> </li> <li > <label for = "website" >Ιστοσελίδα:</label> <τύπος εισαγωγής = "url" όνομα = "website" placeholder = "https://site" required pattern= "(http|https)://.+" / > !} <span class = "form_hint" >Για παράδειγμα "https://site"</span> </li> <li > <ετικέτα για = "μήνυμα" >Μήνυμα:</label> <textarea name = "μήνυμα" cols = "40" σειρές = "6" απαιτείται > </li> <li > <button class = "submit" type = "submit" >Στείλετε</κουμπί> </li> </ul> </form>

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

Αλλά θα το επαναλάβω ξανά:

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

απαιτείται— εάν ένα πεδίο έχει αυτό το χαρακτηριστικό, τότε το πεδίο πρέπει να συμπληρωθεί.

Και δεν χρησιμοποιήσαμε Javascript γιατί η HTML5 μας επιτρέπει να το κάνουμε αυτό με τις λειτουργίες της.

Υπάρχει επίσης ένα νέο χαρακτηριστικό εδώ pattern="(http|https)://.+"— καθορίζει με τι πρέπει να ξεκινά η διεύθυνση ιστού του ιστότοπου, διαφορετικά θα υπάρξει σφάλμα.

Μέρος CSS

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .contact_form ul (πλάτος : 750 px ; list-style-type : none ; list-style-position : out ; margin : 0 px ; padding : 0 px ; ) .contact_form li ( padding : 12 px ; border-bottom : 1px ; συμπαγές #eex ; θέση : σχετική .φόρμα_επαφής li :first-child , .contact_form li :last-child ( border-bottom : 1px solid #777 ; )

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .contact_form label (πλάτος : 150 px ; margin-top : 3 px ; display : inline-block ; float : left ; padding : 3 px ; ) .contact_form input (ύψος : 20 px , πλάτος : 220 px ; .contformtxding ; ( γέμιση : 8 εικονοστοιχεία ; πλάτος : 300 εικονοστοιχεία ; ) Κουμπί .contact_form (αριστερό περιθώριο: 156 εικονοστοιχεία ; )

Τώρα ας γράψουμε στυλ για το πότε τα πεδία είναι ενεργά και πότε δεν είναι:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Είσοδος .contact_form, .contact_form textarea ( περίγραμμα : 1px συμπαγές #aaa ; box-shadow : 0px 0px 3px #cccc , 0 10px 15px #eee inset ; border-radius : 2px ; padding:-pding ; padding:-pding ; .25s; -webkit-transition: padding .25s; -o-transition: padding.25s) 0 0 3px #aaa : 70px ;
1 2 3 4 5 6 7 8 9 10 11 12 13 .contact_form input:required , .contact_form textarea:required ( background : #fff url (images/red_asterisk.png ) no-repeat 98% center ; ) .contact_form input:required :valid , .contact_quired background:valid: #fff url (images/valid.png ) no-repeat 98% center : 0 0 5px #5cd053 ; border-color : #28921f ; φόντο : #fff url (images/invalid.png ) χωρίς επανάληψη 98% box-shadow : 0 0 5px #d45252 ;

Έφυγε λίγο :). Το προτελευταίο βήμα είναι να ορίσετε στυλ για συμβουλές εργαλείων:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .form_hint ( background : #d45252 ; border-radius : 3px 3px 3px 3px ; color : white ; margin-left : 8px ; padding : 1px 6px ; z-index : 999 ; /* σημαίνει ότι η επεξήγηση εργαλείου θα επικαλύπτει όλα τα στοιχεία */θέση: απόλυτη; /* μπορείτε να χωρίσετε την υπόδειξη σε δύο γραμμές */οθόνη: καμία; ) .form_hint : :before ( περιεχόμενο : " \25C0"; χρώμα : #d45252 ; θέση: απόλυτη; κορυφή: 1px; αριστερά: -6 px; ) .contact_form input:focus + .form_hint ( display : inline ; ) .contact_form input:required :valid + .form_hint ( background : #28921f ; ) .contact_form input:required :valid + .form:#29 color: )

Και το τελευταίο βήμα είναι να ορίσετε το στυλ για το κουμπί "Υποβολή":

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 button.submit ( background-color : #68b12f ; background : -webkit-gradient(linear , left top , left bottom , from(#68b12f ) , to (#50911e ) ) ; background : -webkit-linear-gradient(top , #68b12f , #50911e ) ; #50911e) ; -o-border-radius : 3px 0 0 #9fd574 ; : 0 1px 0 #9fd574 inset ; padding: 6px 20px; text-align: κέντρο; text-shadow : 0 -1px 0 #396715 ; ) button.submit :hover ( opacity : .85; cursor : pointer ; ) button.submit :active ( border : 1px solid #20911e ; box-shadow : 0 0 10px 5px #356b0b inset ; -webdowkit:-0- 0 10px 5px #356b0b inset ; -moz-box-shadow : 0 0 10px 5px #356b0b inset ; ένθετο ;

συμπέρασμα

Εντάξει όλα τελείωσαν τώρα! 🙂 Οι τεχνολογίες του Διαδικτύου αναπτύσσονται τόσο γρήγορα που πριν καν το προσέξετε, όλοι θα χρησιμοποιούν τον συνδυασμό HTML5+CSS3. Φυσικά, πρέπει να εξετάσετε πώς θα φαίνεται αυτό ή εκείνο το στοιχείο σε παλαιότερα προγράμματα περιήγησης, αλλά δεν πρέπει να ξεχνάτε τις νέες δυνατότητες!

13 Ιανουαρίου 2011 στις 01:09
  • Διεπαφές
  • Μετάφραση

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

1. Σημειώστε καθαρά τα απαιτούμενα πεδία

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

Στη φόρμα εγγραφής του Zappos.com, τα υποχρεωτικά πεδία σημειώνονται με αστερίσκο (*). Τα προαιρετικά πεδία επισημαίνονται επίσης με σαφήνεια.

2. Χρησιμοποιήστε σαφή και λεπτομερή μηνύματα σφάλματος

Είμαι βέβαιος ότι το μισείτε όταν, όταν συμπληρώνετε εσφαλμένα μια φόρμα, εμφανίζονται ειδοποιήσεις σφάλματος που λένε, "Πρέπει να συμπληρώσετε όλα τα απαιτούμενα πεδία", αντί να παρέχετε πιο λεπτομερείς πληροφορίες, όπως "Ξεχάσατε να συμπληρώσετε τη διεύθυνση email σας .»
Η χρήση της επικύρωσης σε πραγματικό χρόνο των δεδομένων που έχουν εισαχθεί είναι μια καλή λύση. Για παράδειγμα, αμέσως μετά τη συμπλήρωση μιας διεύθυνσης email, η φόρμα ιστού θα πρέπει να ελέγξει ότι η μορφή που εισαγάγατε είναι σωστή και εάν κάτι δεν πάει καλά, τότε να ειδοποιήσει αμέσως τον χρήστη.

3. Χρησιμοποιήστε επικύρωση μορφής δεδομένων από την πλευρά του πελάτη (JavaScript)

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

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

4. Επισημάνετε οπτικά τα πεδία για συμπλήρωση, ώστε ο χρήστης να μην χαθεί

Βεβαιωθείτε ότι μπορείτε να προσδιορίσετε οπτικά ποιο πεδίο συμπληρώνει ο χρήστης αυτήν τη στιγμή. Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας την εστίαση: επιλογέας ψευδο-κλάσης στο CSS.

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

Το Google Chrome επισημαίνει το ενεργό στοιχείο με ένα κίτρινο πλαίσιο. Ανοιχτό μπλε του Firefox.

5. Εμφάνιση αποτελεσμάτων προόδου

Εάν η φόρμα ιστού σας είναι μεγάλη και αποτελείται από πολλές σελίδες (ή έχει πολλά βήματα), βεβαιωθείτε ότι ο χρήστης ενημερώνεται συνεχώς για την πρόοδο των ενεργειών που εκτελούνται και πόσο περισσότερο χρόνο μπορεί να χρειαστεί για να ολοκληρώσει. Αυτό συμβαίνει συχνά σε περιπτώσεις διαδικτυακής έρευνας (έρευνας) με πολλές ερωτήσεις ή κατά τη διαδικασία παραγγελίας σε ηλεκτρονικό κατάστημα.
Το μόνο που έχετε να κάνετε είναι να γράψετε "Βήμα 4 από 5" ή κάτι τέτοιο. Εάν οι χρήστες συνεχίσουν να κάνουν κλικ στο κουμπί «συνέχεια» χωρίς να καταλαβαίνουν σαφώς πότε θα είναι το τελευταίο βήμα, θα σταματήσουν να συμπληρώνουν τη φόρμα νωρίτερα από ό,τι θα περίμενε κανείς.

Το ταμείο του Amazon έχει 4 σελίδες. Η φόρμα σάς λέει πού βρίσκεστε τώρα και πόσος χρόνος απομένει μέχρι την ολοκλήρωση.
Φυσικά, μια καλύτερη εναλλακτική θα ήταν να συντομεύσετε τη φόρμα ιστού σας - εάν αυτό δεν μπορεί να γίνει, τότε τουλάχιστον δώστε στον χρήστη πληροφορίες σχετικά με το πόσο κοντά βρίσκονται στην ολοκλήρωση των ενεργειών που εκτελούνται.

6. Αποθηκεύστε περιοδικά (cache) δεδομένα φόρμας

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

7. Μην χρησιμοποιείτε το τυπικό κείμενο «Υποβολή» (αποστολή)

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

Στη φόρμα εγγραφής στο Basecamp, το κείμενο «Υποβολή» έχει αντικατασταθεί με κάτι πιο χρήσιμο.

8. Το κουμπί «Ακύρωση» σας κάνει να διστάζετε

Φανταστείτε ότι αγοράζετε ένα νέο πουκάμισο σε ένα κατάστημα και ο πωλητής σας ρωτά: «Θέλετε πραγματικά αυτό το συγκεκριμένο πουκάμισο;» Θα το αγοράσεις ακόμα; Πιθανότατα όχι. Μπορεί να έχετε αμφιβολίες, νομίζοντας ότι ο πωλητής θεώρησε το πουκάμισο ακατάλληλο.
Το ίδιο συμβαίνει και με τις φόρμες ιστού: η χρήση ενός κουμπιού "ακύρωσης" μπορεί να κάνει τους χρήστες σας να σκεφτούν δύο φορές τι συμπληρώνουν.

9. Εμφάνιση των πεδίων των χρηστών στη σωστή μορφή

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

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

10. Η μονόστηλη μορφή είναι η καλύτερη λύση

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

ΘΕΣΗ

Για τη διεξαγωγή ανοιχτών ομαδικών και ατομικών αγώνων

Για άρση ισχύος και γυμνό πάγκο,

Podolsk και περιοχή της Μόσχας

1. Στόχοι

· Διοργανώνονται διαγωνισμοί για την εκλαΐκευση του powerlifting στο Podolsk και την περιοχή της Μόσχας

· Ανατροφή μιας σωματικά αναπτυγμένης νέας γενιάς και προώθηση ενός υγιεινού τρόπου ζωής

· Συμμετοχή των νέων στη συστηματική φυσική αγωγή και αθλητισμό

· Δημιουργία κινήτρων σε εφήβους και νέους για ενασχόληση με τη φυσική αγωγή

· Βελτίωση του αθλητισμού των αθλητών στο Ποντόλσκ και στην περιοχή της Μόσχας

· Προσδιορισμός των ισχυρότερων αθλητών στο Ποντόλσκ και στην περιοχή της Μόσχας

· Σχηματισμός ομάδας για εμφάνιση σε ανοιχτούς ομαδικούς αγώνες powerlifting στο Podolsk

2. Ημερομηνία και τοποθεσία

Ο διαγωνισμός πραγματοποιείται στις 16 Νοεμβρίου 2013 στο Παλάτι του Πολιτισμού την 1η Μαΐου: Περιφέρεια Μόσχας, Klimovsk, οδός Zavodskaya, 3. Η έναρξη του διαγωνισμού και η ζύγιση θα ανακοινωθούν επιπλέον (με email ή SMS).

3. Οργάνωση και ηγεσία

Η γενική διοργάνωση του διαγωνισμού πραγματοποιείται από το MU Center for Civic and Patriotic Education of Youth "Fakel" και το γυμναστήριο Good Lift, με τη συμμετοχή του παραρτήματος Podolsk της Πανρωσικής Οργάνωσης Φυσικής Αγωγής "Combat Brotherhood" και το Φιλανθρωπικό Ίδρυμα Healthy Nation.



Η άμεση επίβλεψη πραγματοποιείται από τον προπονητή αθλητικής γυμναστικής της Fakel MU Popov S.A. και τον διευθυντή του γυμναστηρίου Good Lift P.S. και ο εκπρόσωπος του φιλανθρωπικού ιδρύματος «Healthy Nation», I.F.

4. Συμμετέχοντες στο διαγωνισμό

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

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

Οι διοργανωτές διατηρούν το δικαίωμα, εάν ο αριθμός των αιτήσεων υπερβαίνει, το αργότερο έως τις 9 Νοεμβρίου 2013, να ανακοινώσει τα πρότυπα για την είσοδο στους αγώνες, με υποχρεωτική ειδοποίηση των αθλητών με ανάρτηση πληροφοριών σε ανοιχτές πηγές, καθώς και αποστολή μηνυμάτων SMS και e-mail. .

5. Διαδικασία διεξαγωγής διαγωνισμών και προϋποθέσεις υποβολής αιτήσεων

Οι αιτήσεις συμμετοχής σε διαγωνισμούς πρέπει να υποβληθούν πριν από τις 9 Νοεμβρίου 2013 μέσω email: [email προστατευμένο]ή μέσω μηνύματος SMS στον αριθμό +79099250337 (το κόστος ενός SMS είναι ίσο με το κόστος ενός μηνύματος SMS από τον τηλεπικοινωνιακό σας πάροχο).

Προσοχή!Δείτε το Παράρτημα 1 για το σωστό έντυπο αίτησης.

6. Διαδικασία για τον καθορισμό των νικητών

Προσοχή!Η κρίση του αγώνα διεξάγεται σύμφωνα με τους κανόνες IPF (βλ. Παράρτημα 2)

Οι αγώνες διεξάγονται στην ανοιχτή ηλικιακή κατηγορία (Open).

στο ατομικό πρωτάθλημα:

γυναίκεςαγωνίζονται στην κατηγορία απόλυτου βάρους, οι νικητές (που καταλαμβάνουν 1η-2η-3η θέση) καθορίζονται από τη φόρμουλα Wilks.

Νικητές στους άνδρεςορίζονται σε κατηγορίεςέως 75 κιλά, έως 90 κιλά, έως 110 κιλά και πάνω από 110 για το καλύτερο αποτέλεσμα. Νικητές σε απόλυτοςπρωτάθλημα (αθλητές που πήραν θέσεις 1-2-3) στο τρίαθλο και στον πάγκο καθορίζονται σύμφωνα με τον τύπο Wilks.

Στο ομαδικό πρωτάθλημαΛαμβάνονται υπόψη 4 καλύτερα αποτελέσματα ανδρών μελών της ομάδας και 1 αποτέλεσμα γυναικών

Οι βαθμοί απονέμονται σύμφωνα με το ακόλουθο σχήμα:

1η θέση – 6 βαθμοί

2η θέση – 4 βαθμοί

3η θέση – 3 βαθμοί

4η θέση – 2 βαθμοί

5η θέση – 1 βαθμός

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

7. Τελετή επιβράβευσης του νικητή

Οι νικητές και οι βραβευθέντες στα ατομικά και ομαδικά πρωταθλήματα που κατέλαβαν 1-3 θέσεις στις υποψηφιότητες απονέμονται με αναμνηστικά διπλώματα και μετάλλια.

8. Χρηματοδότηση

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

Παράρτημα 1

Δείγμα εφαρμογής (αποστολή με email ή SMS):

1. υποψηφιότητα: για παράδειγμα, πάγκος ή τρίαθλο.

2. όνομα ομάδας ή επισήμανση προσωπικού *

3. Πλήρες όνομα *–

4. Έτος γέννησης *–

6. ψηφίο *–

7. καλύτερο αποτέλεσμα * (τους τελευταίους 6 μήνες) -

8. ηλικία* -

9. προπονητής -

10. τηλέφωνο επικοινωνίας (κατά προτίμηση κινητό)* -

Τα πεδία που σημειώνονται με αστερίσκο (*) είναι υποχρεωτικά.

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

Παράρτημα 2

Κανόνες αγώνα:

  1. Οι παραστάσεις στους αγώνες πραγματοποιούνται χωρίς τη χρήση εξοπλισμού (πουκάμισα τύπου, φόρμες, επίδεσμοι γονάτων για άρση ισχύος).
  2. Μπορείτε να χρησιμοποιήσετε: επίδεσμους καρπού, ζώνες (μέγιστο πλάτος ζώνης – 10 cm).
  3. Εάν είναι απαραίτητο, μπορείτε να χρησιμοποιήσετε έναν μη υποστηρικτικό επίδεσμο (στο ένα πόδι ή το χέρι). Οι μη υποστηρικτικοί επίδεσμοι είναι συνηθισμένοι ιατρικοί επίδεσμοι. Ο επίδεσμος πρέπει να παρουσιαστεί στον κριτή πριν από τη χρήση.
  4. Οι ασκήσεις εκτελούνται σύμφωνα με τους κανόνες IPF

Καταλήψεις(κανόνες και σειρά εκτέλεσης).

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

Αφού ο αθλητής αποδεχτεί την αρχική θέση, ο κριτής δίνει την εντολή να ΚΑΘΙΣΕΙ.

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

Ο αθλητής πρέπει να επιστρέψει ανεξάρτητα σε κάθετη θέση με τα πόδια πλήρως ισιωμένα στα γόνατα. Διπλή ορθοστασία (το «άλμα» απαγορεύεται).

Μόλις ο αθλητής πάρει στάση, ο διαιτητής δίνει την εντολή να επιστρέψει η μπάρα στις σχάρες - RACKS.

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

Πρέσσα πάγκου(κανόνες και σειρά εκτέλεσης)

Ο αθλητής πρέπει να ξαπλώνει ανάσκελα, με το κεφάλι, τους ώμους και τους «ολόκληρους» γλουτούς του σε επαφή με την επιφάνεια του πάγκου. Η σόλα και τα τακούνια των παπουτσιών του πρέπει να είναι σε επαφή με την επιφάνεια της πλατφόρμας ή τα μπλοκ (όσο το επιτρέπει το σχήμα των παπουτσιών).

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

εκτελώντας την άσκηση. Απαγορεύεται η χρήση αντίστροφης λαβής.

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

Η απόσταση μεταξύ των χεριών στη ράβδο, η οποία μετριέται ανάμεσα στους δείκτες, δεν πρέπει να υπερβαίνει τα 81 cm (και οι δύο δείκτες πρέπει να βρίσκονται μέσα στα σημάδια των 81 cm).

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

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

θέση και η μπάρα θα είναι στη σωστή θέση. Το σήμα για την έναρξη της άσκησης είναι η εντολή – START.

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

- Απαγορευμένος– Τυχόν λάθος κατά την τήρηση των εντολών του διαιτητή. Οποιαδήποτε αλλαγή στην αρχική θέση κατά την εκτέλεση μιας άσκησης (οποιαδήποτε ανύψωση (διαχωρισμός) του κεφαλιού, των ώμων, των γλουτών από τον πάγκο ή κίνηση των ποδιών στην πλατφόρμα ή τα μπλοκ, ή κίνηση των χεριών κατά μήκος της ράβδου). Οποιαδήποτε προς τα κάτω κίνηση της μπάρας κατά τη διάρκεια του πάγκου. Έλλειψη συμπίεσης της μπάρας με πλήρως ισιωμένα χέρια στο τέλος της άσκησης.

6. Deadlift (κανόνες και σειρά εκτέλεσης)

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

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

Ο δικαστής δίνει την εντολή - ΚΑΤΩ.

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

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


Κλείσε