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

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

Ιδιότητα Action

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

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

Στο παρακάτω παράδειγμα, τα δεδομένα του φόρμαριού αποσταλούν στον φάκελο που ονομάζεται "action_page.php". Ο φάκελος αυτός περιέχει το σενάριο server-side που χειρίζεται τα δεδομένα του φόρμαριού:

Παράδειγμα

Μετά την υποβολή, τα δεδομένα του φόρμαριού θα σταλούν στον "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 Ορίζει πού θα εμφανιστεί η απάντηση που λαμβάνεται μετά την υποβολή της φόρμας.