Τύποι εισόδου HTML

Αυτό το κεφάλαιο περιγράφει τον τύπο εισόδου του στοιχείου <input>.

Τύπος εισόδου: text

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

Παράδειγμα

<form>
 Όνομα:<br>
<input type="text" name="firstname">
<br>
 Επώνυμο:<br>
<input type="text" name="lastname">
</form> 

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

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

Όνομα:


Επώνυμο:

Τύπος εισόδου: password

<input type="password"> ΟρισμόςΠεδίο κωδικού

Παράδειγμα

<form>
 Όνομα χρήστη:<br>
<input type="text" name="username">
<br>
 Κωδικός πρόσβασης χρήστη:<br>
<input type="password" name="psw">
</form> 

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

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

Όνομα χρήστη:


Κωδικός πρόσβασης χρήστη:

Σημείωση:Τα χαρακτήρες του πεδίου password θα υποστούν επεξεργασία μασκών (από το οποίο θα εμφανίζονται αστέρια ή γεμάτοι κύκλοι).

Τύπος εισόδου: submit

<input type="submit"> ΟρισμόςΥποβολήΤα δεδομένα της φόρμας σεΤο πρόγραμμα επεξεργασίας φόρμαςτων κουμπιών.

Το πρόγραμμα επεξεργασίας φόρμας (form-handler) είναι συνήθως μια σελίδα διακομιστή που περιέχει σενάρια για την επεξεργασία δεδομένων εισόδου.

Στο όρισμα action του φόρματος καθορίζεται ο επεξεργαστής φόρματος (form-handler):

Παράδειγμα

<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> 

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

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

Όνομα:


Επώνυμο:


Αν παραλείψετε την ιδιότητα value του κουμπιού υποβολής, το κουμπί θα λάβει το προεπιλεγμένο κείμενο:

Παράδειγμα

<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">
</form> 

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

Τύπος Εισόδου: ραδιόφωνο

<input type="radio"> Ορισμός κουμπιών ραδιόφωνου.

Οι κουμπιά ραδιόφωνου επιτρέπουν στον χρήστη να επιλέξει ΜΟΝΟ ΜΙΑ επιλογή από έναν περιορισμένο αριθμό επιλογών:

Παράδειγμα

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

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

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

Άνδρας

Γυναίκα

Τύπος Εισόδου: κουμπί επιλογής

<input type="checkbox"> Ορισμός κουμπιών επιλογής.

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

Παράδειγμα

<form>
<input type="checkbox" name="vehicle" value="Bike">Εγώ έχω μια ποδήλατο
<br>
<input type="checkbox" name="vehicle" value="Car">Εγώ έχω ένα αυτοκίνητο 
</form> 

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

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

Εγώ έχω μια ποδήλατο

Εγώ έχω ένα αυτοκίνητο

Τύπος Εισόδου: κουμπί

<input type="button"> Ορισμόςκουμπί

Παράδειγμα

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

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

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

Τύποι Εισόδου HTML5

Το HTML5 προσθέτει πολλαπλούς νέους τύπους εισόδου:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Σημείωση:Οι τύποι εισόδου που δεν υποστηρίζονται από παλιούς προγραμματιστές περιήγησης θεωρούνται τύπος εισόδου text.

Τύπος εισόδου: number

<input type="number"> Χρησιμοποιείται για πεδία εισόδου που πρέπει να περιέχουν αριθμητικές τιμές.

Μπορείτε να περιορίσετε τα αριθμητικά.

Βασισμένο στο υποστήριξη του προγράμματος περιήγησης, οι περιορισμοί μπορούν να εφαρμοστούν στο πεδίο εισόδου.

Παράδειγμα

