Χρησιμοποιώντας την ετικέτα εισαγωγής HTML και την ετικέτα κουμπιού στις φόρμες

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

Για παράδειγμα:

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

Το & lt; button & gt; Εναλλακτική ετικέτα

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

Θα θέλετε να καθορίσετε το χαρακτηριστικό τύπου κουμπιού σε οποιαδήποτε ετικέτα

. Υπάρχουν τρεις διαφορετικοί τύποι:

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

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

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

Το HTML5 προσθέτει κάποια πρόσθετα χαρακτηριστικά στην ετικέτα

που σας δίνει περισσότερες λειτουργίες.

• autofocus - Όταν φορτώνεται η σελίδα, αυτό καθορίζει ότι αυτό το κουμπί είναι η εστίαση. Μόνο μία αυτόματη εστίαση μπορεί να χρησιμοποιηθεί σε μια σελίδα.
• μορφή - Συνδέει το κουμπί με μια φόρμα μέσα στο ίδιο έγγραφο HTML, χρησιμοποιώντας το αναγνωριστικό της φόρμας ως τιμή. Για παράδειγμα:

Υποβολή

formaction - Χρησιμοποιείται μόνο με type = "submit" και μια διεύθυνση URL ως τιμή, καθορίζει πού θα σταλούν τα δεδομένα φόρμας. Για παράδειγμα:

Υποβολή δεδομένων φόρμας σε άλλη σελίδα

formenctype - Χρησιμοποιείται μόνο με το χαρακτηριστικό type = "submit" . Ορίζει τον τρόπο κωδικοποίησης των δεδομένων φόρμας όταν υποβάλλονται στον διακομιστή. Οι τρεις τιμές είναι application / x-www-form-urlencoded (προεπιλογή), multipart / form-data και text / plain.

formmethod - Χρησιμοποιείται μόνο με το χαρακτηριστικό type = "submit" . Αυτό καθορίζει τη μέθοδο HTTP που πρέπει να χρησιμοποιήσετε κατά την υποβολή δεδομένων φόρμας, είτε λάβετε είτε δημοσιεύετε.

formnovalidate - Χρησιμοποιείται μόνο με το χαρακτηριστικό type = "submit" . Τα δεδομένα φόρμας δεν θα επικυρωθούν όταν υποβληθούν.

formtarget - Χρησιμοποιείται μόνο με το χαρακτηριστικό type = "submit" . Αυτό υποδεικνύει πού πρέπει να εμφανίζεται η απόκριση του ιστότοπου όταν υποβάλλονται δεδομένα φόρμας, όπως σε ένα νέο παράθυρο κλπ. Οι επιλογές αξίας είναι είτε _blank, _self, _parent, _top ή ένα συγκεκριμένο όνομα πλαισίου.

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