입력 양식 태그

by

입력 양식 태그

ㅁ 입력폼은 사용자로부터 정보를 얻기 위해 필요한 요소입니다.

ㅁ 회원가입이나 검색에 주로 사용됩니다.

# 입력 양식 개요

ㅁ 폼 태그로 영역을 생성하고 그 안에 입력 태그를 붙여 넣으면 입력폼이 생성된다.

<!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 태그는 메소드 속성 메소드에서 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는 HTTP 프로토콜을 사용하여 무언가를 전송하는 데 사용되는 방법입니다.

# 메소드 가져오기

<!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이 “filename.html?search=apple”로 변경됩니다.


=> 그래서 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>Document</title>
</head>
<body>
    <form method="post">
        <input type="text" name="search">
        <input type="submit">
    </form>
</body>
</html>

ㅁ 우편접수 방법에서는 아래 화면에서 “바나나” 값을 입력하시면 주소가 변경되지 않습니다.


ㅁ 주소 변경 없이 데이터가 전송됩니다.


검색할 페이지가 없기 때문에 아무것도 표시되지 않습니다.

=> get 방식과 달리 post 방식은 비밀리에 데이터를 전송한다.

ㅁ get 방식은 주소에 데이터를 넣기 때문에 크기가 제한적이다.

ㅁ 포스트 방식은 데이터를 따로 전송하므로 데이터 용량에 제한이 없다.

# 무슨 얘기를 하는 건가요…?

ㅁ 자주 이용하는 네이버 검색창에 “사과”를 검색하면 입력한 “사과” 값이 주소창에 포함됩니다.

https://search.naver.com/search.naver?sm=tab_hty.top&where=nesearch&query=사과&oquery=%EB%A9%94%E3%85%94%E3%85%A3%E3%84%B7&tqi=hV6DtdprvhGssl%2B%2B2NGssssssZG-454922

=> 이는 네이버에서 검색할 때 사용하는 방법이 get 방법을 사용하는 것과 같다는 것을 의미합니다.

ㅁ 검색창에 값을 입력했는데 주소창에 값이 안뜨면 바로 포스트 방식! 할 수 있어요.


끝!