편집
1,408
번
바뀜
둘러보기로 가기
검색하러 가기
23번째 줄:
23번째 줄: − |- − | − | − | 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입력받기 = − 308번째 줄:
125번째 줄: − 잘 정리해보자.+ − − + − + − +
편집 요약 없음
|어떤 정보를 열람할 때.
|어떤 정보를 열람할 때.
|어떤 정보를 작성, 수정할 때.
|어떤 정보를 작성, 수정할 때.
|}
|}
=GET입력받기=
=GET입력받기=
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
안쓰거나 '#'을 두면 현재 페이지를 의미한다.
|}
|}
===input 태그 요소===
===사용자로부터 POST입력받기===
==폼==
==폼==
===탬플릿===
===탬플릿===
===폼과 탬플릿===
===폼과 탬플릿===
#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에 저장된 값