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에 저장된 값 |