Ιδιότητες HTML Input

Η ιδιότητα value

value Η ιδιότητα καθορίζει την αρχική τιμή του πεδίου εισαγωγής:

Παράδειγμα

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

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

Η ιδιότητα readonly

readonly Η ιδιότητα καθορίζει το πεδίο εισαγωγής ως μονόδρομο (μη επιτρεπόμενος επαναπαραγωγή):

Παράδειγμα

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

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

Η ιδιότητα readonly δεν απαιτεί τιμή. Είναι ίση με readonly="readonly".

Η ιδιότητα disabled

disabled Η ιδιότητα καθορίζει το πεδίο εισαγωγής ως απενεργοποιημένο.

Τα απενεργοποιημένα στοιχεία δεν είναι διαθέσιμα και μη κλικάβλεπα.

Τα απενεργοποιημένα στοιχεία δεν θα υποβληθούν.

Παράδειγμα

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

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

Η ιδιότητα disabled δεν απαιτεί τιμή. Είναι ίση με disabled="disabled".

Η ιδιότητα size

size Η ιδιότητα καθορίζει το μέγεθος του πεδίου εισαγωγής (σε χαρακτήρες):

Παράδειγμα

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

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

Η ιδιότητα maxlength

maxlength Η ιδιότητα καθορίζει τη μέγιστη μήκος του πεδίου εισαγωγής:

Παράδειγμα

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

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

Αν οριστεί η ιδιότητα maxlength, ο έλεγχος εισαγωγής δεν θα αποδεχτεί περισσότερους χαρακτήρες από όσους επιτρέπονται.

Η ιδιότητα αυτή δεν παρέχει καμία ανατροφοδότηση. Αν χρειάζεται να ενημερώσετε τον χρήστη, πρέπει να γράψετε κώδικα JavaScript.

Σημείωση：Οι περιορισμοί εισαγωγής δεν είναι αδιάβλητοι. Το JavaScript παρέχει πολλά μέθοδους για την προσθήκη μη νόμιμων εισαγωγών. Για την ασφαλή περιορισμό των εισαγωγών, ο αποδέκτης (ο διακομιστής) πρέπει να ελέγχει τα περιορισμούς ταυτόχρονα.

Ιδιότητες HTML5

Το HTML5 προσθέτει τις εξής ιδιότητες στο <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height και width
  • list
  • min και max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

και προσθέτει τις εξής ιδιότητες στο <form>:

  • autocomplete
  • novalidate

Ιδιότητα autocomplete

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

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

Σημείωση:Μπορείτε να ρυθμίσετε την αυτόματη ολοκλήρωση της φόρμας σε on, ενώ το συγκεκριμένο πεδίο εισαγωγής είναι off, και αντίστροφα.

Η ιδιότητα autocomplete εφαρμόζεται στα <form> και στα ακόλουθα τύποι <input>: text, search, url, tel, email, password, datepickers, range και color.

Παράδειγμα

Αυτόματη ολοκλήρωση ενεργοποιημένης HTML φόρμας (όποιαδήποτε πεδία εισαγωγής είναι off):

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Επίθετο: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

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

Σημείωση:Σε ορισμένους περιηγητές, μπορεί να χρειαστεί να ενεργοποιήσετε χειροκίνητα τη λειτουργία ολοκλήρωσης.}

Η ιδιότητα novalidate

Η ιδιότητα novalidate ανήκει στις ιδιότητες του <form>.

Αν είναι ρυθμισμένο, η novalidate καθορίζει ότι τα δεδομένα της φόρμας δεν θα ελεγχθούν κατά την υποβολή της.

Παράδειγμα

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

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

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

Η ιδιότητα autofocus

Η ιδιότητα autofocus είναι μια μονοτιπική ιδιότητα.

Αν είναι ρυθμισμένο, καθορίζει ότι το στοιχείο <input> θα αποκτήσει αυτόματα προσοχή κατά την φόρτωση της σελίδας.

Παράδειγμα

Κάντε το πεδίο εισαγωγής "First name" να αποκτήσει αυτόματα προσοχή κατά την φόρτωση της σελίδας:

First name:<input type="text" name="fname" autofocus>

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

Η ιδιότητα form

Η ιδιότητα form καθορίζει μια ή περισσότερες φόρμες που ανήκουν στο στοιχείο <input>.

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

Παράδειγμα

Το πεδίο εισαγωγής βρίσκεται εκτός της φόρμας HTML (αλλά εξακολουθεί να ανήκει στη φόρμα):

<form action="action_page.php" id="form1">
   Όνομα: <input type="text" name="fname"><br>
   <input type="submit" value="Συμμετοχή">
</form>
 Last name: <input type="text" name="lname" form="form1">

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

Η ιδιότητα formaction

Η ιδιότητα formaction καθορίζει το URL του αρχείου που θα χειριστεί ο ελέγχτης εισόδου όταν υποβάλλεται η φόρμα.

Η ιδιότητα formaction καλύπτει την ιδιότητα action του στοιχείου <form>.

Η ιδιότητα formaction είναι κατάλληλη για type="submit" και type="image".

Παράδειγμα

Έχει δύο κουμπιά υποβολής και διαφορετικές ενέργειες για HTML φόρμας:

<form action="action_page.php">
   Όνομα: <input type="text" name="fname"><br>
   Επίθετο: <input type="text" name="lname"><br>
   <input type="submit" value="Συμμετοχή"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Υποβάλτε ως διαχειριστής">
</form>

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

Η ιδιότητα formenctype

Η ιδιότητα formenctype καθορίζει πώς θα κωδικοποιηθούν τα δεδομένα του φόρμα (form-data) όταν υποβάλλονται στο διακομιστή (μόνο για φόρμες με method="post").

Η ιδιότητα formenctype καλύπτει την ιδιότητα enctype του στοιχείου <form>.

Η ιδιότητα formenctype είναι ισχύουσα για type="submit" και type="image".

Παράδειγμα

Αποστολή δεδομένων φόρμας (form-data) με προεπιλεγμένη κωδικοποίηση και κωδικοποίηση "multipart/form-data" (δεύτερο κουμπί υποβολής):

<form action="demo_post_enctype.asp" method="post">
   Όνομα: <input type="text" name="fname"><br>
   <input type="submit" value="Συμμετοχή">
   <input type="submit" formenctype="multipart/form-data">
   value="Συμμετοχή ως Multipart/form-data">
</form>

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

Η ιδιότητα formmethod

Η ιδιότητα formmethod καθορίζει τον HTTP μέθοδο που χρησιμοποιείται για την αποστολή δεδομένων φόρμας (form-data) στην URL ενέργειας.

Η ιδιότητα formmethod καλύπτει την ιδιότητα method του στοιχείου <form>.

Η ιδιότητα formmethod είναι ισχύουσα για type="submit" και type="image".

Παράδειγμα

Το δεύτερο κουμπί υποβολής καλύπτει το HTTP μέθοδο της φόρμας:

<form action="action_page.php" method="get">
   Όνομα: <input type="text" name="fname"><br>
   Επίθετο: <input type="text" name="lname"><br>
   <input type="submit" value="Συμμετοχή">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Συμμετοχή με POST">
</form>

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

Η ιδιότητα formnovalidate

Η ιδιότητα novalidate είναι μια μορφή boolean.

Αν οριστεί, καθορίζει ότι δεν θα γίνει επαλήθευση στο στοιχείο <input> κατά την υποβολή της φόρμας.

Η ιδιότητα formnovalidate καλύπτει την ιδιότητα novalidate του στοιχείου <form>.

Η ιδιότητα formnovalidate μπορεί να χρησιμοποιηθεί με type="submit".

Παράδειγμα

Έχει δύο κουμπιά υποβολής στη φόρμα (επαλήθευση και χωρίς επαλήθευση):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Συμμετοχή"><br>
   <input type="submit" formnovalidate value="Συμμετοχή χωρίς επαλήθευση">
</form>

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

Η ιδιότητα formtarget

Η ιδιότητα formtarget ορίζει το όνομα ή τον κωδικό λέξη που καθορίζει το σημείο όπου θα εμφανιστεί η απάντηση μετά την υποβολή του φόρματος.

Η ιδιότητα formtarget καλύπτει την ιδιότητα target του στοιχείου <form>.

Η ιδιότητα formtarget μπορεί να χρησιμοποιηθεί με type="submit" και type="image".

Παράδειγμα

Αυτός ο φόρμας έχει δύο κουμπιά υποβολής, που αντιστοιχούν σε διαφορετικά παράθυρα στόχο：

<form action="action_page.php">
   Όνομα: <input type="text" name="fname"><br>
   Επίθετο: <input type="text" name="lname"><br>
   <input type="submit" value="Υποβολή ως κανονικό">
   <input type="submit" formtarget="_blank">
   value="Υποβολή σε νέο παράθυρο">
</form>

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

Οι ιδιότητες height και width

Οι ιδιότητες height και width ορίζουν το ύψος και το πλάτος του στοιχείου <input>.

Οι ιδιότητες height και width χρησιμοποιούνται μόνο για το <input type="image">.

