Αtribούτημα form* Εισόδου HTML

Εξεταζόμενα μαθήματα <input> Προτεινόμενα μαθήματα: Εισαγωγή στο HTML Ιδιότητες.

Η διαφορά του στοιχείου form*

του input Η ιδιότητα form Η ιδιότητα form <input> Η ιδιότητα καθορίζει

Το στοιχείο ανήκει στο φόρμα.

Παράδειγμα

Η τιμή αυτής της ιδιότητας πρέπει να ισούται με ην τιμή του attribute id του στοιχείου <form> που ανήκει.

Το πεδίο εισαγωγής βρίσκεται εκτός του HTML φόρματος (αλλά είναι μέρος του φόρματος):
  <label for="fname">Επώνυμο:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Υποβολή">
</form>
<label for="lname">Όνομα:</label>
<form action="/action_page.php" id="form1">

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

<input type="text" id="lname" name="lname" form="form1">

του input formaction Η ιδιότητα formaction

Σημείωση:Η ιδιότητα καθορίζει την URL του αρχείου που θα χειριστεί την είσοδο (δεδομένα) κατά την υποβολή του φόρματος. <form> το attribute θα καλύπτει Η ιδιότητα Ιδιότητες.

formaction Η ιδιότητα εφαρμόζεται στους εξής τύπους εισόδου: submit και image.

Παράδειγμα

HTML φόρμα με δύο κουμπιά υποβολής που έχουν διαφορετικές ενέργειες (action):

<form action="/action_page.php">
  <label for="fname">Επώνυμο:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Όνομα:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Υποβολή">
  <input type="submit" formaction="/action_page2.php" value="με υποβολή ως διαχειριστής">
</form>

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

Η ιδιότητα formenctype

του input formenctype Η ιδιότητα καθορίζει πώς θα κωδικοποιηθούν τα δεδομένα του φόρματος κατά την υποβολή (μόνο για φόρμες με method="post").

Σημείωση:Αυτή η ιδιότητα θα καλύψει <form> Η ιδιότητα enctype του στοιχείου.

formenctype Η ιδιότητα εφαρμόζεται στους εξής τύπους εισόδου: submit και image.

Παράδειγμα

Η φόρμα έχει δύο κουμπιά υποβολής. Το ένα στέλνει δεδομένα φόρματος με προεπιλεγμένη κωδικοποίηση, το άλλο στέλνει δεδομένα φόρματος με κωδικοποίηση "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Όνομα:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Υποβολή">
  <input type="submit" formenctype="multipart/form-data"
  value="με κωδικοποίηση Multipart/form-data"
</form>

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

Η ιδιότητα formmethod

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

Σημείωση:Αυτή η ιδιότητα θα καλύψει <form> Η ιδιότητα method του στοιχείου.

formmethod Η ιδιότητα εφαρμόζεται στους εξής τύπους εισόδου: submit και image.

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

Σημεία προσοχής για το GET:

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

Σημεία προσοχής για το POST:

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

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

Παράδειγμα

Η φόρμα έχει δύο κουμπιά υποβολής. Το πρώτο στέλνει τα δεδομένα της φόρμας με method="get". Το δεύτερο στέλνει τα δεδομένα της φόρμας με method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Επώνυμο:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Όνομα:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Υποβολή με GET">
  <input type="submit" formmethod="post" value="Υποβολή με POST">
</form>

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

η ιδιότητα formtarget

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

Σημείωση:Αυτή η ιδιότητα θα καλύψει <form> του στοιχείου target

η ιδιότητα formtarget Η ιδιότητα εφαρμόζεται στους εξής τύπους εισόδου: submit και image.

Παράδειγμα

Η φόρμα έχει δύο κουμπιά υποβολής με διαφορετικά στόχους παραθύρων:

<form action="/action_page.php">
  <label for="fname">Επώνυμο:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Όνομα:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Υποβολή">
  <input type="submit" formtarget="_blank" value="Υποβολή σε νέο παράθυρο/ετικέτα">
</form>

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

η ιδιότητα formnovalidate

του input formnovalidate Η ιδιότητα καθορίζει ότι η υποβολή δεν πρέπει να ελέγχει το στοιχείο <input> κατά την παράδοση.

Σημείωση:Αυτή η ιδιότητα θα καλύψει <form> ιδιότητας novalidate του στοιχείου.

formnovalidate Η ιδιότητα εφαρμόζεται στα εξής τύποι εισαγωγής: submit.

Παράδειγμα

Φόρμα με δύο κουμπιά υποβολής (με επαλήθευση και χωρίς επαλήθευση):

<form action="/action_page.php">
  <label for="email">Εισάγετε το email σας:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Υποβολή">
  <input type="submit" formnovalidate="formnovalidate">
  value="Υποβολή χωρίς επαλήθευση">
</form>

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

Ιδιότητα novalidate

novalidate Η ιδιότητα είναι <form> Ιδιότητες.

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

Παράδειγμα

Ορίζει ότι δεν θα γίνει επαλήθευση οποιωνδήποτε δεδομένων φόρμας κατά την υποβολή:

<form action="/action_page.php" novalidate>
  <label for="email">Εισάγετε το email σας:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Υποβολή">
</form>

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

Εлементα Form και Input HTML

Ετικέτα Περιγραφή
<form> Ορισμός HTML φόρμας για χρήση εισαγωγής από τον χρήστη
<input> Ορισμός ελέγχων εισαγωγής

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