[HTML] 기본 Form 구조

URL 주소를 매번 입력할 수는 없다.

기본적인 Form은 후딱 구현할줄 알아야 데이터가 잘 이동하는지 알 수 있다.

 

- 기본 Form 틀

<h1>네이버 검색</h1>
<!-- method="GET" 은 생략가능 -->
<!-- target="_blank" 새창 열기 -->
<form method="GET" action="https://search.naver.com/search.naver" target="_blank">
  <input type="text" name="query" placeholder="검색어">
  <button type="submit">검색</button><!-- 폼 발송 버튼 -->
</form>

 

- method 는 GET이나 POST 등 HTTP 메소드를 정하는것이다.

- action 은 보낼 경로를 설정한다.

- target은 생략 가능하며 위처럼 _black 사용시 새창을 띄어준다.

- input type에는 굉장히 여러 태그가 있으니 필요할때 찾아서 쓰자

- name은 매우 중요하다. 데이터를 name에 담아서 보내기 때문에 서버에서도 같은 쿼리명을 써야 된다.

- placeholder은 아무것도 적지 않았을 때 나오는 디폴트 값이다.

- button태그로 버튼을 만들어 action으로 name값을 submit 한다.

 

HTML 낯선 문법을 보면 이렇게 한 번이라도 해석해보며 익숙해지자.