index.html

<form class="go-bottom">
  <h2>To Bottom</h2>
  <div>
    <input id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
  </div>
  <div>
    <input id="phone" name="phone" type="tel" required>
    <label for="phone">Primary Phone</label>
  </div>
  <div>
    <textarea id="message" name="phone" required></textarea>
    <label for="message">Message</label>
  </div>
</form>

<form class="go-right">
  <h2>To Right</h2>
  <div>
    <input id="name" name="name" type="text" required>
    <label for="name">Your Name</label>
  </div>
  <div>
    <input id="phone" name="phone" type="tel" required>
    <label for="phone">Primary Phone</label>
  </div>
  <div>
    <textarea id="message" name="phone" required></textarea>
    <label for="message">Message</label>
  </div>
</form>

Label-Pattern-with-just-CSS.markdown

Label Pattern with just CSS

The <label> is the placeholder. It shows because the input is on top of it with a transparent background. On focus we can move it, with just CSS, through an adacent sibling combinator and :focus. If the input is :valid, it can have a solid background, thus hiding the "placeholder".

Saw the design somewhere - can't remember where, but I snagged a screenshot:

A Pen by A Non Ymous on CodePen.

License.

style.scss

@import "compass";
* {
  box-sizing: border-box;
}

html {
  font: 14px/1.4 Sans-Serif;
}

form {
  width: 320px;
  float: left;
  margin: 20px;
  > div {
    position: relative;
    overflow: hidden;
  }
  input, textarea {
    width: 100%;
    border: 2px solid gray; 
    background: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 8px 12px;
    outline: 0;
    &:valid {
      // Hides the label
      background: white; 
    }
    &:focus {
      border-color: #f06d06;
    }
    &:focus + label {
      background: #f06d06;
      color: white;
      font-size: 70%;
      padding: 1px 6px;
      z-index: 2;
      text-transform: uppercase;
    }
  }
  label {
    transition: // not padding
      background 0.2s,
      color 0.2s,
      top 0.2s,
      bottom 0.2s,
      right 0.2s,
      left 0.2s;
    position: absolute;
    color: #999;
    padding: 7px 6px;
  }
  textarea {
    display: block;
    resize: vertical;
  }
}

form.go-bottom {
  input, textarea {
    padding: 12px 12px 12px 12px; 
  }
  label {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  input:focus, textarea:focus {
    padding: 4px 6px 20px 6px; 
  }
  input:focus + label, textarea:focus + label {
    top: 100%;
    margin-top: -16px;
  }
}
form.go-right {
  label {
    top: 2px;
    right: 100%;
    width: 100%;
    margin-right: -100%;
    bottom: 2px;
  }
  input:focus + label, textarea:focus + label {
    right: 0;
    margin-right: 0;
    width: 40%;
    padding-top: 5px;
  }
}