హెచ్టిఎంఎల్ <legend> టాగ్

  • పూర్వ పేజీ <label>
  • తదుపరి పేజీ <li>

నిర్వచనం మరియు ఉపయోగం

<legend> టాగ్ నిర్వచనం <fieldset> అంశం శీర్షిక కురికి (క్యాప్షన్).

మరియు చూడండి:

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

ఫీల్డ్ సెట్ టైటిల్స్ కు కుడివైపు సమీక్షించండి (ఉపయోగించి CSS):

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

స్వయంగా ప్రయత్నించండి

బ్రౌజర్ మద్దతు

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
  • పూర్వ పేజీ <label>
  • తదుపరి పేజీ <li>