<form>
  Ποσότητα (μέσα από 1 και 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

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

Περιορισμοί Εισόδου

Εδώ παρατίθενται μερικοί συχνά χρησιμοποιούμενοι περιορισμοί εισόδου (αποτελούνται από νέες λειτουργίες του HTML5):

Πρότυπο Περιγραφή
disabled Ορίζει αν το πεδίο εισόδου πρέπει να είναι απενεργοποιημένο.
max Ορίζει την μέγιστη τιμή του πεδίου εισόδου.
maxlength Ορίζει τον μέγιστο αριθμό χαρακτήρων του πεδίου εισόδου.
min Ορίζει την ελάχιστη τιμή του πεδίου εισόδου.
pattern Ορίζει την εξουσιαστική έκφραση που ελέγχει την τιμή εισόδου.
readonly Ορίζει το πεδίο εισόδου ως αναγνωστικό (μη ενημερώσιμο).
required Ορίζει αν το πεδίο εισόδου είναι απαραίτητο (απαιτείται συμπλήρωση).
size Ορίζει το πλάτος του πεδίου εισόδου (σε χαρακτήρες).
step Ορίζει την νόμιμη διαφορά αριθμών του πεδίου εισόδου.
value Ορίζει την προεπιλεγμένη τιμή του πεδίου εισόδου.

Θα μάθετε περισσότερα για τους περιορισμούς εισόδου στο επόμενο κεφάλαιο.

Παράδειγμα

<form>
  Ποσότητα:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

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

Τύπος εισόδου: date

<input type="date"> Χρησιμοποιείται για πεδία εισόδου που πρέπει να περιέχουν ημερομηνία.

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Γενέθλια:
  <input type="date" name="bday">
</form>

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

Μπορείτε να προσθέσετε περιορισμούς στην είσοδο:

Παράδειγμα

<form>
  Εισάγετε μια ημερομηνία πριν από την 01-01-1980:
  <input type="date" name="bday" max="1979-12-31"><br>
  Εισάγετε μια ημερομηνία μετά το 2000-01-01:
  Εισάγετε μια ημερομηνία μετά το 2000-01-01:<br>
</form>

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

Τύπος εισαγωγής: color

<input type="color"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν χρώματα.

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας χρώματος θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Επιλέξτε το αγαπημένο σας χρώμα:
  <input type="color" name="favcolor">
</form>

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

Τύπος εισαγωγής: range

<input type="range"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν τιμές εντός συγκεκριμένου διαστήματος.

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

Παράδειγμα

<form>
  <input type="range" name="points" min="0" max="10">
</form>

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

Μπορείτε να χρησιμοποιήσετε τις παρακάτω ιδιότητες για να καθορίσετε περιορισμούς: min, max, step, value.

Τύπος εισαγωγής: month

<input type="month"> Επιτρέπει στον χρήστη να επιλέξει μήνα και έτος.

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Γενέθλιας (μήνας και έτος):
  <input type="month" name="bdaymonth">
</form>

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

Τύπος εισαγωγής: week

<input type="week"> Επιτρέπει στον χρήστη να επιλέξει εβδομάδα και έτος.

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Επιλέξτε μια εβδομάδα:
  <input type="week" name="week_year">
</form>

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

Τύπος εισαγωγής: time

<input type="time"> Επιτρέπει στον χρήστη να επιλέξει ώρα (χωρίς ζώνη ώρας).

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ώρας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Επιλέξτε μια ώρα:
  <input type="time" name="usr_time">
</form>

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

Τύπος εισαγωγής: datetime

<input type="datetime"> Επιτρέπει στον χρήστη να επιλέξει ημερομηνία και ώρα (με ζώνη ώρας).

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Γενέθλιας (ημερομηνία και ώρα):
  <input type="datetime" name="bdaytime">
</form>

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

Τύπος εισαγωγής: datetime-local

<input type="datetime-local"> Επιτρέπει στον χρήστη να επιλέξει ημερομηνία και ώρα (χωρίς ζώνη ώρας).

Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.

Παράδειγμα

<form>
  Γενέθλιας (ημερομηνία και ώρα):
  <input type="datetime-local" name="bdaytime">
</form>

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

Τύπος εισαγωγής: email

<input type="email"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν διεύθυνση email.

Βασισμένο στη στήριξη του περιηγητή, μπορεί να επαληθεύσει αυτόματα την διεύθυνση email κατά την υποβολή.

Ορισμένα smartphone αναγνωρίζουν τον τύπο email και προσθέτουν "\.com" στο πληκτρολόγιο για να ταιριάζει με την εισαγωγή email.

Παράδειγμα

<form>
  Email:
  <input type="email" name="email">
</form>

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

Τύπος εισαγωγής: search

<input type="search"> Χρησιμοποιείται για πεδία αναζήτησης (το μοτίβο του πεδίου αναζήτησης μοιάζει με το μοτίβο του κειμένου).

Παράδειγμα

<form>
  Αναζήτηση Google:
  <input type="search" name="googlesearch">
</form>

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

Τύπος εισαγωγής: tel

<input type="tel"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν αριθμό τηλεφώνου.

Μόνο το Safari 8 υποστηρίζει τον τύπο tel.

Παράδειγμα

<form>
  Τηλέφωνο:
  <input type="tel" name="usrtel">
</form>

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

Τύπος εισαγωγής: url

<input type="url"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν διεύθυνση URL.

Βασισμένο στη στήριξη του περιηγητή, μπορεί να επαληθεύσει αυτόματα το πεδίο url κατά την υποβολή.

Ορισμένα smartphone αναγνωρίζουν τον τύπο url και προσθέτουν "\.com" στο πληκτρολόγιο για να ταιριάζει με την εισαγωγή url.

Παράδειγμα

<form>
  Προσθέστε την ιστοσελίδα σας:
  <input type="url" name="homepage">
</form>

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