html legend
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input
type="text" id="lname" name="lname"><br><br>
<label
for="email">Email:</label>
<input type="email"
id="email" name="email"><br><br>
<label
for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday"><br><br>
<input
type="submit" value="Submit">
</fieldset>
</form>
#legend in html
<ul class="legend">
<li><span class="greendot"></span>Text</li><br></br>
<li><span class="yellowdot"></span>Text</li><br></br>
<li><span class="reddot"></span>Text</li><br></br>
<li><span class="blackdot"></span>Text</li><br></br>
</ul>
<style>
.legend { list-style: none; margin-left:10px;}
.legend li { float: left; margin-right: 15px;}
.legend span { border: 1px solid #ccc; float: left; width: 10px; height: 12px; margin: 2px;}
.legend {
position: fixed;
top: 62%;
left: 10%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
/* your colors */
.legend .greendot { background-color: #00ff00;}
.legend .yellowdot { background-color: #ffff33; }
.legend .reddot { background-color: #ff3333; }
.legend .blackdot{ background-color: #000000; }
</style>
<ul class="legend">
<li><span class="greendot"></span>High amounts of available beds</li><br></br>
<li><span class="yellowdot"></span>Medium amounts of available beds</li><br></br>
<li><span class="reddot"></span>Low amounts of available</li><br></br>
<li><span class="blackdot"></span>Data of available beds N/A</li><br></br>
</ul>
https://hospitable.live to see how it works