Σημείωση：Πάντα ορίστε το μέγεθος της εικόνας. Αν ο περιηγητής δεν γνωρίζει το μέγεθος της εικόνας, η σελίδα θα闪烁 κατά τη φόρτωση της εικόνας.

Παράδειγμα

Ορίστε την εικόνα ως κουμπί υποβολής και ρυθμίστε τις ιδιότητες height και width：

<input type="image" src="img_submit.gif" alt="Υποβολή" width="48" height="48">

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

Ιδιότητα list

Η ιδιότητα list αναφέρεται σε ένα στοιχείο <datalist> που περιέχει τις προκαθορισμένες επιλογές του στοιχείου <input>.

Παράδειγμα

Χρησιμοποιήστε το <datalist> για να ρυθμίσετε τις προκαθορισμένες τιμές του στοιχείου <input>：

<input list="browserών">
<datalist id="browserών">
   <option value="Ιντερνέτ Εξπλόρερ">
   <option value="Φάιρεξ">
   <option value="Χρωμάτιο">
   <option value="Οπερά">
   <option value="Σαφάρι">
</datalist>

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

Οι ιδιότητες min και max

Οι ιδιότητες min και max καθορίζουν το ελάχιστο και το μέγιστο όριο του στοιχείου input.

Οι ιδιότητες min και max είναι εφαρμόσιμες στους τύπους εισαγωγής: number, range, date, datetime, datetime-local, month, time και week.

Παράδειγμα

Το στοιχείο input με ελάχιστο και μέγιστο όριο:

Εισάγετε μια ημερομηνία πριν από την 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Εισάγετε μια ημερομηνία μετά την 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Ποσότητα ( μεταξύ 1 και 5):
<input type="number" name="quantity" min="1" max="5">

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

Η ιδιότητα multiple

Η ιδιότητα multiple είναι布尔 attribute.

Αν οριστεί, καθορίζει ότι ο χρήστης μπορεί να εισάγει μια ή περισσότερες τιμές στο στοιχείο input.

Η ιδιότητα multiple είναι εφαρμόσιμη στους παρακάτω τύπους εισαγωγής: email και file.

Παράδειγμα

Πεδίο φόρτωσης αρχείων που αποδέχεται πολλαπλές τιμές:

Επιλέξτε εικόνα：<input type="file" name="img" multiple>

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

Η ιδιότητα pattern

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

Η ιδιότητα pattern είναι εφαρμόσιμη στους παρακάτω τύπους εισαγωγής: text, search, url, tel, email και password.

Σημείωση:Χρησιμοποιήστε την ιδιότητα title global για να περιγράψετε το μοτίβο για να βοηθήσετε τον χρήστη.

Σημείωση:Μάθετε περισσότερα για τις κανονικές εκφράσεις στην οδηγία μας για το JavaScript.

Παράδειγμα

Το πεδίο εισαγωγής μπορεί να περιέχει μόνο τρία γράμματα (χωρίς αριθμούς ή ειδικούς χαρακτήρες):

Κώδικας χώρας: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

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

Η ιδιότητα placeholder

Η ιδιότητα placeholder καθορίζει την περιγραφή της προσδοκίας του πεδίου εισαγωγής (παράδειγμα τιμής ή σύντομη περιγραφή της μορφοποίησης).

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

Η ιδιότητα placeholder εφαρμόζεται στα εξής τύποι εισόδου: text, search, url, tel, email και password.

Παράδειγμα

Πεδία εισόδου με κείμενο占位符:

<input type="text" name="fname" placeholder="First name">

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

Ιδιότητα required

Η ιδιότητα required είναι μια μορφή boolean.

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

Η ιδιότητα required εφαρμόζεται στα εξής τύποι εισόδου: text, search, url, tel, email, password, selectors date, number, checkbox, radio και file.

Παράδειγμα

Πεδία εισόδου υποχρεωτικά:

Username: <input type="text" name="usrname" required>

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

Ιδιότητα step

Η ιδιότητα step καθορίζει τη νόμιμη διακοπή αριθμών του στοιχείου input.

Παράδειγμα: Αν step="3", τότε οι νόμιμες τιμές αριθμών θα είναι -3, 0, 3, 6, κ.λπ.

Σημείωση:Η ιδιότητα step μπορεί να χρησιμοποιηθεί μαζί με τις ιδιότητες max και min για να δημιουργηθεί μια γκάμα νόμιμων τιμών.

Η ιδιότητα step εφαρμόζεται στα εξής τύποι εισόδου: number, range, date, datetime, datetime-local, month, time και week.

Παράδειγμα

Πεδία εισόδου με συγκεκριμένες νόμιμες διακοπές αριθμών:

<input type="number" name="points" step="3">

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