Form default property

<form> 태그의 5가지 핵심 속성을 집중적으로 분석해 보겠습니다.

이 속성들은 사용자가 입력한 데이터가 어떤 경로로, 어떤 방식으로 운반될지를 결정하는 '운송 규격'과 같습니다.

---

1. action (목적지 주소)

사용자가 '제출(submit)' 버튼을 눌렀을 때, 데이터를 받아서 처리할 **서버 프로그램의 경로(URL)**를 지정합니다.

• 설명: 폼 데이터가 도착할 최종 목적지입니다.
• 특징: 이 속성을 생략하면 현재 페이지의 URL로 데이터를 다시 전송하게 됩니다.

---

2. method (전송 방식)

데이터를 서버로 보낼 때 어떤 HTTP 방식을 사용할지 결정합니다.

• get: 데이터를 주소창(URL)에 ?name=value 형태로 붙여서 보냅니다. 데이터 크기가 제한적이고 보안이 중요하지 않은 검색어 등에 사용됩니다.
• post: 데이터를 패킷 내부에 숨겨서 보냅니다. 데이터 용량 제한이 거의 없고, 로그인 정보나 개인정보처럼 보안이 필요한 경우 반드시 사용해야 합니다.

---

3. name (데이터의 이름)

폼 자체의 이름이기도 하지만, 가장 중요한 용도는 서버에서 각 입력값을 식별하는 키(Key) 역할을 하는 것입니다.

• 설명: 서버는 사용자가 입력한 '값'만 받는 것이 아니라, 이름=값의 쌍으로 데이터를 전달받습니다.
• 주의: <input> 태그에 name 속성이 없으면, 해당 칸에 입력한 내용은 서버로 절대 전송되지 않습니다.

---

4. target (응답 표시 위치)

폼을 제출한 후, 서버로부터 받은 응답 결과(성공 페이지 등)를 어디에 표시할지 결정합니다.

• _self: 현재 창에서 응답 페이지를 엽니다. (기본값)
• _blank: 새로운 탭이나 창에서 응답 페이지를 엽니다.
• 활용: 결제창이나 외부 연동 페이지를 띄울 때 주로 사용합니다.

---

5. autocomplete (자동 완성)

사용자가 이전에 입력했던 내용을 브라우저가 기억하여 자동으로 추천해 줄지 여부를 결정합니다.

• on: 기본값입니다. 브라우저가 입력 기록을 바탕으로 추천 리스트를 보여줍니다.
• off: 보안이 매우 중요하여 기록을 남기지 말아야 할 때(비밀번호, 보안카드 번호 등) 사용합니다.

---

🖥️ 실전 예제: 5가지 속성 종합 활용

HTML

 

<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>

---

📋 폼 속성 핵심 요약표

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

---

학습 정리

• **action**은 목적지, **method**는 방법, **name**은 데이터의 이름표라는 점을 기억하세요.
• 보안이 필요한 데이터는 무조건 post 방식을 택해야 주소창에 노출되지 않습니다.
• name 속성이 빠지면 서버 측 개발자가 데이터를 받을 수 없어 곤란해집니다.

---

데이터 전송의 핵심인 폼 속성들을 완벽히 정리하셨습니다!

---