HTML Form How to - Place legend positioned inside fieldset

Question

We would like to know how to place legend positioned inside fieldset.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
fieldset {<!-- w  ww.  j a  v  a 2 s  . c om-->
  border: 0;
  background: #ffccaa;
  margin: 20px auto;
  width: 50%;
  position: relative;
  padding: 50px 20px 20px;
}

legend {
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 18px;
}
</style>
</head>
<body>
  <fieldset>
    <legend>I'm a legend</legend>
    fieldset content
  </fieldset>
</body>
</html>

The code above is rendered as follows: