Tuning pól typu input i textarea

Demo:

Chyba każdy w mniejszym, lub większym stopniu wykorzystuje formularze. Standardowe pola formularzów nie robią już wrażenia, aby się wyróżnić trzeba projektować coś nowego. Moja propozycja na pewno wyróżnia się i może okazać się ciekawą propozycją również dla Twojej strony.

Krok 1 – tworzymy pola formularzu

Tworzymy szablon HTML naszych pół formularza. Zbudowany jest za pomocą listy ul > li oraz znaczników span. Pierwszy znacznik to ikona przypisana do naszego pola. W tym przypadku wykorzystuję czcionki Font Awesome. Implementacja i wykorzystanie tych czcionek opisane jest we wpisie ROZWIJANE MENU CSS + OPCJA JQUERY.
Natomiast drugi znacznik span potrzebny nam jest wyłącznie do nadania odpowiedniego wyglądu.

<ul class="ewd_input">
	<li>
		<span class="fa fa-user"></span>
		<span class="put">
			<input type="text" autocomplete="off" value="Imię" onblur="if(this.value=='')this.value='Imię';" onfocus="if(this.value=='Imię')this.value='';" /> 
		</span>
	</li>
	<li>
	<span class="fa fa-users"></span>
		<span class="put">
			<input type="text" autocomplete="off" value="Nazwisko" onblur="if(this.value=='')this.value='Nazwisko';" onfocus="if(this.value=='Nazwisko')this.value='';" /> 
		</span>
	</li>
	<li>
	<span class="fa fa-envelope"></span>
		<span class="put" >
			<input type="text" autocomplete="off" value="e-mail" onblur="if(this.value=='')this.value='e-mail';" onfocus="if(this.value=='e-mail')this.value='';" /> 
		</span>
	</li>
	<li class="area">
	<span class="fa fa-pencil-square-o"></span>
			<textarea autocomplete="off" onblur="if(this.value=='')this.value='wiadomość';" onfocus="if(this.value=='wiadomość')this.value='';">wiadomość</textarea>	
	</li>
</ul>

Każde pole input, textarea zawiera dodatkowo kod:

autocomplete="off" onblur="if(this.value=='')this.value='wiadomość';" onfocus="if(this.value=='wiadomość')this.value='';"

Po co nam to? w ten sposób możemy przypisać wartość początkową (value). Wartość ta po kliknięciu w pole:

  • zniknie, jeśli wcześniej nie wpisywaliśmy w nią danych
  • zapamięta wcześniej wpisane dane
  • pojawi się wartość przypisana jeśli nic nie wprowadzimy, a przyjdziemy do następnego pola
    • Jest to bardzo przydatna rzecz, i na pewno przyda się w tworzeniu formularza.

      Krok 2 – dodanie stylów

      W moim przypadku, wygląd głównie opiera się o znaczniki span.

      ul.ewd_input .fa 
      {
        display: inline-block;
          font-family: FontAwesome;
          font-style: normal;
          font-weight: normal;
          left: 4px;
          line-height: 1;
          position: relative;
          top: -2px;
      }
      ul.ewd_input 
      {
      	margin:0;
      	padding:0; 
      	width:400px;
      }
      ul.ewd_input input 
      { 
      	border:0;
      	width:95%;
      	font-size:14px;
      	margin:0;
      	padding:0;
      	outline:none;
      	background:transparent;
      	color:#fff;
      }
      ul.ewd_input li 
      {
      	list-style:none;
      	padding-bottom:10px;
      	position:relative;
      	height:67px
      }
      ul.ewd_input li span 
      {
      	display:inline-block; 
      	border:1px solid #ddd;
      	padding:23px 0 0 23px;
      }
      ul.ewd_input li span.fa 
      {
      	height: 40px; 
      	left: 0;
      	position: absolute;
      	top: 0; 
      	width: 40px;
      }
      ul.ewd_input li span.put 
      {
      	bottom: 12px;    
      	height: 40px;    
      	left: 65px;   
      	position: absolute;  
      	width: 190px;
      }
      ul.ewd_input li.active span.fa 
      {
      	background:#ddd;
      	transition-duration: 0.8s;
          transition-property: transform;
      }
      ul.ewd_input li.active span.fa:before 
      {
      	color:#fff; 
      }
      ul.ewd_input li.active span, ul.ewd_input li.active textarea 
      {
      	box-shadow:-moz-box-shadow:    inset 0 0 10px #DD0055;
              -webkit-box-shadow: inset 0 0 10px #DD0055;
              box-shadow:inset 0 0 10px #DD0055;
              border: 1px solid #DD0055;
      }
      ul.ewd_input li textarea {
      	border:1px solid #ddd;
      	height: 115px;
      	left: 65px;
      	position: absolute;
      	width: 300px;
      	resize:horizontal;
      	padding:23px 0 0 23px;
      	color:#fff;
      	background:transparent;
      	border-radius:0;
      	top:1px;
      }
      ul.ewd_input li.area
      {
      	height:116px;
      }
      ul.ewd_input li.area span.fa 
      {
      	height:90px;
      	top:1px;
      }
      

      Krok 3 – dodanie skryptów jQuery

      W naszym skrypcie chodzi wyłącznie o dodanie klasy active do znacznika li. Klasę tą wykorzystujemy w naszych stylach css.
      I mamy już gotowy nasz formularz. Możemy zmieniać i dobierać ikony według własnych potrzeb.

      $('.ewd_input input').focus(function()
      	{			
      		$(this).parent().parent().addClass('active');  
      	});    
      	$('.ewd_input input').focusout(function()
      	{	
      		$(this).parent().parent().removeClass('active');  
      	});      
      		$('.ewd_input textarea').focus(function()
      		{
      			$(this).parent().addClass('active');  
      		});    
      			$('.ewd_input textarea').focusout(function()
      		{			
      			$(this).parent().removeClass('active');  
      		}); 
      

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code