"1. 장고 폼. HTML form 태그"의 두 판 사이의 차이
잔글 (Sam님이 1. HTML form 태그 문서를 1. 장고 폼. HTML form 태그 문서로 이동했습니다) |
잔글 |
||
(사용자 2명의 중간 판 5개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
[[분류:3-1. 장고 폼]] | [[분류:3-1. 장고 폼]] | ||
+ | |||
+ | ===폼=== | ||
+ | 폼에 입력된 데이터는 서버로 보내진다. | ||
+ | |||
+ | 폼은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다. | ||
+ | |||
+ | (검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.) | ||
+ | ===GET과 POST=== | ||
+ | 사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다. | ||
+ | {| class="wikitable" | ||
+ | |+ | ||
+ | ! | ||
+ | !GET | ||
+ | !POST | ||
+ | |- | ||
+ | |형태 | ||
+ | |주소에 변수가 드러난다. | ||
+ | |입력내용이 감춰진다. | ||
+ | body에 정보를 담아 보낸다. | ||
+ | |- | ||
+ | |용법 | ||
+ | |어떤 정보를 열람할 때. | ||
+ | |어떤 정보를 작성, 수정할 때. | ||
+ | |} | ||
+ | =GET입력받기= | ||
+ | {% url '인덱스' %}?변수=값 | ||
+ | |||
+ | 형태로 보내면 get 방식으로 값을 변수 안으로 보낸다. | ||
+ | ==Template에서 입력받기. form 태그.== | ||
+ | 사용자로부터 입력을 받기 위해선 form 태그를 사용한다. | ||
+ | ===요소=== | ||
+ | {| class="wikitable" | ||
+ | !요소 | ||
+ | !설명 | ||
+ | |- | ||
+ | |method= | ||
+ | |get, post 중에 어떤 방식을 사용할지 넣는다. | ||
+ | |- | ||
+ | |action= | ||
+ | |폼을 전송할 주소 지정. | ||
+ | 안쓰거나 '#'을 두면 현재 페이지를 의미한다. | ||
+ | |} | ||
+ | ===사용자로부터 POST입력받기=== | ||
+ | ==폼== | ||
+ | ===탬플릿=== | ||
+ | <syntaxhighlight lang="html"> | ||
+ | <form action="{%url '경로', 전달할인자 %}" method="post"> | ||
+ | {% csrf_token %} | ||
+ | 이외 버튼을 만드는 코드 | ||
+ | </form> | ||
+ | </syntaxhighlight> | ||
+ | ===url추가=== | ||
+ | path에 경로와 함수를 추가해준다. | ||
+ | |||
+ | == 폼 생성 == | ||
+ | # | ||
+ | 최종적으로 템플릿에는 다음과 같이 쓰인다. <nowiki>{{form}}</nowiki>은 뷰에서 넘어오는 변수. | ||
+ | |||
+ | <form action='주소' method="post"> | ||
+ | |||
+ | {% csrf_token %} | ||
+ | |||
+ | <nowiki>{{Form}}</nowiki> | ||
+ | |||
+ | </form> | ||
+ | |||
+ | 폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다. | ||
+ | |||
+ | if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.) | ||
+ | |||
+ | {% csrf_token%}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다. | ||
+ | |||
+ | ==탬플릿에서의 활용== | ||
+ | {| class="wikitable" | ||
+ | ! | ||
+ | ! | ||
+ | ! | ||
+ | |- | ||
+ | |탬플릿에서 입력 | ||
+ | |<syntaxhighlight lang="html+django"> | ||
+ | <form action="{{url 주소}}" method="post"> | ||
+ | {% csrf_token %} | ||
+ | {{form}} | ||
+ | <input type="submit" value="버튼에넣을말"> | ||
+ | </form> | ||
+ | </syntaxhighlight> | ||
+ | | | ||
+ | *<nowiki>{{form}}</nowiki>태그를 넣으면 자동으로 form에 맞는 필드를 생성해준다. | ||
+ | *CSRF 공격을 방지하기 위해 form태그 아래 필수적으로 추가해주고, | ||
+ | *submit 버튼은 개발자가 직접 만들어주어야 한다. | ||
+ | |- | ||
+ | |폼태그의 종류 | ||
+ | | | ||
+ | {| class="wikitable" | ||
+ | |+ | ||
+ | !종류 | ||
+ | !설명 | ||
+ | |- | ||
+ | |<nowiki>{{form.as_table}}</nowiki> | ||
+ | |<nowiki><tr></nowiki>태그로 감싸서 렌더링된다. <nowiki>{{form}}</nowiki>과 동일함. | ||
+ | |- | ||
+ | |<nowiki>{{form.as_p}}</nowiki> | ||
+ | |<nowiki><p>태그로 감싸 렌더링된다.</nowiki> | ||
+ | |- | ||
+ | |<nowiki>{{form.as_ul}}</nowiki> | ||
+ | |<nowiki><li>태그로 감싸 렌더링된다.</nowiki> | ||
+ | |} | ||
+ | |보통은 p태그로 감싼 후 css에서 p태그를 다듬는 방식을 사용한다. | ||
+ | 다음과 같은 형태로 요소별로 css를 먹여 꾸며주기도 한다. | ||
+ | |||
+ | <nowiki>#</nowiki>섹션명 input[type="password"]{ | ||
+ | |||
+ | 내용 | ||
+ | |||
+ | } | ||
+ | |- | ||
+ | |요소 나누어 받기 | ||
+ | | | ||
+ | |위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다. | ||
+ | 따로따로 나누어 HTML을 꾸며주고 싶은 경우. | ||
+ | |- | ||
+ | |제출 전 확인 | ||
+ | |onsubmit 옵션을 다음과 같이 붙여넣으면 제출 전 간단한 확인이 이루어진다. | ||
+ | |<syntaxhighlight lang="html+django"> | ||
+ | <form action="{% url %}" onsubmit="return confirm('경고. 엑셀의 내용으로 학생 응답을 덮어씁니다.')"> | ||
+ | </syntaxhighlight> | ||
+ | |} | ||
+ | ==데이터 받기== | ||
+ | 웹페이지에서 받은 데이터의 경우, form의 cleaned_date 속성에 담긴다. 즉, form.cleaned_data로 해당 데이터에 접근할 수 있다. | ||
+ | |||
+ | ===폼과 탬플릿=== | ||
+ | #field.id_for_label - field의 tag에서 사용될 id 값으로 보통 'id_ + field.name' | ||
+ | #field.initial - 모델에서의 default 속성의 값 | ||
+ | #field.is_hidden - hidden 속성이 있다면 True 그렇지 않으면 False | ||
+ | #field.errors - field의 유효성 검증할 때 발견된 오류들 | ||
+ | #field.html_name - 렌더링될 tag의 name 속성의 값. 즉, 'form.prefix + field.name'로 폼클래스에 prefix 변수가 선언되어 있지 않으면 field.name 과 동일 | ||
+ | #field.help_text - 도움말의 역할을 하는 텍스트로 form 필드에 해당 속성이 없으면 model 필드에서 참조 | ||
+ | #field.label - 모델의 verbose_name과 동일한 데이터로 해당 필드를 사람이 이해하기 쉬게 부르는 호칭 | ||
+ | #field.label_tag - field.label 을 렌더링한 태그 | ||
+ | #field.name - field 의 이름. 폼에 선언된 field의 변수명과 동일 | ||
+ | #field.value - field에 저장된 값 |
2023년 10월 26일 (목) 14:45 기준 최신판
1 폼[편집 | 원본 편집]
폼에 입력된 데이터는 서버로 보내진다.
폼은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다.
(검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.)
2 GET과 POST[편집 | 원본 편집]
사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다.
GET | POST | |
---|---|---|
형태 | 주소에 변수가 드러난다. | 입력내용이 감춰진다.
body에 정보를 담아 보낸다. |
용법 | 어떤 정보를 열람할 때. | 어떤 정보를 작성, 수정할 때. |
3 GET입력받기[편집 | 원본 편집]
{% url '인덱스' %}?변수=값
형태로 보내면 get 방식으로 값을 변수 안으로 보낸다.
3.1 Template에서 입력받기. form 태그.[편집 | 원본 편집]
사용자로부터 입력을 받기 위해선 form 태그를 사용한다.
3.1.1 요소[편집 | 원본 편집]
요소 | 설명 |
---|---|
method= | get, post 중에 어떤 방식을 사용할지 넣는다. |
action= | 폼을 전송할 주소 지정.
안쓰거나 '#'을 두면 현재 페이지를 의미한다. |
3.1.2 사용자로부터 POST입력받기[편집 | 원본 편집]
3.2 폼[편집 | 원본 편집]
3.2.1 탬플릿[편집 | 원본 편집]
<form action="{%url '경로', 전달할인자 %}" method="post">
{% csrf_token %}
이외 버튼을 만드는 코드
</form>
3.2.2 url추가[편집 | 원본 편집]
path에 경로와 함수를 추가해준다.
3.3 폼 생성[편집 | 원본 편집]
최종적으로 템플릿에는 다음과 같이 쓰인다. {{form}}은 뷰에서 넘어오는 변수.
<form action='주소' method="post">
{% csrf_token %}
{{Form}}
</form>
폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다.
if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.)
{% csrf_token%}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다.
3.4 탬플릿에서의 활용[편집 | 원본 편집]
탬플릿에서 입력 | <form action="{{url 주소}}" method="post">
{% csrf_token %}
{{form}}
<input type="submit" value="버튼에넣을말">
</form>
|
| ||||||||
폼태그의 종류 |
|
보통은 p태그로 감싼 후 css에서 p태그를 다듬는 방식을 사용한다.
다음과 같은 형태로 요소별로 css를 먹여 꾸며주기도 한다. #섹션명 input[type="password"]{ 내용 } | ||||||||
요소 나누어 받기 | 위에선 {{form}}태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
따로따로 나누어 HTML을 꾸며주고 싶은 경우. | |||||||||
제출 전 확인 | onsubmit 옵션을 다음과 같이 붙여넣으면 제출 전 간단한 확인이 이루어진다. | <form action="{% url %}" onsubmit="return confirm('경고. 엑셀의 내용으로 학생 응답을 덮어씁니다.')">
|
3.5 데이터 받기[편집 | 원본 편집]
웹페이지에서 받은 데이터의 경우, form의 cleaned_date 속성에 담긴다. 즉, form.cleaned_data로 해당 데이터에 접근할 수 있다.
3.5.1 폼과 탬플릿[편집 | 원본 편집]
- field.id_for_label - field의 tag에서 사용될 id 값으로 보통 'id_ + field.name'
- field.initial - 모델에서의 default 속성의 값
- field.is_hidden - hidden 속성이 있다면 True 그렇지 않으면 False
- field.errors - field의 유효성 검증할 때 발견된 오류들
- field.html_name - 렌더링될 tag의 name 속성의 값. 즉, 'form.prefix + field.name'로 폼클래스에 prefix 변수가 선언되어 있지 않으면 field.name 과 동일
- field.help_text - 도움말의 역할을 하는 텍스트로 form 필드에 해당 속성이 없으면 model 필드에서 참조
- field.label - 모델의 verbose_name과 동일한 데이터로 해당 필드를 사람이 이해하기 쉬게 부르는 호칭
- field.label_tag - field.label 을 렌더링한 태그
- field.name - field 의 이름. 폼에 선언된 field의 변수명과 동일
- field.value - field에 저장된 값