키스세븐지식
[검색창 코드 소스와 검색창에 미리 입력된 검색어 - placeholder]
검색창 코드 소스
검색을 지원하는 사이트를 다니다 보면 검색창에 "검색어를 입력해 주세요" 같은 단어가 미리 입력되어 있는 것을 보게 됩니다.
이것은 placeholder 속성을 이용한 임시 검색어입니다.
placeholder란 "간단한 힌트"라는 의미의 코드인데, 이것을 검색창 코드 소스에 사용하면 손 쉽게 미리 검색어를 입력해 놓을 수 있습니다.
그런데 사실은 검색창에 미리 검색어를 입력하는 과정보다 검색창을 만드는 것이 먼저 이루어져야 하므로 검색창 코드 소스를 먼저 작성하겠습니다.
HTML이나 PHP 파일 등의 필요한 부분에 먼저 아래의 검색창 코드 소스를 입력해 봅시다.
<form name="fsearchbox" method="get" action="사이트주소/파일명.php" onsubmit="return fsearchbox_submit(this);"> // 검색을 처리할 페이지로 검색어를 보내는 기능
<input type="hidden" name="sfl" value="wr_subject||wr_content"> // 안 보이게 미리 준비된 검색 속성
<input type="hidden" name="sop" value="and"> // 안 보이게 미리 준비된 검색 속성
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="미리 입력될 검색어"> // 검색창 부분 코드. 20은 단어 길이.
<button type="submit" id="sch_submit" value="검색">검색</button> // 검색버튼 부분 코드
</form> // 검색 기능의 마지막
현재는 검색창에 미리 입력되는 검색어에 대한 것을 알아보고 있지만, 위의 검색창 코드 소스를 그대로 복사해서 가져다가 검색창을 만드는 것도 문제가 없습니다.
검색어를 미리 - placeholder
이런 검색창 코드 소스는 그냥 복사해서 붙이면 되기 때문에 누구나 할 수 있지만, 생각보다 어려운 이유는 바로 action부분입니다.
검색 기능이 있는 페이지를 만들 수가 있어야 하기 때문입니다.
그렇지만 실망할 필요는 없습니다. "사이트 주소"부분을 다음, 구글, 네이버 등으로 설정하여 연결해서 쓰는 사람들도 많으니 그렇게 빌려 써도 됩니다.
일단 이 글에서 중요한 것은 검색창 코드 안에 있는 소스에서 미리 입력되는 검색어를 입력해 놓는 것입니다.
그래서 주목할 부분은 세 번째 input 코드 부분입니다. 여기에 있는 placeholder부분이 검색창에 미리 입력된 검색어의 정체입니다.
검색창 소스에서 placeholder를 찾아서 따옴표 부분에 필요한 문구를 미리 입력해도 되고, placeholder가 없다면 마지막에 추가한 뒤에 입력해도 됩니다.
검색창 코드 소스와 검색창에 미리 입력된 검색어라는 주제이므로 기본 검색창 소스와 placeholder에 대한 자세한 설명을 했으니, 검색창의 작동 원리는 다음에 다시 알아보기로 하겠습니다.
