form 태그 안에서 사용할 수 있는 속성들
action : 데이터를 전송할 주소
method : 데이터를 전송할 방법
| get | post | |
|---|---|---|
| 특징 | 전송하는 데이터가 url에 붙어서 감 | 전송하는 데이터가 url에 붙지 않음 |
| 전송하는 데이터가 url에 노출이 됨 | 사용자 눈에 보이지 않음 | |
| 페이지 주소를 공유해야할 때 사용 | 전송하는 데이터를 암호화하는 것이 좋다(https 프로토콜 사용) | |
| 보안 | 취약 | 그나마 안정 |
| 데이터 제약 | o | x |
taget : 데이터를 전송할 창을 어디로 할거냐
_self: 자기 자신 창_blank: 새창(새탭)- iframe -> target="
_parent" : 부모 페이지 내에서 페이지 열어줌 - iframe -> target="
_top": iframe 여러개 있을 시 제일 위에 것을 타깃으로 함``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- novalidate - form 태그 안에 input 요소의 정합성을 체크하지 않는다. -->
<form action="전송할 주소(서버주소)" method="get" target="_self" novalidate>
<div>
<label for="name">이름</label>
<input type="text" name="name" id="name" autocomplete="on" />
</div>
<div>
<label for="">연락처</label>
<input type="tel" name="tel" id="tel" />
</div>
<div>
<label for="email">이메일</label>
<input type="email" name="email" id="email" />
</div>
<button type="submit">저장</button>
<!-- <button type="submit" formnovalidate="formnovalidate">저장</button> -->
<!-- formnovalidate - 버튼 누를시 자동메세지 생성 안함(input 요소의 정합성을 체크하지 않는다.) -->
</form>
</body>
</html>
-