Forms floated labels - html

Question

I have this sample:
link
CODE HTML:
<div class="input-box">
<label for="option_159" class="required">
Patient Name <em>*</em>
</label>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</div>
I want to create something like this
example
How can I create such an example only from CSS?
Can you modify my example so I can get something like this please? I want to understand how it was created.
Thanks in advance!

Answer 1

Try below code:
<form>
<fieldset>
<legend>Name:</legend>
<input type="text"><br>
</fieldset>
</form>

Answer 2

This can be done using fieldset-legend
<div class="input-box">
<fieldset>
<legend for="option_159" class="required">Patient Name <em>*</em></legend>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</fieldset>
</div>

Answer 3

Use this code:
label{
position: absolute;
top: 20px;
left: 15px;
background-color: #fff;
padding: 0px 5px;
font-size: 12px;
}
input{
padding: 10px;
background-color: #fff;
}
<div class="input-box">
<label for="option_159" class="required">Patient Name<em>*</em></label>
<br/>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" / >
</div>

Answer 4

Use This :
div {
position: relative;
margin: 50px;
}
div input[type] {
border: 1px solid #ccc;
outline: none;
padding: 8px;
width: 300px;
}
div label {
position: absolute;
top: -8px;
left: 10px;
background: #FFF;
color: skyblue;
font-size: 12px;
}
<div>
<label for="option_159">Patient Name<em>*</em></label>
<input type="text" id="option_159" placeholder="Patient Name">
</div>