"1. 장고 폼. HTML form 태그"의 두 판 사이의 차이

Pywiki
둘러보기로 가기 검색하러 가기
잔글
 
(같은 사용자의 중간 판 4개는 보이지 않습니다)
2번째 줄: 2번째 줄:
  
 
===폼===
 
===폼===
폼에 입력된 데이터는 서버로 보내진다. 홈은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다. 사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다.
+
폼에 입력된 데이터는 서버로 보내진다.
 +
 
 +
폼은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다.  
  
 
(검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.)
 
(검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.)
 
===GET과 POST===
 
===GET과 POST===
 +
사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다.
 
{| class="wikitable"
 
{| class="wikitable"
 
|+
 
|+
15번째 줄: 18번째 줄:
 
|주소에 변수가 드러난다.
 
|주소에 변수가 드러난다.
 
|입력내용이 감춰진다.
 
|입력내용이 감춰진다.
|-
+
body에 정보를 담아 보낸다.
|
 
|
 
|body에 정보를 담아 보낸다.
 
 
|-
 
|-
 
|용법
 
|용법
 
|어떤 정보를 열람할 때.
 
|어떤 정보를 열람할 때.
 
|어떤 정보를 작성, 수정할 때.
 
|어떤 정보를 작성, 수정할 때.
|-
 
|
 
|
 
|
 
 
|}
 
|}
 
=GET입력받기=
 
=GET입력받기=
46번째 줄: 42번째 줄:
 
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
 
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
 
|}
 
|}
===input 태그 요소===
+
===사용자로부터 POST입력받기===
{| class="wikitable"
+
==폼==
|+
+
===탬플릿===
!요소
+
<syntaxhighlight lang="html">
!설명
+
<form action="{%url '경로', 전달할인자 %}" method="post">
|-
+
{% csrf_token %}
|name=
+
이외 버튼을 만드는 코드
|폼을 식별하기 위한 이름. view에서 구분하기 위한 식별자이다.
+
</form>
|-
+
</syntaxhighlight>
|target=
+
===url추가===
|현재의 창이 아닌, 다른 지역에서 열리게 할 수 있다.
+
path에 경로와 함수를 추가해준다.
|-
+
 
|enctype=
+
== 폼 생성 ==
|데이터의 인코딩 타입.(암호화방식 지정)
+
#
|-
+
최종적으로 템플릿에는 다음과 같이 쓰인다. <nowiki>{{form}}</nowiki>은 뷰에서 넘어오는 변수.
|value=
+
 
|상황에 따라 보낼 값 혹은 나타낼 값.
+
<form action='주소' method="post">
|}다음과 같이 쓰인다. <code><form method="get" action="{% url 'pubg:search_result' %}" ></code>
+
 
 +
    {% csrf_token %}
  
최소한 method와 submit이 필요하다.
+
   <nowiki>{{Form}}</nowiki>
  
장고에선 csrf 토큰이 필수로 요구된다.
 
===input type===
 
폼은 다음과 같은 형태로 입력된다.<syntaxhighlight lang="html">
 
<form>
 
    <li>이름: <input type="text" id="user_name"></li>
 
    <li>전화번호: <input type="tel" id="user_tel"></li>
 
    <li>메일주소: <input type="email" id="user_email"></li>
 
    <input type="submit" value="전송하기">
 
 
</form>
 
</form>
</syntaxhighlight>submit 버튼으로 전송되어 보내진 데이터는 해당 url 그대로 요청방식만 post로 바꾸어 요청한다.
 
  
간단한 텍스트를 받는 형태가 되는데, 이처럼 form 안엔 다양한 input type이 있다.
+
폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다.
 +
 
 +
if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.)
 +
 
 +
{% csrf_token%}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다.
  
다양한 방법이 있겠지만, input의 name속성에 데이터를 담아 get으로 전달한다.
+
==탬플릿에서의 활용==
 
