JunO3O
입력 양식 태그
입력 양식 태그
2023. 3. 21. 03:00ㆍHTML
입력 양식 태그
ㅁ 입력 양식은 사용자에게 정보를 입력받을 때 필요한 요소입니다.
ㅁ 회원 가입 또는 검색창에 자주 사용합니다.
# 입력 양식 개요
ㅁ 입력 양식은 form 태그로 영역을 생성하고, 내부에 input 태그를 넣어 만듭니다.
<!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>Document</title>
</head>
<body>
<form>
<input type="text" name="search">
<input type="submit">
</form>
</body>
</html>
# form 태그의 속성
ㅁ 입력 양식에 데이터를 입력하고 제출(submit) 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달합니다.
ㅁ 이때 방식과 장소는 속성으로 지정하는데, form 태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달합니다.
<!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>Document</title>
</head>
<body>
<form action="전송 위치" method="전송 방식">
</form>
</body>
</html>
GET ? POST ?
: get과 post는 HTTP 프로토콜을 이용해서 무언가를 전달할 때 사용하는 방식입니다.
# get 방식
<!DOCTYPE html> (get 방식)
<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>Document</title>
</head>
<body>
<form method="get">
<input type="text" name="search">
<input type="submit">
</form>
</body>
</html>
ㅁ get 방식은 아래와 같은 화면에 'apple' 라는 값을 입력하면
ㅁ URL이 '파일이름.html?search=apple' 형태로 변경됩니다.
=> 이처럼 get 방식은 주소에 데이터를 입력해서 전달하는 방식입니다. 이때, 값이 주소 뒤에 붙어서 전달되기 때문에 길이 제한이 있고, 이로 인해 많은 양의 데이터를 보내기 어렵습니다.
# 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>Document</title>
</head>
<body>
<form method="post">
<input type="text" name="search">
<input type="submit">
</form>
</body>
</html>
ㅁ post 방식은 아래 화면에 'banana' 라는 값을 입력하면 주소가 변경되지 않습니다.
ㅁ 주소가 변경되지 않고 데이터를 전달합니다.
=> post 방식은 get 방식과 달리 비밀스럽게 데이터를 전달합니다.
ㅁ get 방식은 주소에 데이터를 입력하므로 크기가 한정되어 있다.
ㅁ post 방식은 데이터를 별도로 전송하기 때문에 데이터 용량에 제한이 없다.
# 무슨 소리인가...?
ㅁ 자주 사용하는 네이버 검색창에 'apple' 를 검색하면 입력한 'apple' 라는 값이 주소 창에 포함되어 있습니다.
| https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=apple&oquery=%EB%A9%94%E3%85%94%E3%85%A3%E3%84%B7&tqi=hV6DtdprvhGssl%2B%2B2NGssssssZG-454922 |
=> 이 말은 네이버에서 검색할 때 사용하는 방식은 get 방식을 사용한다는 것과 같습니다.
ㅁ 만약 검색창에 값을 입력했는데 주소창에 값이 보이지 않는다면 post 방식이구나! 하면 됩니다.
