Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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”> ορίζει ένα πεδίο εισαγωγής μονής γραμμής για κείμενο:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="text" name="username">
<input type="text" name="username">
<input type="text" name="username">

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="password" name="password">
<input type="password" name="password">
<input type="password" name="password">

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

[adinserter block=”2″]

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<form action="/form-handler" method="post">
<!-- Άλλα στοιχεία φόρμας -->
<input type="submit" value="Υποβολή">
</form>
<form action="/form-handler" method="post"> <!-- Άλλα στοιχεία φόρμας --> <input type="submit" value="Υποβολή"> </form>
<form action="/form-handler" method="post">
  <!-- Άλλα στοιχεία φόρμας -->
  <input type="submit" value="Υποβολή">
</form>

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="reset" value="Επαναφορά">
<input type="reset" value="Επαναφορά">
<input type="reset" value="Επαναφορά">

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="radio" name="gender" value="male"> Άνδρας
<input type="radio" name="gender" value="female"> Γυναίκα
<input type="radio" name="gender" value="other"> Άλλο
<input type="radio" name="gender" value="male"> Άνδρας <input type="radio" name="gender" value="female"> Γυναίκα <input type="radio" name="gender" value="other"> Άλλο
<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”> χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν ένα χρώμα.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας χρώματος στο πεδίο εισαγωγής:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="color" name="color">
<input type="color" name="color">
<input type="color" name="color">

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="date" name="birthdate">
<input type="date" name="birthdate">
<input type="date" name="birthdate">

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

[adinserter block=”3″]

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="datetime-local" name="eventdatetime">
<input type="datetime-local" name="eventdatetime">
<input type="datetime-local" name="eventdatetime">

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="email" name="email">
<input type="email" name="email">
<input type="email" name="email">

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<input type="image" src="submit_button.png" alt="Submit">
<input type="image" src="submit_button.png" alt="Submit">
<input type="image" src="submit_button.png" alt="Submit">

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

21 Αυγούστου, 2023
top
error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων