Η ετικέτα input
Η ετικέτα input δημιουργεί διάφορα στοιχεία
φόρμας HTML: συνηθισμένο πεδίο εισαγωγής, πεδίο για
εισαγωγή κωδικού πρόσβασης, πλαίσιο ελέγχου checkbox,
κουμπιά radio (επιλογέας), κουμπί.
Η ετικέτα input πρέπει να βρίσκεται μέσα στην ετικέτα
form.
Αυτό δεν είναι υποχρεωτικό, αλλά απαραίτητο για την αποστολή
δεδομένων στον διακομιστή και την επακόλουθη επεξεργασία τους
μέσω PHP.
Δεν απαιτεί ετικέτα κλεισίματος.
Ιδιότητες (Attributes)
| Ιδιότητα | Περιγραφή |
|---|---|
type |
Ορίζει τον τύπο του πεδίου εισαγωγής. Οι επιλογές βλέπε παρακάτω. |
value |
Η προεπιλεγμένη τιμή στο πεδίο εισαγωγής. Στην περίπτωση κουμπιού ορίζει το κείμενό του.
Για περισσότερες λεπτομέρειες βλέπε την ιδιότητα value.
|
placeholder |
Υπόδειξη στο πεδίο εισαγωγής, για περισσότερες λεπτομέρειες βλέπε
την ιδιότητα placeholder.
|
name |
Το όνομα του πεδίου εισαγωγής. Απαιτείται για να ανακτηθούν τα δεδομένα του πεδίου εισαγωγής στο PHP. Για τη σωστή λειτουργία της φόρμας, τα ονόματα των πεδίων εισαγωγής δεν πρέπει να συμπίπτουν μεταξύ τους (στην ίδια φόρμα). Εάν συμπίπτουν - στο PHP θα ληφθούν τα δεδομένα από το πεδίο εισαγωγής που βρίσκεται πιο κάτω στον κώδικα HTML. |
disabled |
Απενεργοποιεί το στοιχείο φόρμας (όχι μόνο το input, αλλά σχεδόν οποιοδήποτε),
για περισσότερες λεπτομέρειες βλέπε την ιδιότητα disabled.
|
Τιμές της ιδιότητας type
| Τιμή | Περιγραφή |
|---|---|
text |
Δημιουργεί ένα συνηθισμένο πεδίο εισαγωγής κειμένου. |
password |
Δημιουργεί πεδίο εισαγωγής κειμένου για κωδικό πρόσβασης. Δοκιμάστε να πληκτρολογήσετε κείμενο σε αυτό - θα εμφανιστεί με αστερίσκους. |
checkbox |
Δημιουργεί ένα πλαίσιο ελέγχου (checkbox).
Για περισσότερες λεπτομέρειες βλέπε checkbox.
|
radio |
Δημιουργεί έναν επιλογέα radio.
Για περισσότερες λεπτομέρειες βλέπε radio.
|
hidden |
Δημιουργεί ένα κρυφό πεδίο input, το οποίο δεν θα είναι ορατό στην οθόνη, αλλά θα στέλνει τα δεδομένα
που περιέχονται στην ιδιότητα value στο διακομιστή.
|
button |
Δημιουργεί ένα κουμπί. Το πάτημα αυτού του κουμπιού
δεν θα στέλνει τη φόρμα στο διακομιστή. Μπορεί να χρησιμοποιηθεί μέσα σε
σύνδεσμο ή μέσω JavaScript.
Από προεπιλογή το κουμπί δεν έχει κείμενο (παράδειγμα κουμπιού χωρίς κείμενο: ),
ορίζεται με την ιδιότητα value.
Βλέπε επίσης την ετικέτα button,
η οποία επίσης δημιουργεί κουμπί.
|
submit |
Δημιουργεί ένα κουμπί που θα στέλνει τα δεδομένα στο διακομιστή.
Το κείμενο του κουμπιού εξαρτάται από το πρόγραμμα περιήγησης, μπορεί να αλλάξει
με την ιδιότητα value.
Βλέπε επίσης την ετικέτα button,
η οποία επίσης δημιουργεί κουμπί.
|
reset |
Δημιουργεί ένα κουμπί που καθαρίζει τη συμπληρωμένη φόρμα.
Το κείμενο του κουμπιού εξαρτάται από το πρόγραμμα περιήγησης, μπορεί να αλλάξει
με την ιδιότητα value.
|
file |
Δημιουργεί ένα κουμπί επιλογής αρχείου. Απαγορεύεται η αλλαγή του σχεδιασμού αυτού του κουμπιού
μέσω CSS (ωστόσο υπάρχουν περίπλοκοι τρόποι). Εάν απαιτείτε ένα τέτοιο πεδίο στη φόρμα, τότε
η ετικέτα form πρέπει να έχει την ιδιότητα
enctype με τιμή multipart/form-data.
|
Νέες τιμές της ιδιότητας type στο HTML5
Αυτές οι τιμές της ιδιότητας είναι νέες, εμφανίστηκαν μόνο στο HTML5, επομένως σε ορισμένα προγράμματα περιήγησης μπορεί να μην λειτουργούν ή να λειτουργούν διαφορετικά σε διαφορετικά προγράμματα περιήγησης.
Σε περίπτωση που το πρόγραμμα περιήγησης δεν μπορεί να κατανοήσει το περιεχόμενο
της ιδιότητας type (για παράδειγμα, εάν αυτό
δεν υποστηρίζεται ή εισήχθη λανθασμένα),
θα θεωρήσει το στοιχείο ως συνηθισμένο πεδίο εισαγωγής κειμένου,
σαν να έχει η τιμή type την τιμή
text.
Δοκιμάστε τα παρακάτω παραδείγματα σε
διαφορετικά προγράμματα περιήγησης. Προσπαθήστε να εισάγετε
κείμενο στα πεδία και πατήστε στο κουμπί αποστολής.
Εάν το κείμενο είναι εσφαλμένο ή το πεδίο είναι κενό -
το πρόγραμμα περιήγησης θα εμφανίσει σφάλμα.
Για παράδειγμα, εάν στο
πεδίο με τύπο email εισαχθεί μη έγκυρο
email - το πρόγραμμα περιήγησης δεν θα επιτρέψει την αποστολή της φόρμας και
θα εμφανίσει μήνυμα σφάλματος (το κείμενο σφάλματος
και η εμφάνισή του στο html css δεν μπορεί να αλλάξει).
Εάν το πεδίο είναι κενό - το πρόγραμμα περιήγησης θα εμφανίσει επίσης σφάλμα,
αυτό επιτυγχάνεται με την ιδιότητα required:
| Τιμή | Περιγραφή |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
