편집
1,419
번
바뀜
잔글2번째 줄:
2번째 줄: − + + + + 15번째 줄:
18번째 줄: − |-+ − | − | − |body에 정보를 담아 보낸다. − |- − | − | − | 46번째 줄:
42번째 줄: − + − {| 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입력받기= 237번째 줄:
53번째 줄: − ===뷰=== − [지금 위키문법이 사용되서 글이 안보이게 된 듯한데;;] − + − − − + 251번째 줄:
63번째 줄: − − − + − + − 274번째 줄:
83번째 줄: − + 311번째 줄:
120번째 줄: + + + + + + 316번째 줄:
131번째 줄: − 잘 정리해보자.+ − − + − + − +
편집 요약 없음
===폼===
===폼===
폼에 입력된 데이터는 서버로 보내진다. 홈은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다. 사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다.
폼에 입력된 데이터는 서버로 보내진다.
폼은 <input>과 어디로 보낼지 정해주는 action과 어떤 방법으로 보낼지 method 속성으로 이루어져 있다.
(검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.)
(검색의 경우엔 GET. 데이터가 URL에 포함되어, 저장하거나 공유하기 쉽다.)
===GET과 POST===
===GET과 POST===
사용가능한 메소드는 GET과 POST뿐. 사실상 POST만 사용된다.
{| class="wikitable"
{| class="wikitable"
|+
|+
|주소에 변수가 드러난다.
|주소에 변수가 드러난다.
|입력내용이 감춰진다.
|입력내용이 감춰진다.
body에 정보를 담아 보낸다.
|-
|-
|용법
|용법
|어떤 정보를 열람할 때.
|어떤 정보를 열람할 때.
|어떤 정보를 작성, 수정할 때.
|어떤 정보를 작성, 수정할 때.
|}
|}
=GET입력받기=
=GET입력받기=
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
|}
|}
===input 태그 요소===
===사용자로부터 POST입력받기===
==폼==
==폼==
===탬플릿===
===탬플릿===
===url추가===
===url추가===
path에 경로와 함수를 추가해준다.
path에 경로와 함수를 추가해준다.
== 폼 생성 ==
폼 생성
#
#
최종적으로 템플릿에는 다음과 같이 쓰인다. {{form}}은 뷰에서 넘어오는 변수.
최종적으로 템플릿에는 다음과 같이 쓰인다. <nowiki>{{form}}</nowiki>은 뷰에서 넘어오는 변수.
<form action='주소' method="post">
<form action='주소' method="post">
<nowiki>{{Form}}</nowiki>
<nowiki>{{Form}}</nowiki>
</form>
</form>
폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다.p.194
폼을 처리하기 위해선 폼을 보여주는 view와 폼을 처리하는 view. 2개가 필요하다. 보통 이 둘을 하나의 뷰로 통합하여 다룬다.
if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.)
if 문을 써서, HTTP요청방식에 따라 달리 작동하게 한다.(같은 주소에서 요청에 따라 달리 작동하게끔.)
{% csrf_token%}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다.
{% csrf_token %}은 form으로 전송된 데이터가 웹페이지에서 작성된 것인지 판단해주는 역할. 기타 해킹 툴 등에서 전송된 경우, csrf_token값이 일치하지 않아 오류가 발생한다. 때문에 form 바로 빝에 이걸 두어야 한다.
==탬플릿에서의 활용==
==탬플릿에서의 활용==
{% csrf_token %}
{% csrf_token %}
{{form}}
{{form}}
<input type="submit" value="버튼에넣을말"
<input type="submit" value="버튼에넣을말">
</form>
</form>
</syntaxhighlight>
</syntaxhighlight>
|위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
|위에선 <nowiki>{{form}}</nowiki>태그로 한번에 코드가 만들어지게 했지만, 각각의 요소에 대해 따로 입력을 받을 수도 있다.
따로따로 나누어 HTML을 꾸며주고 싶은 경우.
따로따로 나누어 HTML을 꾸며주고 싶은 경우.
|-
|제출 전 확인
|onsubmit 옵션을 다음과 같이 붙여넣으면 제출 전 간단한 확인이 이루어진다.
|<syntaxhighlight lang="html+django">
<form action="{% url %}" onsubmit="return confirm('경고. 엑셀의 내용으로 학생 응답을 덮어씁니다.')">
</syntaxhighlight>
|}
|}
==데이터 받기==
==데이터 받기==
===폼과 탬플릿===
===폼과 탬플릿===
#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에 저장된 값