04_HTML Form

1. HTML form

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

 

 

2. HTML input

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

 

 

3. HTML label

• 사용자 인터페이스 항목에 대한 설명(caption)
• label을 input 요소와 연결
  - input에 id 속성 부여
  - label에는 input의 id와 동일한 값의 for 속성 필요
• label 클릭하여 input에 focus(초점) or activate(활성화) 가능

 

 

4. HTML for

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

 

 

5. HTML id

• 전체 문서에서 고유해야 하는 식별자 정의
• linking, scripting, styling 시 요소를 식별

 

 

6. HTTP GET method

• 서버로부터 정보 조회! 즉, 데이터를 가져올 때만 사용
• 데이터를 서버로 전송할 때 body가 아닌 Query String parameters를 통해 전송
• 우리가 서버에 요청하면, HTML 문서 파일 한 장을 받는데 이떄 요청하는 방식이 GET

 

• Throw

# urls.py

urlpatterns = [
	...,
    path('throw/', views.throw),
]

# views.py

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

<!-- throw.html -->

{% extends 'base.html' %}

{% block content %}
  <form action="#" method="#">
    <label for="message">Throw</label>
    <input type="text" id="message" name="message">
    <input type="submit">
  </form>
{% endblock %}

 

• Catch

# urls.py

urlpatterns = [
	...,
    path('catch/', views.catch),
]

# views.py

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

<!-- catch.html -->

{% extends 'base.html' %}

{% block content %}
  <h1>여기서 {{ message }}를 받으십쇼</h1>
{% endblock %}