"1-1. 장고 폼. HTML input 태그"의 두 판 사이의 차이
(새 문서: ===input 태그 요소=== {| class="wikitable" !요소 !설명 |- |name= |폼을 식별하기 위한 이름. view에서 구분하기 위한 식별자이다. |- |target= |현재의...) |
잔글 |
||
| (사용자 2명의 중간 판 7개는 보이지 않습니다) | |||
| 16번째 줄: | 16번째 줄: | ||
|value= | |value= | ||
|상황에 따라 보낼 값 혹은 나타낼 값. | |상황에 따라 보낼 값 혹은 나타낼 값. | ||
| + | |- | ||
| + | |id= | ||
| + | |없어도 되지만, 앵커로 사용하기 위해 두기도 한다. | ||
|}다음과 같이 쓰인다. <code><form method="get" action="{% url 'pubg:search_result' %}" ></code> | |}다음과 같이 쓰인다. <code><form method="get" action="{% url 'pubg:search_result' %}" ></code> | ||
| 33번째 줄: | 36번째 줄: | ||
간단한 텍스트를 받는 형태가 되는데, 이처럼 form 안엔 다양한 input type이 있다. | 간단한 텍스트를 받는 형태가 되는데, 이처럼 form 안엔 다양한 input type이 있다. | ||
| − | 다양한 방법이 있겠지만, input의 name속성에 데이터를 담아 get으로 전달한다. | + | 다양한 방법이 있겠지만, input의 name속성에 데이터를 담아 get으로 전달한다.(동일한 name속성을 사용하는 경우, <code>request.POST.get('name')</code>으로 받으면 마지막 내용만 받아지지만, <code>request.POST.getlist('name')</code>으로 받으면 모든 내용을 리스트로 받을 수 있다.) |
{| class="wikitable" | {| class="wikitable" | ||
!type | !type | ||
| 97번째 줄: | 100번째 줄: | ||
selected 옵션으로 처음 선택되어 있는 것을 지정할 수 있음. | selected 옵션으로 처음 선택되어 있는 것을 지정할 수 있음. | ||
| + | |||
| + | get이 아니라 <code>request.POST.getlist('name')</code> 형태로 받아야 받아진다. | ||
|<select name="이름"> | |<select name="이름"> | ||
<option value="선택1"></option> | <option value="선택1"></option> | ||
| 104번째 줄: | 109번째 줄: | ||
<option value="선택3"></option> | <option value="선택3"></option> | ||
| − | + | </select> | |
| + | |||
| + | option태그 사이에 텍스트를 넣으면 텍스트가 나온다. | ||
|- | |- | ||
| colspan="1" rowspan="1" |search | | colspan="1" rowspan="1" |search | ||
| 132번째 줄: | 139번째 줄: | ||
| colspan="1" rowspan="1" |checkbox | | colspan="1" rowspan="1" |checkbox | ||
| colspan="1" rowspan="1" |주어진 항목에서 2개 이상 선택 가능한 체크박스 | | colspan="1" rowspan="1" |주어진 항목에서 2개 이상 선택 가능한 체크박스 | ||
| − | | | + | 2개 이상은 리스트로 담기는데, <code>request.POST.getlist('name')</code>으로 받아와야 모든 값을 얻을 수 있다. |
| + | |<input type="checkbox" name="option2"> | ||
|- | |- | ||
| colspan="1" rowspan="1" |radio | | colspan="1" rowspan="1" |radio | ||
| colspan="1" rowspan="1" |주어진 항목에서 1개만 선택 가능한 라디오 버튼 | | colspan="1" rowspan="1" |주어진 항목에서 1개만 선택 가능한 라디오 버튼 | ||
|value에 request에 담을 값을 지정한다. | |value에 request에 담을 값을 지정한다. | ||
| + | 연달아 붙어 있는 라디오버튼들이 한 세트가 된다. | ||
| + | |||
| + | <nowiki><p><input type="radio" name="mask" value="apple"></nowiki>선택1<nowiki></p></nowiki> | ||
| + | |||
| + | <nowiki><p><input type="radio" name="mask" value="apple2"></nowiki>선택2<nowiki></p></nowiki> | ||
|- | |- | ||
|month | |month | ||
2023년 2월 6일 (월) 14:27 기준 최신판
1 input 태그 요소편집
| 요소 | 설명 |
|---|---|
| name= | 폼을 식별하기 위한 이름. view에서 구분하기 위한 식별자이다. |
| target= | 현재의 창이 아닌, 다른 지역에서 열리게 할 수 있다. |
| enctype= | 데이터의 인코딩 타입.(암호화방식 지정) |
| value= | 상황에 따라 보낼 값 혹은 나타낼 값. |
| id= | 없어도 되지만, 앵커로 사용하기 위해 두기도 한다. |
다음과 같이 쓰인다. <form method="get" action="{% url 'pubg:search_result' %}" >
최소한 method와 submit이 필요하다.
장고에선 csrf 토큰이 필수로 요구된다.
2 input type편집
폼은 다음과 같은 형태로 입력된다.
<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>
submit 버튼으로 전송되어 보내진 데이터는 해당 url 그대로 요청방식만 post로 바꾸어 요청한다.
간단한 텍스트를 받는 형태가 되는데, 이처럼 form 안엔 다양한 input type이 있다.
다양한 방법이 있겠지만, input의 name속성에 데이터를 담아 get으로 전달한다.(동일한 name속성을 사용하는 경우, request.POST.get('name')으로 받으면 마지막 내용만 받아지지만, request.POST.getlist('name')으로 받으면 모든 내용을 리스트로 받을 수 있다.)
| type | 설명 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| hidden | 사용자에게는 보여지지 않고 서버로 넘겨지는 값 | |||||||||
| text | 한 줄짜리 텍스트 입력상자 |
| ||||||||
| password | 문자 대신 *등 다른 글자를 출력하여 다른 사람이 볼 수 없게 한다. | |||||||||
| textarea | 여러 줄의 텍스트를 입력받을 때. |
| ||||||||
| datalist | 선택 가능한 데이터 목록을 보여준다.
(그러나, 목록 외에 값을 써넣을 수도 있다.) input의 list속성값과 datalist의 id속성을 동일하게 두어 연결한다. |
<input type="text" list="이름">
<datalist id="이름"> <option value="선택1"> <option value="선택2"> ... </datalist> | ||||||||
| select | 드롭다운 목록을 보여주고 그 중 하나를 선택.
위와 동일한 형태지만, 선택만 가능하다. selected 옵션으로 처음 선택되어 있는 것을 지정할 수 있음. get이 아니라 |
<select name="이름">
<option value="선택1"></option> <option value="선택2" selected></option> <option value="선택3"></option> </select> option태그 사이에 텍스트를 넣으면 텍스트가 나온다. | ||||||||
| search | 검색 상자 | |||||||||
| tel | 전화번호 입력 필드 | |||||||||
| url | URL 필드 | |||||||||
| 메일 주소 필드 | ||||||||||
| password | 비밀번호 필드 | |||||||||
| number | 숫자 조절 화살표 | |||||||||
| checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크박스
2개 이상은 리스트로 담기는데, |
<input type="checkbox" name="option2"> | ||||||||
| radio | 주어진 항목에서 1개만 선택 가능한 라디오 버튼 | value에 request에 담을 값을 지정한다.
연달아 붙어 있는 라디오버튼들이 한 세트가 된다. <p><input type="radio" name="mask" value="apple">선택1</p> <p><input type="radio" name="mask" value="apple2">선택2</p> | ||||||||
| month | 연, 월 | |||||||||
| date | 연, 월, 일 | <input type='date' name='이름' value="2020-03-22"> | ||||||||
| submit | 전송(보내기) 버튼 | <input type="submit" value="버튼에나타낼텍스트"> | ||||||||
| file | 첨부 파일.(각종 이미지, 음악, 영상 등 미디어파일) | accetp 속성으로 받을 파일의 확장자 지정 가능.
image/* 형태로 모든 이미지를 받을 수도 있음. | ||||||||
| reset | 초기화(리셋) | |||||||||
| hidden | 사용자에게 보이지 않지만, 담겨저서 보내지는 것. | <input type="hidden" name="이름" value="{{변수}}"></input> |
2.1 input 속성편집
| 속성 | 설명 |
|---|---|
| placeholder | 필드 안에 내용을 포함하고 있다가 클릭하면 사라져, 입력할 수 있도록 하는 속성. |
| required | 필수로 입력해야 하는 것들을 지정한다.(그냥 이 단어만 집어넣으면 됨) |
| name | 데이터가 담기면 name=값 형태의 폼 데이터를 만들어 보낸다. |