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

잔글
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
23번째 줄: 23번째 줄:
 
|어떤 정보를 열람할 때.
 
|어떤 정보를 열람할 때.
 
|어떤 정보를 작성, 수정할 때.
 
|어떤 정보를 작성, 수정할 때.
|-
 
|
 
|
 
|
 
 
|}
 
|}
 
=GET입력받기=
 
=GET입력받기=
46번째 줄: 42번째 줄:
 
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
 
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
 
|}
 
|}
===input 태그 요소===
+
===사용자로부터 POST입력받기===
{| class="wikitable"
 
!요소
 
!설명
 
|-
 
|name=
 
|폼을 식별하기 위한 이름. view에서 구분하기 위한 식별자이다.
 
|-
 
|target=
 
|현재의 창이 아닌, 다른 지역에서 열리게 할 수 있다.
 
|-
 
|enctype=
 
|데이터의 인코딩 타입.(암호화방식 지정)
 
|-
 
|value=
 
|상황에 따라 보낼 값 혹은 나타낼 값.
 
|}다음과 같이 쓰인다. <code><form method="get" action="{% url 'pubg:search_result' %}" ></code>
 
 
 
최소한 method와 submit이 필요하다.
 
 
 
장고에선 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>
 
</syntaxhighlight>submit 버튼으로 전송되어 보내진 데이터는 해당 url 그대로 요청방식만 post로 바꾸어 요청한다.
 
 
 
간단한 텍스트를 받는 형태가 되는데, 이처럼 form 안엔 다양한 input type이 있다.
 
 
 
다양한 방법이 있겠지만, input의 name속성에 데이터를 담아 get으로 전달한다.
 
{| class="wikitable"
 
!type
 
!설명
 
!
 
|-
 
| colspan="1" rowspan="1" |hidden
 
| colspan="1" rowspan="1" |사용자에게는 보여지지 않고 서버로 넘겨지는 값
 
|
 
|-
 
| colspan="1" rowspan="1" |text
 
| colspan="1" rowspan="1" |한 줄짜리 텍스트 입력상자
 
| rowspan="2" |
 
{| class="wikitable"
 
|+
 
!옵션
 
!설명
 
|-
 
|maxlength
 
|입력할 수 있는 최대 문자갯수
 
|-
 
|size
 
|입력창의 크기(단위는 문자갯수)
 
|-
 
|value
 
|초기텍스트
 
|}
 
|-
 
|password
 
|문자 대신 *등 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다.
 
|-
 
|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>
 
 
 
<option value="선택3"></option>
 
 
 
[아마 >< 사이에 텍스트를 넣으면 그 텍스트가 나올 것 같은데;]
 
|-
 
| colspan="1" rowspan="1" |search
 
| colspan="1" rowspan="1" |검색 상자
 
|
 
|-
 
| colspan="1" rowspan="1" |tel
 
| colspan="1" rowspan="1" |전화번호 입력 필드
 
|
 
|-
 
| colspan="1" rowspan="1" |url
 
| 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"
 
!속성
 
!설명
 
|-
 
| colspan="1" rowspan="1" |placeholder
 
| colspan="1" rowspan="1" |필드 안에 내용을 포함하고 있다가 클릭하면 사라져, 입력할 수 있도록 하는 속성.
 
|-
 
|required
 
|필수로 입력해야 하는 것들을 지정한다.(그냥 이 단어만 집어넣으면 됨)
 
|-
 
|name
 
|데이터가 담기면 name=값 형태의 폼 데이터를 만들어 보낸다.
 
|}
 
 
 
= 사용자로부터 POST입력받기 =
 
 
 
 
==폼==
 
==폼==
 
===탬플릿===
 
===탬플릿===
266번째 줄: 83번째 줄:
 
     {% csrf_token %}
 
     {% csrf_token %}
 
     {{form}}
 
     {{form}}
     <input type="submit" value="버튼에넣을말"
+
     <input type="submit" value="버튼에넣을말">
 
</form>
 
</form>
 
</syntaxhighlight>
 
</syntaxhighlight>
303번째 줄: 120번째 줄:
 
|위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
 
|위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
 
따로따로 나누어 HTML을 꾸며주고 싶은 경우.
 
따로따로 나누어 HTML을 꾸며주고 싶은 경우.
 +
|-
 +
|제출 전 확인
 +
|onsubmit 옵션을 다음과 같이 붙여넣으면 제출 전 간단한 확인이 이루어진다.
 +
|<syntaxhighlight lang="html+django">
 +
<form action="{% url  %}" onsubmit="return confirm('경고. 엑셀의 내용으로 학생 응답을 덮어씁니다.')">
 +
</syntaxhighlight>
 
|}
 
|}
 
==데이터 받기==
 
==데이터 받기==
308번째 줄: 131번째 줄:
  
 
===폼과 탬플릿===
 
===폼과 탬플릿===
잘 정리해보자.
+
#field.id_for_label - field의 tag에서 사용될 id 값으로 보통 'id_ + field.name'
#'''field.id_for_label''' - field의 tag에서 사용될 id 값으로 보통 'id_ + field.name'
 
 
#field.initial - 모델에서의 default 속성의 값
 
#field.initial - 모델에서의 default 속성의 값
 
#field.is_hidden - hidden 속성이 있다면 True 그렇지 않으면 False
 
#field.is_hidden - hidden 속성이 있다면 True 그렇지 않으면 False
#'''field.errors''' - field의 유효성 검증할 때 발견된 오류들
+
#field.errors - field의 유효성 검증할 때 발견된 오류들
 
#field.html_name - 렌더링될 tag의 name 속성의 값. 즉, 'form.prefix + field.name'로 폼클래스에 prefix 변수가 선언되어 있지 않으면 field.name 과 동일
 
#field.html_name - 렌더링될 tag의 name 속성의 값. 즉, 'form.prefix + field.name'로 폼클래스에 prefix 변수가 선언되어 있지 않으면 field.name 과 동일
 
#field.help_text - 도움말의 역할을 하는 텍스트로 form 필드에 해당 속성이 없으면 model 필드에서 참조
 
#field.help_text - 도움말의 역할을 하는 텍스트로 form 필드에 해당 속성이 없으면 model 필드에서 참조
#'''field.label''' - 모델의 verbose_name과 동일한 데이터로 해당 필드를 사람이 이해하기 쉬게 부르는 호칭
+
#field.label - 모델의 verbose_name과 동일한 데이터로 해당 필드를 사람이 이해하기 쉬게 부르는 호칭
 
#field.label_tag - field.label 을 렌더링한 태그
 
#field.label_tag - field.label 을 렌더링한 태그
 
#field.name - field 의 이름. 폼에 선언된 field의 변수명과 동일
 
#field.name - field 의 이름. 폼에 선언된 field의 변수명과 동일
#'''field.value''' - 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에 저장된 값