HTML <legend> κείμενο

  • Προηγούμενη σελίδα <label>
  • Επόμενη σελίδα <li>

Σύνδεση

<legend> Σύνδεση Σημειώσεις <fieldset> στοιχείο

Τίτλος (caption).

Δείτε επίσης:Εγχειρίδιο του HTML DOM

Αντικείμενο Λегένδα

Παράδειγμα

Παράδειγμα 1

<form action="/action_page.php">
  <fieldset>
    <legend>Προσωπικά στοιχεία:</legend>
    <label for="fname">Όνομα:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Επίθετο:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Ηλεκτρονική διεύθυνση:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Γενέθλια:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Υποβολή">
  </fieldset>
</form>

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

Ομαδοποίηση σχετικών στοιχείων στη φόρμα:

Παράδειγμα 2

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">Προσωπικά στοιχεία:</legend>
    <label for="fname">Όνομα:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Επίθετο:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Ηλεκτρονική διεύθυνση:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Γενέθλια:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Υποβολή">
  </fieldset>
</form>

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

Παράδειγμα 3

χρησιμοποιώντας CSS ρυθμίσεις <fieldset> και <legend> στυλ:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Προσωπικά στοιχεία:</legend>
    <label for="fname">Όνομα:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Επίθετο:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Ηλεκτρονική διεύθυνση:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Γενέθλια:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Υποβολή">
  </fieldset>
</form>
</body>
</html>

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

Καθολικές ιδιότητες

<legend> Οι ετικέτες υποστηρίζουν επίσης Καθολικές ιδιότητες στο HTML.

Αναλογία γεγονότων

<legend> Οι ετικέτες υποστηρίζουν επίσης Αναλογία γεγονότων στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Παλαιότερες πλοηγούς θα χρησιμοποιήσουν τις ακόλουθες προεπιλεγμένες τιμές για την εμφάνιση <legend> Στοιχείο:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

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

Υποστήριξη περιηγητή

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα <label>
  • Επόμενη σελίδα <li>