{| class="wikitable"
 
{| class="wikitable"
!type
+
!
!설명
+
!
 
!
 
!
 
|-
 
|-
| colspan="1" rowspan="1" |hidden
+
|탬플릿에서 입력
| colspan="1" rowspan="1" |사용자에게는 보여지지 않고 서버로 넘겨지는 값
+
|<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 버튼은 개발자가 직접 만들어주어야 한다.
 
|-
 
|-
| colspan="1" rowspan="1" |text
+
|폼태그의 종류
| colspan="1" rowspan="1" |한 줄짜리 텍스트 입력상자
+
|
| rowspan="2" |
 
 
{| class="wikitable"
 
{| class="wikitable"
 
|+
 
|+
!옵션
+
!종류
 
!설명
 
!설명
 
|-
 
|-
|maxlength
+
|<nowiki>{{form.as_table}}</nowiki>
|입력할 수 있는 최대 문자갯수
+
|<nowiki><tr></nowiki>태그로 감싸서 렌더링된다. <nowiki>{{form}}</nowiki>과 동일함.
 
|-
 
|-
|size
+
|<nowiki>{{form.as_p}}</nowiki>
|입력창의 크기(단위는 문자갯수)
+
|<nowiki><p>태그로 감싸 렌더링된다.</nowiki>
 
|-
 
|-
|value
+
|<nowiki>{{form.as_ul}}</nowiki>
|초기텍스트
+
|<nowiki><li>태그로 감싸 렌더링된다.</nowiki>
 
|}
 
|}
|-
+
|보통은 p태그로 감싼 후 css에서 p태그를 다듬는 방식을 사용한다.
|password
+
다음과 같은 형태로 요소별로 css를 먹여 꾸며주기도 한다.
|문자 대신 *등 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다.
 
|-
 
|textarea
 
|여러 줄의 텍스트를 입력받을 때.
 
|
 
{| class="wikitable"
 
!옵션
 
!설명
 
|-
 
|wrap
 
|자동 줄바꿈 처리 지정.
 
OFF, HARD, SOFT 중에서 가능.
 
|}<textarea cols="20" rows="5">초기텍스트. 없으면 빈공간</textarea>
 
|-
 
|datalist
 
|선택 가능한 데이터 목록을 보여준다.
 
(그러나, 목록 외에 값을 써넣을 수도 있다.)
 
 
 
input의 list속성값과 datalist의 id속성을 동일하게 두어 연결한다.
 
|<input type="text" list="이름">
 
<datalist id="이름">
 
 
 
<option value="선택1">
 
 
 
<option value="선택2">
 
 
 
...
 
 
 
</datalist>
 
|-
 
|select
 
|드롭다운 목록을 보여주고 그 중 하나를 선택.
 
위와 동일한 형태지만, 선택만 가능하다.
 
 
 
selected 옵션으로 처음 선택되어 있는 것을 지정할 수 있음.
 
|<select name="이름">
 
<option value="선택1"></option>
 
  
<option value="선택2" selected></option>
+
<nowiki>#</nowiki>섹션명 input[type="password"]{
  
<option value="선택3"></option>
+
내용
  
[아마 >< 사이에 텍스트를 넣으면 그 텍스트가 나올 것 같은데;]
+
}
 
|-
 
|-
| colspan="1" rowspan="1" |search
+
|요소 나누어 받기
| colspan="1" rowspan="1" |검색 상자
 
 
|
 
|
 +
|위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
 +
따로따로 나누어 HTML을 꾸며주고 싶은 경우.
 
|-
 
|-
| colspan="1" rowspan="1" |tel
+
|제출 전 확인
| colspan="1" rowspan="1" |전화번호 입력 필드
+
|onsubmit 옵션을 다음과 같이 붙여넣으면 제출 전 간단한 확인이 이루어진다.
|
+
|<syntaxhighlight lang="html+django">
|-
+
<form action="{% url  %}" onsubmit="return confirm('경고. 엑셀의 내용으로 학생 응답을 덮어씁니다.')">
| colspan="1" rowspan="1" |url
+
</syntaxhighlight>
| colspan="1" rowspan="1" |URL 필드
 
|
 
|-
 
| colspan="1" rowspan="1" |email
 
| colspan="1" rowspan="1" |메일 주소 필드
 
|
 
|-
 
| colspan="1" rowspan="1" |password
 
| colspan="1" rowspan="1" |비밀번호 필드
 
|
 
|-
 
| colspan="1" rowspan="1" |number
 
| colspan="1" rowspan="1" |숫자 조절 화살표
 
|
 
|-
 
| colspan="1" rowspan="1" |checkbox
 
| colspan="1" rowspan="1" |주어진 항목에서 2개 이상 선택 가능한 체크박스
 
|
 
|-
 
| colspan="1" rowspan="1" |radio
 
| colspan="1" rowspan="1" |주어진 항목에서 1개만 선택 가능한 라디오 버튼
 
|value에 request에 담을 값을 지정한다.
 
|-
 
|month
 
|연, 월
 
|
 
|-
 
| colspan="1" rowspan="1" |date
 
| colspan="1" rowspan="1" |연, 월, 일
 
|<input type='date' name='이름' value="2020-03-22">
 
|-
 
| colspan="1" rowspan="1" |submit
 
| colspan="1" rowspan="1" |전송(보내기) 버튼
 
|<input type="submit" value="버튼에나타낼텍스트">
 
|-
 
| colspan="1" rowspan="1" |file
 
| colspan="1" rowspan="1" |첨부 파일.(각종 이미지, 음악, 영상 등 미디어파일)
 
|accetp 속성으로 받을 파일의 확장자 지정 가능.
 
image/* 형태로 모든 이미지를 받을 수도 있음.  
 
|-
 
| colspan="1" rowspan="1" |reset
 
| colspan="1" rowspan="1" |초기화(리셋)
 
|
 
|-
 
|hidden
 
|사용자에게 보이지 않지만, 담겨저서 보내지는 것.
 
|<nowiki><input type="hidden" name="이름" value="{{변수}}"></nowiki><nowiki></input></nowiki>
 
 
|}
 
|}
====input 속성====
+
==데이터 받기==
{| class="wikitable"
+
웹페이지에서 받은 데이터의 경우, form의 cleaned_date 속성에 담긴다. , form.cleaned_data로 해당 데이터에 접근할 수 있다.
!속성
 
!설명
 
|-
 
| colspan="1" rowspan="1" |placeholder
 
| colspan="1" rowspan="1" |필드 안에 내용을 포함하고 있다가 클릭하면 사라져, 입력할 수 있도록 하는 속성.
 
|-
 
|required
 
|필수로 입력해야 하는 것들을 지정한다.(그냥 이 단어만 집어넣으면 됨)
 
|-
 
|name
 
|데이터가 담기면 name=값 형태의 폼 데이터를 만들어 보낸다.
 
|}
 
 
 
 
 
=사용자로부터 POST입력받기=
 
==폼==
 
===탬플릿===
 
<syntaxhighlight lang="html">
 
<form action="{%url '경로', 전달할인자 %}" method="post">
 
{% csrf_token %}
 
이외 버튼을 만드는 코드
 
</form>
 
</syntaxhighlight>
 
===url추가===
 
path에 경로와 함수를 추가해준다.
 
===뷰===
 
[지금 위키문법이 사용되서 글이 안보이게 된 듯한데;;]
 
 
 
 
 
 
 
폼 생성
 
#
 
최종적으로 템플릿에는 다음과 같이 쓰인다. {{form}}은 뷰에서 넘어오는 변수.
 
 
 
<form action='주소' method="post">
 
 
 
    {% csrf_token %}
 
 
 
   <nowiki>{{Form}}</nowiki>
 
 
 
   
 
 
 
</form>
 
 
 
폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다.p.194
 
 
 
if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.)
 
 
 
  
{% csrf_token %}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다.
+
===폼과 탬플릿===
 +
#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>
  • {{form}}태그를 넣으면 자동으로 form에 맞는 필드를 생성해준다.
  • CSRF 공격을 방지하기 위해 form태그 아래 필수적으로 추가해주고,
  • submit 버튼은 개발자가 직접 만들어주어야 한다.
폼태그의 종류
종류 설명
{{form.as_table}} <tr>태그로 감싸서 렌더링된다. {{form}}과 동일함.
{{form.as_p}} <p>태그로 감싸 렌더링된다.
{{form.as_ul}} <li>태그로 감싸 렌더링된다.
보통은 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 폼과 탬플릿[편집 | 원본 편집]

  1. field.id_for_label - field의 tag에서 사용될 id 값으로 보통 'id_ + field.name'
  2. field.initial - 모델에서의 default 속성의 값
  3. field.is_hidden - hidden 속성이 있다면 True 그렇지 않으면 False
  4. field.errors - field의 유효성 검증할 때 발견된 오류들
  5. field.html_name - 렌더링될 tag의 name 속성의 값. 즉, 'form.prefix + field.name'로 폼클래스에 prefix 변수가 선언되어 있지 않으면 field.name 과 동일
  6. field.help_text - 도움말의 역할을 하는 텍스트로 form 필드에 해당 속성이 없으면 model 필드에서 참조
  7. field.label - 모델의 verbose_name과 동일한 데이터로 해당 필드를 사람이 이해하기 쉬게 부르는 호칭
  8. field.label_tag - field.label 을 렌더링한 태그
  9. field.name - field 의 이름. 폼에 선언된 field의 변수명과 동일
  10. field.value - field에 저장된 값