[HTML] 검색사이트 구현하기(form태그사용)

form 태그를 이용해서 검색사이트를 구현한다.

 

1. 네이버 검색 url을 복사한다.

브라우저는 마이크로소프트 엣지 주소를 가져왔다.

 

search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=covid19&oquery=%EC%BD%94%EB%B9%84%EB%93%9C19&tqi=UHCNasp0JywssuGZ6d0ssssssTG-122909

 

여기서 ?를 기준으로 

search.naver.com/search.naver 는 처리해야될 페이지이고

 

sm=tab_hty.top&where=nexearch&query=covid19&oquery=%EC%BD%94%EB%B9%84%EB%93%9C19&tqi=UHCNasp0JywssuGZ6d0ssssssTG-122909  는 처리해야할 데이터값들이다.

 

2. html에서 form태그와 input 태그를 이용해서 양식을 만든다.

<form> 태그에서 type속성에 처리해야될 페이지를 입력한다.

type="search.naver.com/search.naver"

method 속성은 값을 전송하는 방법이다. get을 입력한다.

아래와 같이 양식을 만든다.

 

 

3. 이제 네이버검색 링크에서 데이터 이름과 데이터값을 나눠준다.

예를들면 링크에서 ? 오른쪽에 있는 query=coivd 를 데이터이름=데이터값 이라고 할 수 있다.

따라서 text 상자 name 속성을 query라고 설정한다.

 

 

4. 나머지 데이터이름=데이터값도 작성한다.

이때 검색에 필요한 데이터이름은 3번에서 작성한 query이므로 나머지 데이터이름과 데이터값은 hidden 타입으로 

설정한다.

이들을 text상자로 나타내면 지저분할뿐더러 값이 고정되어 있으므로 hidden으로 나타내는 것이 좋다.

네이버 검색 주소에 나타난 데이터이름과 데이터값들은 다음과 같다. 가운데 &는 지워준다.

 

sm=top_sug.pre

fbm=1

acr=1

acq=covid

qdt=0

ie=utf8

query=covid-19

 

이런 값들을 hidden 상자에 name, value 값으로 설정한다.

 

 

5. 이제 웹브라우저 텍스트 상자에서 검색해서 잘 실행되는지 확인한다.