A Pen by Felipe Nunes.

form-example.markdown

form example

form example with label placeholder like update: better anim

A Pen by Felipe Nunes on CodePen.

License.

index.html

<section>
	<form action="#" class="wf-form">
    <fieldset class="wf-fs">
      <legend>Form Example</legend>
      <ul class="lst-fs">
        <li class="it-fs">
          <label>
            <span class="lbl" data-required> Lorem: </span>
            <input type="text" class="ipt">
          </label>
        </li>
        <li class="it-fs">
          <label>
            <span class="lbl"> Ipsum: </span>
            <input type="text" class="ipt">
          </label>
        </li>
        <li class="it-fs">
          <label>
            <span class="lbl" data-required> Dolor sit: </span>
            <input type="text" class="ipt">
          </label>
        </li>
      </ul>
      <div class="bts-fs"><span class="submit"><input type="submit" class="bt" value="a met"></span></div>
    </fieldset>
  </form>
</section>

script.js

$(function forms() {
	$('.ipt').each(function() {
		$(this).focus(function(){
			$(this).parent().addClass("focus");
		});
		$(this).blur(function(){
			if($(this).val() === "") {
				$(this).parent().removeClass("focus");
			}
		});
		if ($(this).val() !== "") {
			$(this).parent().addClass("focus");
		}
	});
});

style.scss

* {margin:0;padding:0;box-sizing:border-box;}

html, body {height: 100%;}

input {
  border:0;
  vertical-align:middle;
}

body {
  background:#ccc;
  font-family:arial;
}

section {
  padding:50px 0 0;
}

.bt {
  cursor:pointer;
  border:1px solid #369;
  background:#369;
  text-align:center;
  padding:5px 10px;
  color:#fff;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
}

/*form*/
.wf-form {
  display:block;
  width:320px;
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 5px rgba(0,0,0,.3);
  .bt {
    width:100%;
    height:38px;
    line-height: 38px;
    padding:0;
  }
  legend {
    font-size:20px;
    border-bottom:1px solid #ccc;
    display:block;
    width:100%;
    padding:10px 0;
    text-align:center;
  }
  label {
    display:block;
    border:1px solid #ccc;
    width:100%;
    padding:0 10px 0 15px;
    position:relative;
    transition: all 0.2s;
  }
  .focus {
    border:1px solid #888;
    transition: all 0.2s;
    .lbl {
      color:#888;
      transition: all 0.2s;

      -webkit-transform: translate(0, -15px) scale(0.75) ;
      -moz-transform: translate(0, -15px) scale(0.75);
      -ms-transform: translate(0, -15px) scale(0.75);
      transform: translate(0, -15px) scale(0.75);

      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
    }
  }
  .lbl {
    position:absolute;
    left:10px;
    background:#fff;
    color:#ccc;
    display:inline-block;
    padding:9px 5px 0;
    transition: all 0.2s;
  }
  .ipt {
    border:0;
    width:100%;
    padding:10px 0;
    font-size:14px;
    color:#888;
    &:focus {
      outline: none;
    }
  }
}

.wf-fs {
  padding:20px 10px;
}

.it-fs {
  margin-bottom:20px;
}

/*validation*/
[data-required]:before {
  content:'*';
  position: relative;
  margin-left:-10px;
}