2.4 Οι τύποι εισαγωγής στην HTML

Αυτοί είναι οι διάφοροι τύποι εισαγωγής που μπορείτε να χρησιμοποιήσετε στο στοιχείο <input> του HTML:

<input type=”button”>
<input type=”checkbox”>
<input type=”color”>
<input type=”date”>
<input type=”datetime-local”>
<input type=”email”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
<input type=”month”>
<input type=”number”>
<input type=”password”>
<input type=”radio”>
<input type=”range”>
<input type=”reset”>
<input type=”search”>
<input type=”submit”>
<input type=”tel”>
<input type=”text”>
<input type=”time”>
<input type=”url”>
<input type=”week”>

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

Ο τύπος εισαγωγής “text” με τη χρήση του στοιχείου <input type=”text”> ορίζει ένα πεδίο εισαγωγής μονής γραμμής για κείμενο:

<input type="text" name="username">

Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “text” με το όνομα “username”. Ο χρήστης μπορεί να εισάγει μονής γραμμής κείμενο σε αυτό το πεδίο.

Ο τύπος εισαγωγής “password” με τη χρήση του στοιχείου <input type=”password”> ορίζει ένα πεδίο εισαγωγής για κωδικό πρόσβασης:

<input type="password" name="password">

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

Ο τύπος εισαγωγής “submit” με τη χρήση του στοιχείου <input type=”submit”> ορίζει ένα κουμπί για την υποβολή των δεδομένων της φόρμας σε έναν επεξεργαστή της φόρμας.
Ο επεξεργαστής της φόρμας είναι συνήθως μια σελίδα στον διακομιστή με ένα σενάριο για την επεξεργασία των εισαγωγών δεδομένων.
Ο επεξεργαστής της φόρμας καθορίζεται στο γνώρισμα “action” της φόρμας:

<form action="/form-handler" method="post">
  <!-- Άλλα στοιχεία φόρμας -->
  <input type="submit" value="Υποβολή">
</form>

Στο παραπάνω παράδειγμα, το στοιχείο <input> τύπου “submit” ορίζει ένα κουμπί με την ετικέτα “Υποβολή”. Όταν ο χρήστης κάνει κλικ σε αυτό το κουμπί, η φόρμα θα υποβάλλεται στον επεξεργαστή της φόρμας που καθορίζεται στο γνώρισμα “action” της φόρμας.

Ο τύπος εισαγωγής “reset” με τη χρήση του στοιχείου <input type=”reset”> ορίζει ένα κουμπί επαναφοράς που θα επαναφέρει όλες τις τιμές της φόρμας στις προεπιλεγμένες τους τιμές:

<input type="reset" value="Επαναφορά">

Στο παραπάνω παράδειγμα, το στοιχείο <input> τύπου “reset” ορίζει ένα κουμπί με την ετικέτα “Επαναφορά”. Όταν ο χρήστης κάνει κλικ σε αυτό το κουμπί, όλες οι τιμές της φόρμας θα επαναφερθούν στις αρχικές τους προεπιλεγμένες τιμές.

Ο τύπος εισαγωγής “radio” με τη χρήση του στοιχείου <input type=”radio”> ορίζει ένα κουμπί επιλογής (radio button).
Τα κουμπιά επιλογής (radio buttons) επιτρέπουν στον χρήστη να επιλέξει ΜΟΝΟ ΜΙΑ από μια πεπερασμένη λίστα επιλογών:

<input type="radio" name="gender" value="male"> Άνδρας
<input type="radio" name="gender" value="female"> Γυναίκα
<input type="radio" name="gender" value="other"> Άλλο

Στο παραπάνω παράδειγμα, οι τρεις επιλογές “Άνδρας”, “Γυναίκα” και “Άλλο” αναπαριστούν τις επιλογές του φύλου. Όταν ο χρήστης επιλέγει μια επιλογή, μόνο η επιλεγμένη τιμή θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί. Το γνώρισμα “name” χρησιμοποιείται για να ομαδοποιήσει τα κουμπιά επιλογής μέσω του κοινού ονόματος “gender”.

