[Django] HTML form

TOC

• HTML 'form' element
• HTML 'input' element
• HTML 'label' element
• HTML 'for' attribute
• HTTP
  • GET
  • GET 실습

HTML 'form' element

• 웹에서 사용자 정보를 입력하는 여러 방식 제공
• text, button, checkbox, file...
• 사용자로부터 할당된 데이터를 서버로 전송하는 역할

핵심 속성

• action : 입력 데이터가 전송될 URL 지정
• method : 입력 데이터 전달 방식 지정

HTML 'input' element

• 사용자로부터 데이터를 입력 받기 위해 사용
• type 속성에 따라 동작 방식이 달라짐

name

• page 안에서 중복으로 사용 가능
• 양식을 제출했을 때, name이라는 이름에 설정된 값을 넘겨서 값을 가져올 수 있다.
• GET/POST 방식으로 서버에 전달하는 파라미터(name은 key, value는 value)로 매핑
• GET 방식에서는 URL에서 ?key=value&key=value 형식의 key값으로 데이터 전달

id

• page 안에서 중복 사용 불가능
• JavaScript에서 다루려고 지정
• DOM Tree 내에서 node를 식별하는 용도로 사용하므로 이름이 1개만 존재해야 한다.

HTML 'label' element

• UI에 대한 설명(caption)
• label을 input 요소와 연결
  • input에 id 속성 부여
  • label에는 input의 id와 동일한 for 속성 필요
  • 정리 : label for === input id : 같아야 한다!!

주요 이점

• 화면 리더기에서 label을 읽어 접근성에 도움
• label을 클릭해 input에 focus나 activate 가능

HTML 'for' attribute

• for 속성의 값과 일치하는 id를 가진 문서의 첫 번째 요소 제어
• 연결된 요소가 labelable elements인 경우 이 요소에 대한 labeled control

labelable elements?

• label 요소와 연결할 수 있는 요소
• button, input, select,...

HTTP

• HyperText Transfer Protocol
• 웹에서 이루어지는 모든 데이터 교환의 기초
• 주어진 리소스가 수행할 작업을 나타내는 request methods 정의
• request method 종류 : GET, POST, PUT, DELETE...

GET

• 서버의 정보 조회
• 데이터를 가져올 때만 사용
• 데이터를 서버로 전송할 때 body가 아닌 Query String Parameters를 통해 전송
• URL에 넣어서 전송한다는 의미(?key=value&key=value)

GET 실습

# urls.py
urlpatterns = [
    ...
    path('throw/', views.throw),
    path('catch/', views.catch),
]

• 사용자가 정보를 입력하는 form 태그가 **throw/**로 시작하는 url의 페이지에 있다.

• throw 함수가 이 페이지를 구성하는 view 함수

• form 태그에 데이터가 입력되면 /catch/ url과 GET method를 server로 보낼 예정이다.

• 이를 server가 받을 때 catch와 관련된 view 함수를 쓸 것이다.

# views.py
def throw(request):
    return render(request, 'throw.html')

def catch(request):
    message = request.GET.get('message')
    context = {
        'message': message,
    }
    return render(request, 'catch.html', context)

• **catch/**로 form의 데이터를 받으면, url로 받아온 정보들을 처리한다.
• form tag내의 input 태그 name이 message
• request의 쿼리데이터 딕셔너리의 message key의 value를 message에 저장한다.
• 이를 context에 등록하여 catch html 템플릿 내에서 변수로 사용할 것이다.

{%- raw -%}
<!-- templates/throw.html -->
{% extends 'base.html' %}
{% block content %}
  <h1>Throw</h1>
  <form action="/catch/" method="GET">
    <label for="message">Throw</label>
    <input type="text" id="message" name="message" />
    <input type="submit" value="던진다!" />
  </form>
{% endblock content %}
{% endraw -%}

• url에 **/catch/**로 시작하는 url을 server로 보낸다.
• 이는 사실상 server로 데이터를 전송함과 동시에 catch/ 페이지로 이동시키는 역할
• method에 GET 요청을 보내어 입력에 상호작용하는 데이터를 받을 수 있게 한다.
• name인 message가 key로, input:text의 입력값이 value로 variable routing(이후 게시물에서 후술)

{%- raw -%}
<!-- templates/catch.html -->
{% extends 'base.html' %}
{% block content %}
  <h1>Catch</h1>
  <h2> {{ message }} 를 받았다!</h2>
  <a href="/throw/">다시 던져라!</a>
{% endblock content %}
{% endraw -%}

• throw 페이지의 form 태그를 통해 전달한 데이터를 받아 처리한 catch 함수의 context를 이용
• catch함수는 form 태그의 데이터를 받아 처리함과 동시에 catch html 템플릿에 이를 전달하여 렌더링