Παρασιτικά Ετικέτες Φόρμας του Bootstrap 5

\u6d77\u6d6a\u6807\u7b7e\/\u52a8\u753b\u6807\u7b7e

\u9ed8\u8ba4\u60c5\u51b5\u4e0b，\u4f7f\u7528\u6807\u7b7e\uFF08\u6807\u7b7e\uFF09\u65f6，\u5b83\u4eec\u5e38\u51b3\u5c55\u5728\u8f93\u5165\u533a\u57df\u7684\u9876\u90e8\u3002

\u901a\u8fc7\u4f7f\u7528\u6d77\u6d6a\u6807\u7b7e，\u4f60\u53ef\u4ee5\u5728\u8f93\u5165\u533a\u57df\u5185\u63a5\u5165\u6807\u7b7e，\u5728\u51bb\u94fe\u8f93\u5165\u533a\u57df\u65f6\u5c06\u5b83\u4eec\u6d77\u6d6a\/\u52a8\u753b\u5316\u3002

Παράδειγμα

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="\u8bf7\u8f93\u5165\u7de8\u90ae\u5730\u5740" name="email">
  <label for="email">Ηλεκτρονική διεύθυνση</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Παρακαλώ εισάγετε τον κωδικό πρόσβασης" name="pswd">
  <label for="pwd">Κωδικός πρόσβασης</label>
</div>

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

Σημεία προσοχής για τα εικονικά ετικέτα:

Το στοιχείο <label> πρέπει να βρίσκεται μετά το στοιχείο <input> και κάθε στοιχείο <input> χρειάζεται placeholder Προσαρμοστικές ιδιότητες (ακόμα και αν δεν εμφανίζονται).

Τοπικό κείμενο

Εφαρμόζεται επίσης στον τομέα κειμένου:

Παράδειγμα

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Απόψεις εδώ"></textarea>
  <label for="comment">Απόψεις</label>
</div>

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

Επιλογή λίστας

Μπορείτε επίσης να χρησιμοποιήσετε το "εικονικό ετικέτα" στην επιλογή λίστας. Αλλά, δεν θα κουνιέται/αναπαράγεται. Το ετικέτα θα εμφανίζεται πάντα στην κορυφή της επιλογής λίστας:

Παράδειγμα

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">Επιλογή λίστας (επιλέξτε ένα στοιχείο):</label>
</div>

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