HTML 폼(HTML Form)은 웹 페이지에서 사용자로부터 데이터를 입력받아 서버로 전송하기 위한 구조를 제공합니다.HTML의 <form> 태그를 사용하여 정의되며, 다양한 입력 필드와 버튼으로 구성됩니다.
HTML Form의 구조 1. <form> 태그 폼의 범위를 정의하는 태그입니다. 속성: action: 데이터를 전송할 서버의 URL을 지정합니다. method: 데이터를 전송하는 방식(GET 또는 POST)을 지정합니다. 2. 입력 필드 (Input Elements) 사용자로부터 데이터를 수집하는 데 사용됩니다. 주요 유형은 다음과 같습니다: 2.1. <input> 태그: 다양한 형태의 입력을 지원합니다. type="text": 텍스트 입력 type="password": 비밀번호 입력 type="email": 이메일 입력 type="checkbox": 체크박스 type="radio": 라디오 버튼 type="file": 파일 업로드
먼저, form은 웹에서 유저에게 데이터를 입력받는 여러가지 형식을 제공합니다.( 버튼, 텍스트, 드랍다운, 선택 등) 그리고, 유저의 데이터를 서버로 전송하는 역할을 합니다.
여기서 action과 method가 나옵니다. <formaction="/submit/"method="post"> <form> HTML 폼을 정의합니다. 사용자 입력 데이터를 수집하고 서버에 전송하기 위해 사용됩니다. 속성: action="/submit/": 사용자가 폼을 제출하면 데이터를 전송할 URL을 지정합니다. 여기서는 데이터를 "/submit/" 경로로 전송합니다. method="post": 데이터를 전송하는 HTTP 메서드를 지정합니다. POST: 폼 데이터를 요청 본문(Body)에 담아 전송합니다. 보안성이 높아 주로 로그인, 회원가입 같은 민감한 데이터를 전송할 때 사용됩니다.
<label for="username">사용자 이름:</label><br> <label> 사용자 인터페이스를 제공하는 컨트롤 요소들의 레이블(label, 이름표)를 나타냅니다. 이 태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다. 속성: for="username": 이 레이블이 특정 입력 필드와 연결됨을 명시합니다. (<label> 태그의 for 속성과 연결된 컨트롤 요소의 id를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줍니다.) 값: username은 같은 폼 내의 id="username"을 가진 <input> 태그를 참조합니다. 예시:
의미: 사용자가 레이블을 클릭하면 자동으로 해당 입력 필드가 활성화됩니다. 텍스트: "사용자 이름:"은 입력 필드에 대한 설명으로 화면에 표시됩니다. <br> 기능: 줄바꿈(Break Line)을 삽입하여 다음 요소를 새 줄에 표시합니다.
<inputtype="text"id="username"name="username"required><br> <input> 태그: 사용자가 데이터를 입력할 수 있는 텍스트 입력 필드를 생성합니다. type="text": 입력 필드 유형을 일반 텍스트로 지정합니다. 받는 값: 사용자 이름, 단순 텍스트 등. id="username": 기능: 이 필드의 고유 식별자로, 다른 태그(예: <label for="username">)와 연결됩니다. 연결: 위의 <label> 태그에서 **for="username"**과 연결되어 있습니다. name="username": 기능: 서버로 데이터를 전송할 때 이 필드의 값을 참조할 이름을 지정합니다. 의미: 서버에서는 "username"이라는 키를 통해 이 필드의 값을 받을 수 있습니다. 데이터 전송에서 핵심 속성은 name입니다. name으로 서버에 데이터를 전달하고, 서버는 name을 보고 데이터를 판단합니다. 서버에서는 nam 속성을 사용하며 접근 name 속성의 값이 key가 되고, 사용자가 입력한 값이 value가 되어 전송됨 즉, name이 없으면 서버는 데이터를 받을 수 없음
required: 기능: 이 입력 필드가 필수 항목임을 명시합니다. 효과: 사용자가 이 필드를 비워 두고 폼을 제출하려 하면 브라우저가 경고 메시지를 표시합니다. <br>: 줄바꿈을 추가하여 레이아웃을 정리합니다.
나머지도 다 비슷합니다
<input type="submit" value="가입하기">
<input> 태그: 폼을 제출하는 버튼을 생성합니다. type="submit": 버튼 클릭 시 폼 데이터를 서버로 전송합니다. 전송 시, 폼에 설정된 action과 method를 따릅니다. value="가입하기": 버튼에 표시되는 텍스트입니다.
추가로 for, id, name은 거의 다 같은 이름으로 통일을 시키는데 굳이 그럴 필요가 없다.
이렇게 #이나 그냥 ""을 적으면 비워놓는다는 뜻입니다.
이렇게 한 후 웹에 접속후 값을 입력해서 전송하면
이렇게 링크창에 무엇인가 더해져 나왔습니다. 저 id가 name의 id입니다 그런데 왜 이 링크로 보내질까, 바로 action, method가 이 역할을 합니다. 받은 데이터를 어디로, 어떻게 보내는 것을 정하기 때문입니다. 지금은 #으로 아무런 링크를 안 보냈기 때문에, 현재 위치에 더해지게 되는 겁니다.
HTTP 메소드
HTTP(하이퍼텍스트 전송 프로토콜)는 웹에서 클라이언트(예: 브라우저)와 서버 간의 통신을 위해 사용되는 프로토콜입니다. HTTP 메서드는 클라이언트가 서버에 요청의 목적을 알리는 데 사용되며, 각각 특정한 작업을 수행하기 위한 규칙을 정의합니다.
주요 HTTP 메서드와 그 개념 HTTP 메서드는 크게 안전성(서버 상태를 변경하지 않음), 멱등성(같은 요청이 여러 번 실행되어도 결과가 동일), 캐시 가능성 등으로 특징이 나뉩니다. 한 마디로 HTTP에서 수행할 작업을 나타냅니다.
주요 메서드는 다음과 같습니다: 1. GET 목적: 서버에서 데이터를 읽어오거나 조회하는 데 사용. 특징: 서버의 리소스를 변경하지 않으므로 안전한 메서드. 요청이 반복되더라도 서버 상태는 변하지 않으므로 멱등성을 가짐. 응답 데이터는 브라우저 캐시에 저장될 수 있으므로 캐시 가능.
GET /products HTTP/1.1
Host: example.com
위 요청은 /products 리소스에 대한 정보를 조회.
그런데 GET 방식으로 데이터를 전송할 때가 있습니다. 데이터를 서버로 전송할 때쿼리스트링 (Query String Parameters)를 사용해서 전송합니다. 즉, URL에 데이터가 포함되어 전송됩니다. 위에서 한 것 처럼, "" 혹은 '#', 혹은 알 수 없는 것을 method에 넣었을 때, 디폴트 값으로 GET이 쓰입니다. 그래서 URL에 데이터가 포함되어 있는 상태입니다. 그것을 쿼리 스트링이라고 합니다. 추가로 값으 여러개일 경우, & 로 연결된 key=value 형태로 구성됩니다.
2. POST 목적: 서버에 데이터를 제출하여 리소스를 생성하거나 특정 작업을 수행. 특징: 서버 상태를 변경하므로 안전하지 않음. 요청마다 결과가 달라질 수 있으므로 멱등성이 없음. 보통 데이터 제출 후 생성된 리소스의 URL이 응답에 포함됨.
POST /products HTTP/1.1
Content-Type: application/json
{
"name": "New Product",
"price": 100
}
서버에 새로운 상품 데이터를 추가.
3. PUT 목적: 서버에서 특정 리소스를 생성하거나 업데이트. 특징: 동일한 요청이 여러 번 보내져도 결과가 같으므로 멱등성을 가짐. 리소스가 존재하지 않으면 새로 생성, 존재하면 수정.
5. DELETE 목적: 서버에서 리소스를 삭제. 특징: 서버 상태를 변경하므로 안전하지 않음. 동일한 요청이 여러 번 보내져도 결과는 동일하므로 멱등성을 가짐.
DELETE /products/1 HTTP/1.1
ID가 1인 상품 삭제.
6. HEAD 목적: GET 요청과 동일하나, 응답에서 본문(Body)을 제외하고 헤더(Header) 정보만 요청. 특징: 서버 상태를 변경하지 않으므로 안전하고 멱등성을 가짐. 주로 리소스의 메타데이터를 확인하거나 존재 여부를 확인할 때 사용.
HEAD /products/1 HTTP/1.1
7. OPTIONS 목적: 서버에서 지원하는 HTTP 메서드를 확인. 특징: 서버와 클라이언트 간의 통신 규약을 사전에 점검할 때 사용. 안전하며 멱등성을 가짐.
OPTIONS /products HTTP/1.1
/products 리소스에 대해 사용 가능한 메서드를 확인.
8. TRACE 목적: 클라이언트와 서버 간의 요청을 그대로 반환하여 통신 경로를 진단. 특징: 서버 상태를 변경하지 않으므로 안전. 보안상의 이유로 잘 사용되지 않음.
TRACE /products HTTP/1.1
9. CONNECT 목적: 프록시 서버와의 터널링에 사용. 주로 HTTPS 요청에서 SSL/TLS를 설정하기 위해 사용. 특징: 안전성, 멱등성과는 관련이 적음. 주로 네트워크 통신을 설정할 때 사용.
메서드 선택 기준 리소스를 조회하려면: GET 리소스를 생성하려면: POST 리소스를 수정 또는 생성하려면: PUT 리소스를 일부만 수정하려면: PATCH 리소스를 삭제하려면: DELETE 메타데이터를 확인하려면: HEAD 서버 지원 메서드를 확인하려면: OPTIONS
아까 만든 datathrow을 통해 datacatch로 데이터를 보내보겠습니다. 여기서 이제 action에 링크를 넣어주면 됩니다. 하지만 여기서는 간단하게 경로만 지정해 주면 됩니다. 이제 여기서(datathrow) 전송을 누르면 아까 만든 data-catch와 함께 key:value 값도 함께 보내져 왔습니다.
그런데 이동만 했지 값을 받아보고 싶을 때는 views에서 templates로 데이터를 보내면 됩니다. 먼저 views에서
data_catch에 씁니다. 왜냐하면 데이터를 받아서 화면에 보여주는 것은 data_catch이기 때문입니다. 그리고 저 get('id')에서 id는 바로 datathrow에 있던 name='id'입니다. name의 역할이 여기서 나타나게 됩니다. 저 name은 key가 name이고, 값으로는 전달하는 값이기 때문에, 그 값을 그대로 가져옵니다.
그리고 가져온 값을 그대로 context로 전송해, 그 값을 받도록 합니다.
그러면 정상적으로 값이 나오는 것을 볼 수 있습니다.
자 그러면 코드를 더 자세히 보겠습니다.
이 코드 Django 프레임워크에서 사용되는 코드로, HTTP GET 요청에서 전달된 매개변수 id 값을 가져오는 역할을 합니다. 먼저, request.GET 이것은 HTTP GET 요청에 포함된 쿼리 매개변수를 저장하는 객체입니다. 구현 방식: Django에서 제공하는 QueryDict 객체로, URL에 포함된 키-값 쌍을 관리합니다. 예시: 요청 URL: https://example.com/some-page?id=123 request.GET: {'id': '123'} 자, 아까 요청을 보낼때 request로 보내지는데, input을 통해 name은 id, 값으로는 사용자가 넣은 값이라고 했습니다. 게다가 name은 key:value에서 key의 형태로 보내진다고도 말했습니다. 즉, id : 사용자값으로 값이 나올 것이고, 그것을 그대로 가져온다고 생각하시면 됩니다. 그리고 그 딕셔너리 형태에서 get을 통해 key 값을 불러, value 값을 최종적으로 꺼내 id에 넣겠다는 의미입니다.
참고로 get은 파이썬 함수로 키(key)를 조회할 때 활용되며, 키가 존재하지 않을 경우 디폴트 값을 반환하는 특징이 있습니다. 예시:
my_dict = {"name": "Alice", "age": 25}
result = my_dict.get("name") # "Alice" 반환
print(result) # 출력: Alice
다시 돌아가기
그런데 값이 다시 쓰기 위해서는 계속해서 datathrow로 가야합니다. 그럴 필요가 없게 하이퍼링크를 만들어 주면 됩니다. 그러기 위해서 <a></a>가 있습니다.
먼저, <a> 태그는 HTML에서 하이퍼링크를 정의할 때 사용하는 태그입니다. 웹 페이지에서 다른 페이지로 이동하거나 특정 URL, 파일, 이메일 주소 등으로 연결할 때 사용됩니다. 구조
<a href="URL">링크 텍스트</a>
href 속성: 이동할 대상의 URL을 정의합니다. 링크 텍스트: 사용자에게 표시되는 클릭 가능한 텍스트 또는 콘텐츠입니다. 속성 (Attributes) a. href (Hypertext Reference) 링크의 대상 URL을 지정합니다. 값의 유형: 절대 URL: https://example.com/page 상대 URL: page.html, ../folder/page.html 특수값: #id (같은 페이지 내 특정 요소로 이동)
b. target 링크를 열 방법을 정의합니다. 주요 값: _self: (기본값) 현재 창이나 탭에서 열기. _blank: 새 창 또는 새 탭에서 열기. _parent: 부모 프레임에서 열기. _top: 최상위 프레임에서 열기.
c. rel 링크와 대상의 관계를 정의합니다. 주요 값: noopener: 새 탭에서 열 때 원본 페이지의 보안을 강화. noreferrer: HTTP 리퍼러 정보를 포함하지 않음. nofollow: 검색 엔진이 링크를 따라가지 않도록 지시.
d. type 링크된 리소스의 MIME 유형을 명시. 예: type="application/pdf" (PDF 파일임을 명시)
