Αtribούτα Φόρμας HTML

Αυτό το κεφάλαιο παρουσιάζει το HTML <form> Διαφορετικές ιδιότητες του στοιχείου.

Ιδιότητα Action

action Η ιδιότητα ορίζει τη λειτουργία που θα εκτελεστεί κατά την υποβολή του φόρμαυλά.

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

Στο παρακάτω παράδειγμα, τα δεδομένα του φόρμαυλά θα σταλεί στο αρχείο που ονομάζεται "action_page.php". Το αρχείο αυτό περιέχει το σενάριο διαχείρισης των δεδομένων του φόρμαυλά από την πλευρά του διακομιστή:

Παράδειγμα

Μετά την υποβολή, τα δεδομένα του φόρμαυλά θα σταλεί στο αρχείο "action_page.php":

<form action="/action_page.php">
  <label for="fname">Όνομα:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Επίθετο:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

Δοκιμάστε το προσωπικά

Σημείωση:Εάν παραλειφθεί η ιδιότητα action, η action θα ρυθμιστεί στην τρέχουσα σελίδα.

Ιδιότητα Target

target Η ιδιότητα καθορίζει πού θα εμφανιστεί η απάντηση μετά την υποβολή της φόρμας.

target Η ιδιότητα μπορεί να οριστεί σε μια από τις εξής τιμές:

Τιμή Περιγραφή
_blank Η απάντηση εμφανίζεται σε νέα θύρα ή καρτέλα.
_self Η απάντηση εμφανίζεται στην τρέχουσα θύρα.
_parent Η απάντηση εμφανίζεται στον γονικό πλαίσιο.
_top Η απάντηση εμφανίζεται στο ολόκληρο σώμα της θύρας.
framename Η απάντηση εμφανίζεται στο ονομασμένο iframe.

Η προεπιλεγμένη τιμή είναι _self, αυτό σημαίνει ότι η απάντηση θα ανοίξει στην τρέχουσα θύρα.

Παράδειγμα

Σε αυτή την περίπτωση, η υποβολή θα ανοίξει τα αποτελέσματα σε νέα καρτέλα του περιηγητή:

<form action="/action_page.php" target="_blank">

Δοκιμάστε το προσωπικά

Ιδιότητα Method

Η ιδιότητα method καθορίζει τη μέθοδο HTTP που θα χρησιμοποιηθεί για την υποβολή δεδομένων της φόρμας.

Τα δεδομένα της φόρμας μπορούν να χρησιμοποιηθούν ως μεταβλητές URL (χρησιμοποιώντας method="get") ή ως HTTP post γεγονός (χρησιμοποιώντας method="post") να σταλεί.

Η προεπιλεγμένη μέθοδος HTTP για την υποβολή δεδομένων της φόρμας είναι το GET.

Παράδειγμα

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

<form action="/action_page.php" method="get">

Δοκιμάστε το προσωπικά

Παράδειγμα

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

<form action="/action_page.php" method="post">

Δοκιμάστε το προσωπικά

Σημείωση για το GET:

  • Προσθήκη των δεδομένων της φόρμας στη URL στην μορφή ονόματος/τιμής
  • Μην χρησιμοποιείτε ποτέ το GET για την αποστολή ευαίσθητων δεδομένων! (Τα δεδομένα της φόρμας που υποβάλλονται εμφανίζονται στη URL)
  • Η διάρκεια της URL είναι περιορισμένη (2048 χαρακτήρες)
  • Πολύ χρήσιμο για την υποβολή φόρμας όπου ο χρήστης θέλει να προσθέσει τα αποτελέσματα ως ετικέτες.
  • Το GET είναι κατάλληλο για μη ασφαλή δεδομένα, όπως οι αλφαβητικές ερωτήσεις στο Google

Σημείωση για το POST:

  • Προσθήκη των δεδομένων της φόρμας στο σώμα της HTTP αίτησης (δεν εμφανίζονται τα δεδομένα της φόρμας που υποβάλλονται στη URL)
  • Το POST δεν έχει περιορισμό μεγέθους και μπορεί να χρησιμοποιηθεί για την αποστολή μεγάλου όγκου δεδομένων.
  • Η υποβολή φόρμας με POST δεν μπορεί να προσθέσει ετικέτες.

Σημείωση:Αν τα δεδομένα της φόρμας περιέχουν ευαίσθητες πληροφορίες ή προσωπικά δεδομένα, χρησιμοποιήστε απαραίτητα το POST!

Ιδιότητα Autocomplete

autocomplete Η ιδιότητα καθορίζει αν η φόρμα θα ανοίξει τη λειτουργία αυτόματης συμπλήρωσης.

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

Παράδειγμα

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

<form action="/action_page.php" autocomplete="on">

Δοκιμάστε το προσωπικά

Ιδιότητα Novalidate

novalidate Η ιδιότητα είναι μια布尔属性.

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

Παράδειγμα

Φόρμα χωρίς ρύθμιση novalidate:

<form action="/action_page.php" novalidate>

Δοκιμάστε το προσωπικά

Λίστα όλων των ιδιοτήτων του <form>

Ιδιότητες Περιγραφή
accept-charset Ορίζει την κωδικοποίηση χαρακτήρων που θα χρησιμοποιηθεί για την υποβολή της φόρμας.
action Ορίζει πού θα αποσταλεί η φόρμα κατά την υποβολή.
autocomplete Ορίζει αν η λειτουργία αυτόματης συμπλήρωσης (έκδοση) της φόρμας θα είναι ενεργοποιημένη.
enctype Ορίζει πώς θα κωδικοποιηθούν τα δεδομένα της φόρμας όταν υποβληθούν στο διακομιστή (μόνο για method="post").
method Ορίζει τη μέθοδο HTTP που θα χρησιμοποιηθεί για την αποστολή δεδομένων της φόρμας.
name Ορίζει το όνομα της φόρμας.
novalidate Ορίζει ότι η φόρμα δεν πρέπει να ελεγχθεί κατά την υποβολή.
rel Ορίζει τη σχέση μεταξύ του πόρου που συνδέεται και του τρέχοντος έγγραφου.
target Ορίζει πού θα εμφανιστεί η απάντηση που λαμβάνεται μετά την υποβολή της φόρμας.