Form Tag 속성 (2/2)

 

🔵 핵심 속성

 

• action: 데이터를 전송할 서버의 주소. (URL)
  • 특징: 생략 시 현재 페이지의 URL로 데이터를 다시 전송.

 

• method: 데이터 전송 방식.
  • get: 데이터 조회˙전달에 적합, URL 쿼리스트링(?name=value) 형태로 값을 전달한다.
    (데이터 용량이 제한적이고, 보안이 중요하지 않을 경우 사용)
  • post: 데이터 전송˙저장에 적합, 본문에 값을 담아 전달한다.
    (데이터 용량 제한이 거의 없고, 보안이 필요한 경우 사용)

 

• name: 선택한 값이 서버로 전송될 때 사용할 이름으로 서버에서 해당 이름으로 값을 조회. (이름=값)
  • 주의: <input> 태그에 name 이 없으면, 해당 칸에 입력한 내용은 서버로 전송되지 않는다.

 

• target: 데이터를 전송할 창 지정.
  
  • _self: 현재 창에서 응답 페이지 열기. (생략 시 기본값)
  • _blank: 새 탭이나 새 창에서 응답 페이지 열기.
    • 활용: 결제창이나 외부 연동 페이지를 띄울 때 주로 사용.

 

• autocomplete: 자동 완성 기능 사용 여부.
  • on: 기본값으로, 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동으로 값을 완성.
  • off: 브라우저가 자동으로 값을 완성하지 않으므로, 사용자는 매번 각 입력 필드에 값을 끝까지 입력.
    (보안이 중요할 경우 사용)

 

 

📍  POINT 📍 

✔️  action은 목적지, method는 방법, name은 데이터의 이름표. ✔️ 

✔️ 보안이 필요한 데이터는 method="post"로 선택하면 URL에 노출 되지 않는다. ✔️

✔️  name 속성은 중요할때 유일하게 필수적으로 사용한다. ✔️

 

 

📋 폼 속성 핵심 요약표 📋

속성	역할	주요 값
action	데이터 도착지	URL 경로 (예: /login.php)
method	데이터 운송 방식	get (공개), post (비공개)
name	서버 식별용 이름	변수명처럼 자유롭게 지정
target	결과 출력 창	_self, _blank
autocomplete	자동 입력 제안 기능	on, off

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<form action="https://www.google.com/search" 
      method="get" 
      name="searchForm" 
      target="_blank" 
      autocomplete="off">

    <label for="query">검색어:</label>
    <input type="text" id="query" name="q" placeholder="검색어를 입력하세요">
    
    <input type="submit" value="구글에서 검색">
</form>