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

click fraud protection

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

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


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

Το «κουμπί» Εναλλακτική ετικέτα

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

instagram viewer

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

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

Άλλα χαρακτηριστικά περιλαμβάνουν:

  • όνομα: Δίνει στο κουμπί ένα όνομα αναφοράς.
  • αξία: Καθορίζει μια τιμή που θα εκχωρηθεί αρχικά στο κουμπί.
  • καθιστώ ανίκανο: Απενεργοποιεί το κουμπί.

Προχωρώντας περαιτέρω με κουμπιά

Το HTML5 προσθέτει πρόσθετα χαρακτηριστικά στο κουμπί ετικέτα που επεκτείνει τη λειτουργικότητά της.

  • αυτόματη εστίαση: Όταν φορτώνεται η σελίδα, αυτή η επιλογή καθορίζει ότι αυτό το κουμπί είναι η εστίαση. Μόνο μία αυτόματη εστίαση μπορεί να χρησιμοποιηθεί σε μια σελίδα.
  • μορφή: Συσχετίζει το κουμπί με μια συγκεκριμένη φόρμα μέσα στο ίδιο έγγραφο HTML, χρησιμοποιώντας το αναγνωριστικό της φόρμας ως τιμή.
  • σχηματισμός: Χρησιμοποιείται μόνο με type = "υποβολή" και μια διεύθυνση URL ως τιμή, καθορίζει πού θα σταλούν τα δεδομένα φόρμας. Συχνά, ο προορισμός είναι ένα σενάριο PHP ή κάτι παρόμοιο,
  • τύπος τύπου: Χρησιμοποιείται μόνο με type = "υποβολή" Χαρακτηριστικό. Ορίζει τον τρόπο κωδικοποίησης των δεδομένων φόρμας όταν υποβάλλονται στο διακομιστή. Οι τρεις τιμές είναι εφαρμογή / x-www-form-urlencoded (Προκαθορισμένο), πολλαπλά στοιχεία / μορφή δεδομένων, και κείμενο / απλό.
  • μέθοδος φόρμας: Χρησιμοποιείται μόνο με type = "υποβολή" Χαρακτηριστικό. Αυτό καθορίζει ποια μέθοδο HTTP θα χρησιμοποιηθεί κατά την υποβολή δεδομένων φόρμας παίρνω ή Θέση.
  • φορμανοβαλιδάτη: Χρησιμοποιείται μόνο με type = "υποβολή" Χαρακτηριστικό. Τα δεδομένα της φόρμας δεν θα επικυρωθούν κατά την υποβολή τους.
  • φορμάρτζ: Χρησιμοποιείται μόνο με type = "υποβολή" Χαρακτηριστικό. Αυτό υποδεικνύει πού πρέπει να εμφανίζεται η απόκριση του ιστότοπου κατά την υποβολή δεδομένων φόρμας, όπως σε νέο παράθυρο κ.λπ. Οι επιλογές τιμής είναι είτε_blank, _self, _parent, _top, ή ένα συγκεκριμένο όνομα καρέ.

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

instagram story viewer