[Django] HTML Form

HTML Form 사용해보기

- form 태그를 사용해서 요청을 보내고 응답 받기 : 이 경우 2개의 페이지가 필요함

1. form이 담긴 html 페이지를 보여주는 페이지 → throw
   

   def throw(request):
       return render(request, 'throw.thml')​

2. form이 전송된 페이지 → catch
   

   def catch(request):
       # 사용자의 모든 정보는 request에 담겨져 있음
       message = request.GET.get('message')
   
       context = {
           'message' : message
       }
   
       return render(request, 'catch.html', context)​

HTML 'form' element

• 웹에서 사용자 정보를 입력하는 여러 방식 제공
  • (text, button, checkbox, file, hidden, image, password, radio, reset, submit)
• 사용자로부터 할당된 데이터를 서버로 전송
• 핵심 속성(attribute)
  1. action : 입력 데이터가 전송될 URL 지정
  2. method : 입력 데이터 전달 방식 지정

 

HTML 'form' Method

1. GET
   • 특정 리소스를 가져오도록 요청할 때 사용
   • 반드시 데이터를 가져올 때만 사용!
   • DB에 변화를 주지 않음
   • CRUD에서 R 역할을 담당
2. POST
   • 서버로 데이터를 전송할 때 사용
   • 리소스를 생성/변경하기 위해 데이터를 HTTP body에 담아 전송
   • 서버에 변경사항을 만듦
   • CRUD에서 C/U/D 역할을 담당

 

[참고] 사이트 간 요청 위조 (CSRF; Cross-site request forgery)

• 웹 애플리케이션 취약점 중 하나
• 사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하여 특정 웹페이지를 보안에 취약하게 한다거나 수정, 삭제 등의 작업을 하게 만드는 공격 방법
• django는 CSRF에 대항하여 middleware와 template tag를 제공
• CSRF 공격 방어 : Security Token 사용 방식 (CSRF Token)
  • 사용자의 데이터에 임의의 난수 값을 부여해, 매 요청마다 해당 난수 값을 포함시켜 전송
  • 이후 서버에서 요청을 받을 때마다 전달된 token 값이 유효한지 검증
  • 일반적으로 데이터 변경이 가능한 POST, PATCH, DELETE Method 등에 적용
  • django는 crsf token 템플릿 태그를 제공
    (해당 태그 없이 요청을 보내면 django 서버는 403 forbidden 응답)

<form action="{% url 'articles:create' %}" method="POST">
 {% csrf_token %}
 ...
</form>​

 

HTML 'input' element

• 사용자로부터 데이터를 입력 받기 위해 사용
• type 속성에 따라 동작 방식이 달라짐
• 핵심 속성(attribute)
  • name
  • 중복 가능, 양식을 제출했을 때 name이라는 이름에 설정된 값을 넘겨서 값을 가져올 수 있음
  • 주요 용도는 GET/POST 방식으로 서버에 전달하는 파라미터(name은 key , value는 value)로
    ?key=value&key=value 형태로 전달됨

 

HTML 'label' element

• 사용자 인터페이스 항목에 대한 설명(caption)을 나타냄
• label을 input 요소와 연결하기
  1. input에 id 속성 부여
  2. label에는 input의 id와 동일한 값의 for 속성이 필요
• label과 input 요소 연결의 주요 이점
  • 시각적인 기능 뿐만 아니라 화면 리더기에서 label을 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있도록 돕는 프로그래밍적 이점
  • label을 클릭해서 input에 초점(focus)를 맞추거나 활성화(activate) 시킬 수 있음

 

HTML 'for' attribute

• for 속성의 값과 일치하는 id를 가진 문서의 첫 번째 요소를 제어
  • 연결 된 요소가 labelable elements인 경우 이 요소에 대한 labeled control이 됨
• labelable elements
  • label 요소와 연결할 수 있는 요소
  • button, input(not hidden type), select, textarea …

 

HTML 'id' attribute

• 전체 문서에서 고유(must unique)해야 하는 식별자를 정의
• 사용 목적
  • linking, scripting, styling 시 요소를 식별

 

HTML

• HyperText Transfer Protocol
• 웹에서 이루어지는 모든 데이터 교환의 기초
• 주어진 리소스가 수행 할 원하는 작업을 나타내는 request methods를 정의
• HTTP request method 종류
  • GET, POST, PUT, DELETE …
  • GET
    • 서버로부터 정보를 조회하는 데 사용
    • 데이터를 가져올 때만 사용해야 함
    • 데이터를 서버로 전송할 때 body가 아닌 Query String Parameters를 통해 전송
    • 우리는 서버에 요청을 하면 HTML 문서 파일 한 장을 받는데, 이때 사용하는 요청의 방식이 GET

 

<!-- articles > templates > throw.html -->

{% extends 'base.html' %}

{% block content %}
  <form action="/catch/" method='GET'>
    <label for="message">입력하세요 : </label>
    <input type="text" name="message" id="message">
    <input type="submit" name="" id="">
  </form>
{% endblock  %}

 

• /catch/ => http://127.0.0.1:8000/catch/
  : 맨 앞에 slash(/)를 붙이면 루트 경로부터 시작
• catch/  => http://127.0.0.1:8000/catch/
  : 루트 경로가 아닌 현재 경로부터 시작
  • ex) 현재 경로가 http://127.0.0.1:8000/dinner/ 라면 => http://127.0.0.1:8000/dinner/catch/

<!-- articles > templates > catch.html -->

{% extends 'base.html' %}

{% block content %}
  <h1>사용자가 {{ message }}(이)라고 보냈어요!</h1>
{% endblock  %}