[ HTML ] action, method, target, novalidate <form> 태그 속성

  < 목차 >

action 속성	폼 데이터를 전송할 서버 주소 설정
method 속성	데이터를 전송하는 방식 (get과 post)
get 방식	URL에 데이터가 포함되어 전송되며, 보안에 취약하고 데이터 크기 제한이 있음
post 방식	데이터가 URL에 포함되지 않고 본문(body)에 담겨 전송되며, 보안성이 높고 데이터 크기 제한이 없음
target 속성	데이터를 전송할 창 지정 (_self, _blank, _parent, _top)
formnovalidate 속성	입력 값의 정합성(유효성) 검사를 생략하는 속성
novalidate 속성	form 태그에 추가하면 폼 전체의 유효성 검사를 하지 않음

 

 <form> 태그와 action 속성

• <form> 태그는 사용자가 입력한 데이터를 서버로 전송하는 역할을 함
• action : 데이터를 전송할 서버 주소를 지정
• <button type="submit"> : 버튼을 클릭하면, 해당 <form> 태그 내의 입력값이 지정된 action 주소로 전송

<form action="전송할 서버 주소" method="get">
    ...
</form>

 

method 속성 (데이터 전송 방식) - get, post

    < get >

• get : 전송하는 데이터가 URL에 노출됨
• 보안에 취약하지만, 페이지 주소를 공유할 때 유용함
• URL에 데이터를 포함해 전송하기 때문에 전송 가능한 데이터 크기에 제한이 있음
• 데이터가 url에 붙어서 복잡하게 생김.

https://example.com?name=홍길동&email=test@example.com

 

    < post >

• 전송하는 데이터가 URL에 노출되지 않음
• 보안적으로 더 안전함
• 전송할 수 있는 데이터 크기에 제한이 없음
• 하지만 개발자 도구에서는 확인할 수 있음
• 따라서, 중요한 정보(비밀번호, 개인 정보)는 반드시 post 방식을 사용하고, 암호화하여 전송하는 것이 좋음

https://example.com/login

 

target 속성 (데이터 전송할 창 지정)

• _self (기본값): 현재 창에서 전송
• _blank: 새 창(새 탭)에서 전송
• _parent: 부모 프레임에서 전송
• _top: 최상위 프레임에서 전송

<form action="서버주소" method="get" target="_blank">

 

novalidate 속성 (입력값 검증 비활성화)

• 기본적으로 <input> 필드는 HTML5에서 유효성 검사를 수행함
• formnovalidate를 버튼에 추가하면 해당 버튼을 클릭해도 유효성 검사를 하지 않음
• <form> 태그 자체에 novalidate 속성을 추가하면 모든 입력값 검사를 비활성화할 수 있음

<form action="서버주소" method="post" novalidate>
    <button type="submit">검사 수행</button>
    <button type="submit" formnovalidate>검사 안 함</button>
</form>

 

보안 관련 추가 정보

• HTTPS (https://): HTTP에 Secure(S) 기능이 추가된 것. 데이터를 자동으로 암호화하여 전송함
• 개발자 도구 (DevTools): 브라우저에서 F12를 누르면 확인 가능
• 전송되는 데이터, 네트워크 요청 등을 확인할 수 있음
• post 방식이라도 개발자 도구에서는 확인할 수 있으므로 민감한 데이터는 반드시 암호화해야 함