입력 검색 폼(form) 꾸미기

간단한 검색 폼

간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.

입력하세요

css에서 label을 블럭 엘리먼트로 변경해준다.

label{ display:block;}

그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.

입력하세요

한라인 줄이기

위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.

var $search = $('#search').addClass('overlabel');

html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.

.overlabel{ position: relative;}
.overlabel label{ 
position:absolute;
top:1px; left:3px;
cursor:text;}

원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.

• label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
• label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.

문제점해결

첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다

$(document).ready(function() {
  var $search = $('#search').addClass('overlabel');
  var $searchInput = $search.find('input');
  var $searchLabel = $search.find('label');
  $searchInput
  .focus(function() {
  //포커스되면
    $searchLabel.hide();
    //보여준다
  })
  .blur(function() {
    if (this.value == '') {
      $searchLabel.show();
     }  }); });

각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.

$searchLabel.click(function() {
  $searchInput.trigger('focus');

마무리

거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.

if ($searchInput.val()) {
//입력한 값이 남아 있다면
    $searchLabel.hide();
  }

만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다

if ($searchInput.val()) {
    $searchInput.val(null);
  }

이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html