10/28 31-1 [HTML] Form 1
Form태그
A태그로도 값을 전달 할 수있지만 form 태그로도 값 전달 할 수 있다 .
form태그란?
사용자가 입력한 값 혹은 선택한 값을 서버로 전송할 때 사용하는 태그 (ex. 선택 체크박스 같은 거)
[주요 속성]
action: 사용자가 입력한 값을 전송 할 서버상에 있는 페이지경로 지정(전송&이동의 역할)
(action생략 시 기본값은 자신의 페이지=현재 페이지 )
method: get/post(method 생략 시 기본값은 get)
get은 조회, post는 입력
put은 수정 delete는 delete 이건 지원 안함
데이터 전송방식(서버 자원에 대한 요청방식)을 의미
-------------------------+---------------------------------+------------
데이타 전송 방식 | get | post
------------------------+----------------------------------+---------------
URL노출 | 데이타 노출됨 | 노출 안됨
------------------------+----------------------------------+--------------
전송방식 | HTTP 요청헤더에 포함 | HTTP 요청 바디에 내용이
| 되서 전송됨 | 포함되서 전송됨
-------------------------+-----------------------------------+-----------------
데이타량 | 최대 4KB | 무한대
--------------------------+------------------------------------+----------------
** get방식에서 URL을 통해 데이터 전송 시 form태그 하위 요소의 name속성에 지정한 이름을 통해서 전송 된다
따라서 name속성이 없으면 전달이 안 됨 !! 그리고 name 속성은 꼭 form태그 안에 넣어야 됨 !!!
즉, 이름=값(사용자가 입력하거나 선택한 값)의 쌍으로 전송된다.
여러 개 전송 시
이름1=값1&이름2=값2&.....
요렇게 &로 연결되어 전송 됨
target:이 속성은 a태그의 target속성과 같은 기능(새 창 띄울거야 말거야)
enctype:URL 인코딩방식 지정
application/x-www-form-urlencoded(디폴트값)
multipart/form-data(파일 업로드)
[form태그로 데이터 전송하기]
1.GET 방식 :
method를 따로 지정하지 않으면 기본적으로 get방식이 사용 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form13_1.html</title>
</head>
<body>
<div>
<h2>form태그로 데이터 전송하기</h2>
<h3>GET방식 요청</h3>
<form action="https://www.naver.com">
아이디 : <input type="text" name="user"/>
비밀번호: <input type="password" name="pass"/>
<input type="submit" value="로그인"/> <!--로그인 누르면 action에 지정된 주소로 전달됨-->
</form>
</div>
</body>
</html>form태그로 데이터 전송하기
GET방식 요청
2.POST방식
method = "post" 로 지정해야 함!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form13_1.html</title>
</head>
<body>
<div>
<h2>form태그로 데이터 전송하기</h2>
<h3>POST방식 요청</h3>
<form action="https://www.naver.com" method="post">
아이디 : <input type="text" name="user"/>
비밀번호: <input type="password" name="pass"/>
<input type="submit" value="로그인"/>
</form>
</div>
</body>
</html>form태그로 데이터 전송하기
POST방식 요청
3. 이번엔 action속성도 생략(현재 페이지를 다시 요청)/method속성도 생략(get방식)
걍 다 생략해 버려
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form13_1.html</title>
</head>
<body>
<div>
<h3>action속성 생략(현재 페이지 다시 요청)/method속성 생략(get)</h3>
<form >
아이디 : <input type="text" name="user"/> <!---name의 값이 파라미터명이 됨-->
비밀번호: <input type="password" name="pass"/>
날짜 : <input type="date" name="date"/>
색상 : <input type="color" name="color"/>
<input type="submit" value="로그인"/>
</form>
</div>
</body>
</html>action속성 생략(현재 페이지 다시 요청)/method속성 생략(get)
4. a태그로 데이터 전송(get방식)
<h3>a태그로 데이터 전송(get방식)</h3>
<a href="./Form13_1.html?user=kim&pass=1234">get요청</a>a태그로 데이터 전송(get방식)
get요청