Form Label Concept

HTML

<ul>
    <li>
        <label>First Name</label>
        <input type="text" placeholder="Example: John Doe" />
    </li>
</ul>

CSS

body {
    padding: 30px 20px;    
}
li {
     display: inline-block;
     position: relative;  
}
li > label {
    display: inline-block;
    position: absolute;
    top: -10px;
    right: -5px;
    padding: 2px 4px;
    font-size: 12px;
    background: beige;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 0 goldenrod;
}
input {
    padding: 10px;
    width: 300px;
    font-size: 14px;
    border: 1px solid skyblue;
}