Menciptakan Komunikasi yang Bagus Pada Formulir

http://www.dte.web.id/

by Taufik Nurrohman

HTML

<div class="form-item">
    <strong>Nama:</strong> <input type="text"/>
	<label>Ketik nama lengkap Anda</label>
</div>
<div class="form-item">
    <strong>Alamat Lengkap:</strong> <input type="text"/>
	<label>Mohon ketik setiap awalan kata dengan huruf kapital</label>
</div>
<div class="form-item">
	<strong>Keterangan:</strong>
	<textarea></textarea>
    <label>Beritahu kami mengenai riwayat pendidikan<br/>dan pekerjaan Anda secara singkat</label>
</div>

CSS

body {
  background-color:#f5f5f5;
  padding:100px 50px;
  margin:0;
  font:normal normal 12px/1.4 Arial,Sans-Serif;
  color:black;
}

/* Form item wrapper */
.form-item {
  margin:1em 0 0;
  position:relative;
}

/* Form item title */
.form-item strong {
  display:block;
  margin:0 0 5px;
}

/* Form items */
.form-item input,
.form-item textarea {
  display:block;
  border:1px solid #ccc;
  padding:4px;
  margin:0 0;
  width:250px;
  font:inherit;
  line-height:normal;
  color:inherit;
  -webkit-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
  outline:none;
}

.form-item textarea {height:120px}

/* Tooltip */
.form-item label {
  display:block;
  position:absolute;
  bottom:100%;
  left:150px;
  margin-bottom:2em;
  font-size:11px;
  font-weight:bold;
  color:white;
  white-space:nowrap;
  line-height:normal;
  padding:.6em 1em;
  background-color:black;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  visibility:hidden;
  opacity:0;
  /* Transition effect */
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

/* Tooltip arrow */
.form-item label:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  position:absolute;
  top:100%;
  left:2em;
  border-top-color:black;
}

.form-item input:focus,
.form-item textarea:focus {border-color:#aaa}

/* Show tooltip when the form is being focused */
.form-item input:focus + label,
.form-item textarea:focus + label {
  visibility:visible;
  opacity:1;
  margin-bottom:-.5em;
}