Kezli Form v1

by Murat Kezli

HTML

<style>
@import url('https://fonts.googleapis.com/css?family=Muli:400,700,900&subset=latin-ext');
</style>

<div style="max-width:990px; padding-left:10px; margin:10px auto; padding:40px;">








<label class="w50">
<input type="text" name="isim" tabindex="1" value="" onfocusout="fctrl(this)" required/>
<div class="labeltext">Adınız</div>
</label>

<label class="w50">
<input type="text" name="isim" tabindex="2" value="" onfocusout="fctrl(this)" required/>
<div class="labeltext">Soyadınız</div>
</label>

<label class="w100">
<input type="email" name="isim" tabindex="3" value="" onfocusout="fctrl(this)" />
<div class="labeltext">E-Posta</div>
</label>

<label class="w100 textarealabel">
<div class="labeltextarea">Şehir</div>
<select rows="0" cols="0" name="isim" tabindex="3" value="" onchange="sogry(this)">
<optgroup style="color:red;">
  <option value="">Lütfen Seçiniz a</option>
   <option value="1">Anadolu Kartallar</option>
    <option value="2">test3</option><option>test1</option>
    <option value="3">test3</option><option>test1</option>
   <option value="4">test2</option>
    <option value="5">test3</option>
  </optgroup>  
</select>
</label>

<label class="w50 textarealabel">
<input type="checkbox" checked>
<div style="font-size:small; float:left; line-height:50px;">Merkezi sistem ısıtmalı odalar</div>
</label>

<label class="w50 textarealabel">
<input type="checkbox">
<div style="font-size:small; float:left; line-height:50px;">Merkezi sistem ısıtmalı odalar</div>
</label>


<label class="w100 textarealabel">
<div class="labeltextarea">Mesajınız</div>
<textarea rows="0" cols="0" name="isim" tabindex="3" value="">
  
</textarea>
</label>


  
  <button>
  Gönder
  </button>



</div>

CSS

:root {
  --background: rgba(250, 250, 250, 1);
  --formyazi:rgba(20,20,20,1);
--active:rgba(57,181,74,1);
--koyu: rgba(220, 220, 220, 0.5);
  --acik: rgba(5, 5, 5, 1);
  --pasif: rgba(50, 50, 50, 0.5);
  --boxline: rgba(220, 220, 220, 0.3);
  --bordo: rgba(93, 2, 2, 1);
}

body {
  margin: 0px;

  background-color: var(--background);
  font-family: 'Muli', sans-serif;
  font-weight: 400 !important;
  font-size: medium;
}

p {
  color: var(--acik);
  display: inline-block;
}

.w50 {
  width: calc(50% - 30px); float:left;
}

.w100 {
  width: calc(100% -30px); float:none;
}

label, button {
  margin-bottom:10px;
  margin-right:10px;
  height: 50px;
  display: inherit;
  overflow: hidden;
  font-weight: 700;
  border-radius: 8px;
  background-color: var(--koyu);
  padding:10px;  
}

button{ border:none; outline:none;padding: 10px 20px 10px 20px;}
button:hover{ background-color:var(--active); color:white; cursor:pointer; }
button:active{ background-color:var(--pasif); }

.textarealabel{  overflow: auto !important;height: auto!important; }
.labeltextarea{  color:var(--pasif);; font-size: small;  font-weight:400; margin-bottom:5px;}

label input[type='text'], input[type='email']{
  width: 100%;
  height: 60px;
  border: 0px;
  background-color: transparent;
  
  border: 0;
  color: var(--formyazi);
  font-family:'Muli', sans-serif;
  font-size: x-large;
  font-weight:400;
  outline: 0;
  padding: 0px;
  text-align: left;
  transition: all 0.3s;

}

label textarea {
  resize: none !important;
  width: 100%;
  height: 120px;
  border: 0px;
  background-color: transparent;
 outline:none;
  border: 0;
  color: var(--formyazi);
  font-family:'Muli', sans-serif;
  font-size: medium;
  font-weight:400;

}

.labeltext {
  color:var(--pasif);
  line-height: 30px;
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  transition: all 0.3s;
  cursor: text;
  font-size:large;
}



label...

JavaScript

$(document).ready(function(){
	"use strict";
    
   });
   
 function fctrl(gelen){

var val = $(gelen).val();
 if (val== ""){
$(gelen).next(".labeltext").removeClass("labelup");
 }else{
  $(gelen).next(".labeltext").addClass("labelup");
 }
 
 }
 
 function sogry(gelen)
    {
    var axx = $(gelen).val();
   
    if (axx == ""){gelen.style.color = "var(--pasif)";
      } else {gelen.style.color = "var(--formyazi)"; }
    }