Ο τύπος εισαγωγής “color” με τη χρήση του στοιχείου <input type=”color”> χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν ένα χρώμα.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας χρώματος στο πεδίο εισαγωγής:

<input type="color" name="color">

Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “color” με το όνομα “color”. Ο χρήστης μπορεί να επιλέξει ένα χρώμα μέσω του επιλογέα χρώματος που εμφανίζεται. Η επιλεγμένη τιμή χρώματος θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.

Ο τύπος εισαγωγής “date” με τη χρήση του στοιχείου <input type=”date”> χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν μια ημερομηνία.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας ημερομηνίας στο πεδίο εισαγωγής:

<input type="date" name="birthdate">

Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “date” με το όνομα “birthdate”. Ο χρήστης μπορεί να επιλέξει μια ημερομηνία μέσω του επιλογέα ημερομηνίας που εμφανίζεται. Η επιλεγμένη ημερομηνία θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.

Ο τύπος εισαγωγής “datetime-local” με τη χρήση του στοιχείου <input type=”datetime-local”> καθορίζει ένα πεδίο εισαγωγής ημερομηνίας και ώρας, χωρίς ζώνη ώρας.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας ημερομηνίας και ώρας στο πεδίο εισαγωγής:

<input type="datetime-local" name="eventdatetime">

Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “datetime-local” με το όνομα “eventdatetime”. Ο χρήστης μπορεί να επιλέξει μια ημερομηνία και ώρα μέσω του επιλογέα ημερομηνίας και ώρας που εμφανίζεται. Η επιλεγμένη ημερομηνία και ώρα θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.

Ο τύπος εισαγωγής “email” με τη χρήση του στοιχείου <input type=”email”> χρησιμοποιείται για πεδία εισαγωγής που θα πρέπει να περιέχουν μια διεύθυνση email.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, η διεύθυνση email μπορεί να ελέγχεται αυτόματα για εγκυρότητα κατά την υποβολή.
Ορισμένα smartphones αναγνωρίζουν τον τύπο email και προσθέτουν την κατάληξη “.com” στο πληκτρολόγιο για την εισαγωγή διεύθυνσης email:

<input type="email" name="email">

Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “email” με το όνομα “email”. Ο χρήστης μπορεί να εισάγει μια διεύθυνση email σε αυτό το πεδίο, και αν το πρόγραμμα περιήγησης το υποστηρίζει, μπορεί να γίνει έλεγχος εγκυρότητας της διεύθυνσης email. Η εισαγόμενη διεύθυνση email θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.

Ο τύπος εισαγωγής “image” με τη χρήση του στοιχείου <input type=”image”> καθορίζει μια εικόνα ως κουμπί υποβολής (submit).
Η διαδρομή προς την εικόνα καθορίζεται στο γνώρισμα “src”:

<input type="image" src="submit_button.png" alt="Submit">

Στο παραπάνω παράδειγμα, ορίζεται ένα κουμπί υποβολής εικόνας με το όνομα αρχείου “submit_button.png”. Όταν ο χρήστης κάνει κλικ στην εικόνα, η φόρμα θα υποβληθεί. Η εικόνα θα εμφανίζεται ως κουμπί υποβολής και μπορεί να περιέχει οποιαδήποτε εικόνα είναι κατάλληλη για τον σκοπό του κουμπιού υποβολής.

21 Αυγούστου, 2023
top
Ads Blocker Image Powered by Code Help Pro

Εντοπίστηκε αποκλεισμός διαφημίσεων!!! - Ads Blocker Detected!!!

Διαπιστώσαμε ότι χρησιμοποιείτε επεκτάσεις για τον αποκλεισμό διαφημίσεων. Υποστηρίξτε μας απενεργοποιώντας αυτό το πρόγραμμα αποκλεισμού διαφημίσεων.

error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων