바뀜

둘러보기로 가기 검색하러 가기
4,979 바이트 제거됨 ,  2021년 6월 22일 (화) 18:59
편집 요약 없음
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입력받기 =
  −
 
   
==폼==
 
==폼==
 
===탬플릿===
 
===탬플릿===
308번째 줄: 125번째 줄:     
===폼과 탬플릿===
 
===폼과 탬플릿===
잘 정리해보자.
+
#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에 저장된 값

둘러보기 메뉴