form method
- method 속성을 이용해서 get과 post를 사용 할 수 있음
- method 속성을 명시하지 않고 사용 할 시 기본값(Default)은 get방식으로 설정됨
- <form action="페이지경로" method="GET"> or <form action="페이지경로" method="POST">
GET 방식
- form에 적힌 데이터들이 주소창(URL)의 ?뒤에 전달되고 데이터 하나당 &로 끊어서 전달됨
- 주소창(URL)에 담겨서 전송되기 때문에 데이터 길이에 제한 있음 O
- 퍼머링크로도 사용 가능 O --> 정보를 식별하는 고유한 식별자(고유한 주소체계)
POST방식
- form에 적힌 데이터들이 header의 body에 담겨서 전송됨
- 데이터 길이 제한 없음 X
- 퍼머링크로 사용 불가 X
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form 태그에 method 속성을 명시하지 않을 경우 GET 방식(method="get") 으로 동작 -->
<form action="test2_result.html">
<!-- 폼 태그 내의 요소들을 다른 페이지로 전송하고 해당 데이터를 가져오려면 name 속성 필수! -->
<!-- input type="text" 등의 입력 항목은 데이터 작성하지 않으면 파라미터명만 전송됨 -->
<!-- check 박스 항목은 미체크 시 파라미터 자체가 전송되지 않음 -->
<input type="text" placeholder="아이디" name="id"><br>
<input type="password" placeholder="비밀번호" name="passwd"><br>
<input type="checkbox" id="login" name="rememberLogin"><label for="login">로그인 상태 유지</label><br>
<input type="submit" value="로그인">
</form>
<hr>
<!-- method 속성에 "get" 명시할 경우 입력된 데이터가 URL 파라미터로 전달됨(주소창에 표시됨) -->
<!-- ex) http://localhost:8080/StudyHTML/html1/test2_result.jsp?id=admin&passwd=1234 -->
<form action="test2_result.jsp" method="get">
<input type="text" placeholder="아이디" name="id"><br>
<input type="password" placeholder="비밀번호" name="passwd"><br>
<input type="checkbox" id="login" name="rememberLogin"><label for="login">로그인 상태 유지</label><br>
<input type="submit" value="로그인(GET)">
</form>
<hr>
<!-- method 속성에 "post" 명시할 경우 입력된 데이터가 URL(주소창)에 표시되지 않음 -->
<!-- ex) http://localhost:8080/StudyHTML/html1/test2_result.jsp -->
<form action="test2_result.jsp" method="post">
<input type="text" placeholder="아이디" name="id"><br>
<input type="password" placeholder="비밀번호" name="passwd"><br>
<input type="checkbox" id="login" name="rememberLogin"><label for="login">로그인 상태 유지</label><br>
<input type="submit" value="로그인(POST)">
</form>
</body>
</html>예제 코드 | 결과
'Web > HTML' 카테고리의 다른 글
| HTML 따라하기 8일 차 | form input select textarea (0) | 2022.05.23 |
|---|---|
| HTML 따라하기 7일 차 | iframe (0) | 2022.05.20 |
| HTML 따라하기 6일 차 | 하이퍼 텍스트 링크 만들기 (0) | 2022.05.20 |
| HTML 따라하기 5일 차 | 이미지 만들기 (2) | 2022.05.19 |
| HTML 따라하기 4일 차 | 테이블 만들기 (0) | 2022.05.19 |