Η HTML φόρμα

Η HTML φόρμα χρησιμοποιείται για τη συλλογή διαφορετικών τύπων δεδομένων εισόδου του χρήστη.

<form> στοιχείο

Η HTML φόρμα χρησιμοποιείται για τη συλλογή δεδομένων εισόδου του χρήστη.

<form> στοιχείο καθορίζει την HTML φόρμα:

Παράδειγμα

<form>
 .
form elements
 .
</form>

Η HTML φόρμα περιέχειΣτοιχεία φόρμας.

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

Στοιχεία του <input>

<input> Τα στοιχεία είναι τα πιο σημαντικάΣτοιχεία φόρμας.

Τα στοιχεία του <input> έχουν πολλές μορφές, ανάλογα με τα διαφορετικά type Απόδειξη.

Αυτοί είναι οι τύποι που χρησιμοποιούνται στο κεφάλαιο αυτό:

Τύπος Περιγραφή
text Ορισμός κανονικής εισαγωγής κειμένου.
radio Ορισμός εισαγωγής κουμπιών επιλογής (επιλογή μιας επιλογής)
submit Ορισμός κουμπιού υποβολής (υποβολή φόρμας)

Σημείωση:Θα μάθετε περισσότερα για τις τύπους εισόδου αργότερα στο έργο.

Εισαγωγή κειμένου

<input type="text"> Ορισμός γιαΕισαγωγή κειμένουΤο πεδίο εισαγωγής γραμμής

Παράδειγμα

<form>
 Όνομα:<br>
<input type="text" name="firstname">
<br>
 Επίθετο:<br>
<input type="text" name="lastname">
</form>

Προσπαθήστε προσωπικά

Στο πρόγραμμα περιήγησης, θα εμφανίζεται ως εξής:

Όνομα:


Επίθετο:

Σημείωση:Η φόρμα δεν είναι ορατή. Επίσης, η προεπιλεγμένη πλάτος του πεδίου κειμένου είναι 20 χαρακτήρες.

Εισαγωγή κουμπιών επιλογής

<input type="radio"> ΟρισμόςΚουμπιά επιλογής.

Οι επιλογές κουμπιών επιλογής επιτρέπουν στον χρήστη να επιλέξει ένα από τα περιορισμένα επιλογές:

Παράδειγμα

<form>
<input type="radio" name="sex" value="male" checked>Άνδρας
<br>
<input type="radio" name="sex" value="female">Γυναίκα
</form>

Προσπαθήστε προσωπικά

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

Άνδρας

Γυναίκα

Κουμπί υποβολής

<input type="submit"> Ορισμός για την υποβολή σεΟ επεξεργαστής φόρμας(form-handler)ΥποβολήΤα κουμπιά της φόρμας

Ο επεξεργαστής φόρμας είναι η ιστοσελίδα διακομιστή που περιέχει τον κώδικα για την επεξεργασία των δεδομένων εισόδου.

Ο επεξεργαστής φόρμας στην φόρμα action Καθορίζεται στο attribute:

Παράδειγμα

<form action="action_page.php">
Όνομα:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Επίθετο:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Προσπαθήστε προσωπικά

Στο πρόγραμμα περιήγησης, θα εμφανίζεται ως εξής:

Όνομα:


Επίθετο:


Απόδειξη attribute

Απόδειξη attributeΟρισμός της ενέργειας που εκτελείται κατά την υποβολή της φόρμας.

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

Συνήθως, η φόρμα υποβάλλεται σε ιστοσελίδα του διακομιστή web.

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

<form action="action_page.php">

Αν παραλείφεται η ιδιότητα action, η action ορίζεται ως η τρέχουσα σελίδα.

Ιδιότητα Method

Ιδιότητα methodΟρίζει τον μέθοδο HTTP που χρησιμοποιείται κατά την υποβολή της φόρμας (GET ή POST)

<form action="action_page.php" method="GET">

ή

<form action="action_page.php" method="POST">

Πότε να χρησιμοποιήσετε το GET?

Μπορείτε να χρησιμοποιήσετε το GET (προεπιλεγμένη μέθοδος):

Αν η υποβολή της φόρμας είναι παθητική (π.χ. αναζήτηση搜索引擎), και δεν περιέχει ευαίσθητες πληροφορίες.

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

action_page.php?firstname=Mickey&lastname=Mouse

Σημείωση:Το GET είναι κατάλληλο για την υποβολή μικρών ποσοτήτων δεδομένων. Ο περιηγητής ορίζει ορίσεις περιορισμού.

Πότε να χρησιμοποιήσετε το POST?

Πρέπει να χρησιμοποιήσετε το POST:

Αν η φόρμα ενημερώνει δεδομένα ή περιέχει ευαίσθητες πληροφορίες (π.χ. κωδικός πρόσβασης).

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

Ιδιότητα Name

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

Σε αυτό το παράδειγμα θα υποβληθεί μόνο το πεδίο εισαγωγής "Επίθετο":

Παράδειγμα

<form action="action_page.php">
Όνομα:<br>
<input type="text" value="Mickey">
<br>
Επίθετο:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Προσπαθήστε προσωπικά

Χρησιμοποιήστε το <fieldset> για τη συνο组合ημένη των δεδομένων της φόρμας

<fieldset> Τα στοιχεία συνο组合ημένα στη φόρμα

<legend> Ο στοιχείο είναι ο τίτλος του στοιχείου <fieldset>.

Παράδειγμα

<form action="action_page.php">
<fieldset>
<legend>Προσωπικές πληροφορίες:</legend>
Όνομα:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Επίθετο:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Προσπαθήστε προσωπικά

Ο παρακάτω κώδικας HTML φαίνεται στον περιηγητή ως εξής:

Προσωπικές Πληροφορίες:
Όνομα:


Επίθετο:


Ιδιότητες Φόρμας HTML

Το HTML <form> στοιχείο, με όλες τις πιθανές ιδιότητες, είναι το εξής:

Παράδειγμα

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Παρακάτω είναι η λίστα των ιδιοτήτων του <form>:

Ιδιότητες Περιγραφή
accept-charset Ορίζει το σύνολο χαρακτήρων που χρησιμοποιείται στη φόρμα που θα υποβληθεί (προεπιλεγμένο: σύνολο χαρακτήρων της σελίδας).
action Ορίζει την διεύθυνση URL (URL) όπου θα υποβληθεί η φόρμα (σελίδα υποβολής).
autocomplete Ορίζει αν ο περιηγητής θα ολοκληρώσει αυτόματα τη φόρμα (προεπιλεγμένο: ενεργοποιημένο).
enctype Ορίζει τον κώδικα κωδικοποίησης των δεδομένων που θα υποβληθούν (προεπιλεγμένο: url-encoded).
method Ορίζει τη μέθοδο HTTP που χρησιμοποιείται στη σύνταξη της φόρμας (προεπιλεγμένο: GET).
name Ορίζει το όνομα της φόρμας που αναγνωρίζεται (για DOM: document.forms.name).
novalidate Ορίζει ότι ο περιηγητής δεν θα ελέγξει τη φόρμα.
target Ορίζει το στόχο της διεύθυνσης της ιδιότητας action (προεπιλεγμένο: _self).

Σημείωση:Θα μάθετε περισσότερα για τις ιδιότητες στις παρακάτω ενότητες.