HTML 검색창을 만드는 방법

HTML 검색창을 만드는 방법은 무엇인가요?

빠른 구현 방법을 가르쳐주세요. 현대 웹사이트는 웹사이트의 기본 요소 중 하나인 검색 기능과 뗄래야 뗄 수 없는 관계입니다. 사용자가 특정 정보를 찾아야 할 때, 특히 웹사이트 콘텐츠가 방대할 때 검색 기능은 특히 중요합니다. HTML에서는 검색 상자를 구현하는 데 너무 많은 코드와 기술이 필요하지 않으며 특정 사양만 따르면 쉽게 구현할 수 있습니다.

이 글에서는 웹사이트에 검색 기능을 빠르게 추가할 수 있도록 HTML 검색창 구현 방법과 몇 가지 실용적인 팁을 자세히 소개합니다.

1. HTML 검색 상자의 기본 구조 만들기

검색 상자를 만들려면 먼저 HTML을 사용하여 검색 상자의 기본 구조를 정의해야 합니다. 검색창에서는 일반적으로 다양한 유형이 있는 요소를 사용합니다. 여기서는 아래와 같이 type="text" 유형을 사용하여 텍스트 입력 상자를 정의합니다.

<form>
  <input type="text" placeholder="请在这里输入">
</form>

이 HTML 코드 조각에서는

요소를 생성하고 동시에 텍스트 입력 상자를 정의했습니다. 자리 표시자 속성은 입력 상자에 대한 프롬프트 정보를 제공하는 데 사용됩니다. 참고: 자리 표시자 속성은 HTML5의 새로운 속성입니다. 이 속성은 텍스트 상자에 프롬프트 정보를 입력하는 데 사용할 수 있습니다. 사용자가 텍스트 상자에 내용을 입력하면 사라집니다.

2. 제출 버튼 추가

검색 기능을 생성하는 동안 제출 버튼도 필요합니다. 사용자가 텍스트를 입력한 후 마우스나 키보드를 사용하여 검색 요청을 입력하고 제출해야 합니다. 제출 버튼의 경우 아래와 같이 "submit" 유형의 요소를 사용합니다.

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

이 HTML 코드에서는 양식의 제출 버튼에서 value 속성은 버튼이 페이지에 표시하는 텍스트를 지정합니다.

3. 검색 기능 구현

위에서 검색창의 기본 구조와 스타일을 정의한 후 검색 기능을 구현해야 합니다. 가장 간단한 방법은 HTML의 action 속성을 사용하여 검색 양식 요청을 서버에 전달하여 처리하는 것입니다. 예를 들어, 다음 코드는 처리를 위해 검색 양식 요청을 "search.php" 페이지에 제출합니다.

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

그러나 아직 서버가 없거나 서버측 코드를 아직 작성하지 않았다면 HTML에서 JavaScript를 사용하여 검색 기능을 구현할 수 있습니다. 제출 버튼의 클릭 이벤트를 수신하고 입력 상자의 텍스트 정보를 얻기 위해 JavaScript를 사용합니다. 구체적인 작업은 다음과 같습니다.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

이 예에서는 먼저 요소에 id 속성을 추가하여 JavaScript 코드에서 해당 요소에 대한 참조를 쉽게 얻을 수 있습니다. 그런 다음 제출 버튼의 onclick 이벤트에 의해 호출되는 "search"라는 JavaScript 함수를 정의합니다. "search" 함수에서는 document.getElementById를 통해 입력 상자에 대한 참조를 얻고 입력 상자에 입력된 검색 키워드를 얻은 다음 마지막으로 Alert 함수를 사용하여 검색 중인 키워드를 표시합니다. 경고 기능 뒤에는 자체 검색 코드를 작성할 수 있습니다.

4. 자동 프롬프트 기능 구현

검색창의 자동 프롬프트 기능을 사용하면 사용자가 키워드를 입력할 때 관련 검색어가 자동으로 팝업됩니다. 이 기능은 사용자가 원하는 정보를 더 빨리 찾을 수 있도록 도와주기 때문에 매우 유용합니다. HTML에서 검색창의 자동 프롬프트 기능을 구현하려면 JavaScript를 사용하여 구현할 수 있습니다. 예를 들어 입력 상자의 onkeyup 이벤트를 바인딩하면 입력 상자에 문자를 입력할 때마다 사용자에게 관련 검색 제안이 자동으로 팝업됩니다.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

위 코드에서는 키워드 관련 검색 제안을 얻기 위해 XMLHttpRequest 객체를 사용하여 백그라운드로 get 요청을 보내는 "showHint"라는 함수를 정의합니다. 검색 제안을 받으면 이를 "hintBox"라는 ID로 정의된 HTML 요소에 표시합니다.

5. 스타일 추가

마지막으로 CSS 스타일을 통해 검색창의 모양을 아름답게 꾸밀 수 있습니다. 예를 들어 배경색, 바깥쪽 테두리, 안쪽 여백 등을 설정하여 검색창의 스타일을 통일할 수 있습니다. 코드는 다음과 같습니다.

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

위 코드에서는 안쪽 여백, 바깥쪽 테두리, 안쪽 여백을 설정했습니다. 입력 상자의 원형 및 기타 스타일을 사용하여 더욱 아름답게 보입니다. 동시에, 입력 상자가 포커스를 얻으면 테두리 스타일이 변경되어 상자 렌더링과의 관계를 설정합니다. 제출 버튼 스타일에서는 마우스를 올렸을 때 스타일이 변경되도록 설정했습니다.

요약

이 글의 소개를 통해 HTML과 JavaScript를 사용하여 검색창을 만드는 방법을 배웠고 자동 제안 기능, 미화 스타일 등 몇 가지 일반적인 기술을 익혔습니다. 검색창의 구현 원리는 하이퍼링크의 구현 원리이기도 합니다. 가장 간단한 구현 방법은 HTML 양식 요소의 제출 기능을 사용하여 양식 데이터를 서버로 보내 처리하는 것입니다. 물론 JavaScript 후크를 사용하여 프런트 엔드에서 부분 처리를 위해 데이터를 가로챌 수도 있습니다. 이는 종종 더 빠르고 안전하며 비즈니스 요구 사항을 더 잘 충족할 수 있습니다. 이러한 기술을 익히면 웹 페이지가 더욱 다채로워질 것입니다.

위 내용은 HTML 검색창을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!