xxxxxxxxxx
1
<h1 class="m-3">The legend element</h1>
2
3
<form action="/action_page.php" class="p-3 m-4 border border-dark position-relative d-block" style="width:350px">
4
<fieldset>
5
<legend class="position-absolute top-0 bg-white" style="width:min-content; transform:translateX(30px); transform:translateY(-50%);">Personalia:</legend>
6
<div class="form-outline m-2">
7
<input type="text" id="fname" class="form-control" />
8
<label class="form-label" for="fname">First name</label>
9
</div>
10
<div class="form-outline m-2">
11
<input type="text" id="lname" class="form-control" />
12
<label class="form-label" for="lname">Example label</label>
13
</div>
14
<div class="form-outline m-2">
15
<input type="text" id="email" class="form-control" />
16
<label class="form-label" for="email">Email</label>
17
</div>
18
<div class="form-outline m-2">
19
<input type="text" id="birthday" class="form-control" />
20
<label class="form-label" for="birthday">Birthday</label>
21
</div>
22
<input type="submit" value="Submit" class="btn btn-primary m-2">
23
</fieldset>
24
</form>
1
1
1
1
Console errors: 0