FORM 태그
① <form></form>
② 데이터로 보낼 입력 양식
③ 로그인, 회원가입 등 필요한 정보를 적고 제출 버튼을 누르면 백엔드 서버로 전달(로그인 시 필요한 아이디, 비밀번호, 제출버튼을 한 폼으로 지정해서 보냄)
- FORM태그의 속성
1. action
① form에 입력된 모든 정보를 보내는 경로
② action 경로로 정보를 보내기 위해서는 submit이 필요
2. method
: form에 입력된 모든 정보를 보내는 방식
1) get
- 디폴트
- 보내는 정보가 URL에 노출(보안 취약)
- 빠르기 때문에 검색용도
2) post
- 보내는 정보가 body에 포함
- 보내는 정보가 노출 되지 않음(보안 유지)
- 느리며 로그인, 회원가입 용도
3. name
- <form> 태그나 하위태그에서 사용
- 보낸 정보는 서버 측에서 name 속성으로 식별
4. value
- 보내는 정보, 보내는 실제 데이터
- value 속성값을 작성해서 보내면 사용자 입력을 대체
(사용자가 입력할 때 value 속성으로 보내지기 때문에 따로 입력하지 않지만, hidden속성 사용시 사용자가 입력하지 못하기 때문에 value로 명시함)
<get 예시>
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="http://localhost/form.php">
<input type="text" name="id" placeholder="아이디" ><br>
<input type="password" name="pwd" placeholder="비밀번호"><br>
<input type="hidden" name="d" value="숨겨서보내는값"><br>
<input type="submit">
</form>
</body>
</html>
-----------> 사용자가 입력한 아이디와 비밀번호가 url에 그대로 노출되기 때문에 이런 경우 post 속성을 사용해야한다.
<post 예시>
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="http://localhost/form.php" method="post">
<input type="text" name="id" placeholder="아이디" ><br>
<input type="password" name="pwd" placeholder="비밀번호"><br>
<input type="hidden" name="d" value="숨겨서보내는값"><br>
<input type="submit">
</form>
</body>
</html>
'국비 > HTML&CSS' 카테고리의 다른 글
| UI구현_개념 (0) | 2021.10.07 |
|---|---|
| UI 설계_개념 (0) | 2021.10.07 |
| CSS_flex와 float (0) | 2021.10.01 |
| CSS_display (0) | 2021.10.01 |
댓글