place a label on top of input tag

Question

How can I place label on top of the input tag, by default it is placed inside of the input tag when I click on it, it jumps to the top of the input tag,

This is my attempt:

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: #fafafa;
  color: #636363;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #757575;
}
input:focus {
  outline: none;
}
/* Label */

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* active */

input:focus ~ label,
input.used ~ label {
  top: -20px;
  -webkit-transform: scale(.75);
  transform: scale(.75);
  left: -2px;
  /* font-size: 14px; */
  color: #000;
}
/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4a89dc;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}
/* active */

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}
/* Highlight */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* active */

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

<div class="group">
  <input type="text" name="name" placeholder="" readonly>
  <span class="highlight">
        </span><span class="bar"></span>
  <label>FULLNAME</label>
</div>

Please how can I place the label on top of the input tag permanently. At the moment it is placed on the input tag and on clicking to it, it jumps to the top of the tag

Answer 1

you could try something like

<form name="message" method="post">
    <section>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" value="" name="name">
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="text" value="" name="email">
    </div>
    </section>
    <section>
    <div>
      <label for="subject">Subject</label>
      <input id="subject" type="text" value="" name="subject">
    </div>
    <div class="full">
      <label for="message">Message</label>
      <input id="message" type="text" value="" name="message">
    </div>
    </section>
</form>