15. HTML Form

HTML Form # 입력 서식

웹페이지에서는 form 태그를 통해, 데이터를 전송 ex) 로그인 폼, 댓글 폼 # user의 id와 pwd를 입력하여 서버로 전송

하나의 form 태그는 하나 이상의 위젯 (Widget) 을 가진다. # 위젯 : 하나의 웹 UI

<form action="" method="POST"> # action은 유저한테 입력 받은 값들을 어느 서버로 보낼것인가 주소는 url     <input type="text" /> : 1줄 문자열 입력     <textarea></textarea> : 1줄 이상의 문자열 입력     <select></select> : 항목 중 택일     <input type="checkbox" /> : 체크박스 (한 그룹 내 여러 항목을 다수 선택 가능)     <input type="radio" /> : 라디오박스 (한 그룹 내 여러 항목 중에 하나만 선택 가능)     그 외 다수 위젯 </form>

HTML Form 태그 필수 속성

• action : 요청을 보낼 주소

• method # 어떤 방식으로 보낼 것인가

• "GET" : 주로 데이터 조회 요청 시 

• "POST" : 파괴적인 액션 (생성/수정/삭제) 에 대한 요청 시

   #> 해더와 바디가 존재하며, 바디에 내용을 저장하여 서버로 전송

• enctype : request.POST 요청 시에만 유효 # 패키징 방식 

• application/x-www-form-urlencoded (디폴트)

• 파일 업로드 불가

• multipart/form-data : 파일 업로드 가능  # POST

• text/plain : 스펙에는 정의되어있으나, 실제로 쓰이지는 않음. 

url encoded

key=value 값의 쌍이 & 문자로 이어진 형태, 공백은 +로 인코딩하며, Special 문자들은 ASCII 16진수로 변경

from urllib.parse import urlencode print(urlencode({'key1': 'value1', 'key2': 10, 'name': '공유'})) print('공유'.encode('utf8')) print(''.join('%{:X}'.format(ch) for ch in '공유'.encode('utf8')))  key2=10&key1=value1&name=%EA%B3%B5%EC%9C%A0 b'\xea\xb3\xb5\xec\x9c\xa0' %EA%B3%B5%EC%9C%A0

요즘은 utf8 인코딩을 사용함

Form Method

• GET 방식 : 엽서에 비유. 물건을 보낼 수 없다.  # 오로지 Header 만 전송

• application/x-www-form-urlencoded 방식으로만 인코딩하여, GET인자로 전달

• POST 방식 : 택배에 비유. 다양한 물건을 보낼 수 있다. # Header와 Body를 모두 보낼수 있다.

• GET인자/POST인자 가능

<form action="?lang=ko' method="post"> # action에 값을 입력하여 get인자 지정     <input type='text' name='title' / >     <textarea name="contenet' / >     <input type='text' name='latlng' / > </form>

• 지정된 enctype으로 인코딩하여, body에 포함시켜 처리

<form method="GET">

• enctype 지정 불가. enctype 지정을 무시하고 urlencoded된 key/value쌍을 URL뒤에 붙여, GET인자로서 전달

• 주로 검색폼에서 인자를 넘길 때, 씁니다.

간단 글쓰기 폼

<form method="GET" action="">     <input type="text" name="title" />     <textarea name="content"></textarea>     <input type="file" name="photo" />     # file : 데스크탑 내 파일 찾기 (파일선택) 서버로 파일명만 전송이 되지, 내용이 안날라 간다.     <input type="submit" value="저장" />   # sumit : 입력 완료 </form>  요청 패킷 GET http://localhost:8000/blog/new/?title=title&content=content&photo=filename.jpg HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:39.0) Gecko/20100101 Firefox/39.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate DNT: 1 Referer: http://localhost:8000/blog/new/ Cookie: csrftoken=bDaUcTBk3CxBH3FJ4X9zmQpjWD6swBG7; _ga=GA1.1.2131557215.1432514035; sessionid=fk7l01xhd9nbwlncoidyxb1amzff9yom Connection: keep-alive --------------- 패킷의 해더와 바디는 빈줄 한줄로 구분한다 ---------------------- (header 만 있고, body 부분이 없음, header/body구분은 첫 빈줄 하나로 구분) GET인자 title=title&content=content&photo=filename.jpg 장고 View 호출 시, 인자 현황 request.GET : <QueryDict: {'title': ['title'], 'content': ['content'], 'photo': ['filename.jpg']}> request.POST : <QueryDict: {}> request.FILES : <MultiValueDict: {}>

<form method="POST" enctype="application/x-www-formurlencoded">

• 디폴트 enctype : application/x-www-form-urlencoded

• urlencoded된 key/value쌍을 request BODY에 담아서 요청

간단 글쓰기 폼 (기존 GET Form과 동일)

<form method="POST" action="">     <input type="text" name="title" />     <textarea name="content"></textarea>     <input type="file" name="photo" />     # file : 데스크탑 내 파일 찾기 (파일선택) 서버로 파일명만 전송이 되지, 내용이 안날라 간다.     <input type="submit" value="저장" />   # sumit : 입력 완료 </form>  요청 패킷 POST http://localhost:8000/diary/new/ HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:39.0) Gecko/20100101 Firefox/39.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate DNT: 1 Referer: http://localhost:8000/diary/new/ Cookie: csrftoken=bDaUcTBk3CxBH3FJ4X9zmQpjWD6swBG7; _ga=GA1.1.2131557215.1432514035; sessionid=fk7l01xhd9nbwlncoidyxb1amzff9yom Connection: keep-alive Content-Type: application/x-www-form-urlencoded Content-Length: 46 title=title&content=content&photo=filename.jpg ## POST 방식 일때 인자는 body에 들어간다. 파일내용이 서버로 전송되지않음 defauklt설정 POST 인자 title=title&content=content&photo=filename.jpg 장고 View 호출 시, 인자 현황 request.GET : <QueryDict: {}> request.POST : <QueryDict: {'title': ['title'], 'content': ['content'], 'photo': ['filename.jpg']}> request.FILES : <MultiValueDict: {}>

<form method="POST" enctype="multipart/form-data">

• 파일 업로드 지원

(중요) GET방식에서 enctype="multipart/form-data"를 설정을해도 무시된다.

GET방식에서 패킷지정 데이터를 전송할수 없기 때문에

간단 글쓰기 폼

<form method="POST" action="" enctype="multipart/form-data">     <input type="text" name="title" />     <textarea name="content"></textarea>     <input type="file" name="photo" />     <input type="submit" value="저장" /> </form> 요청 패킷 POST http://localhost:8000/diary/new/ HTTP/1.1 Host: localhost:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:39.0) Gecko/20100101 Firefox/39.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate DNT: 1 Referer: http://localhost:8000/diary/new/ Cookie: csrftoken=bDaUcTBk3CxBH3FJ4X9zmQpjWD6swBG7; _ga=GA1.1.2131557215.1432514035; sessionid=fk7l01xhd9nbwlncoidyxb1amzff9yom Connection: keep-alive Content-Type: multipart/form-data; boundary=---------------------------14973275531370807725960869059 Content-Length: 296 -----------------------------14973275531370807725960869059 Content-Disposition: form-data; name="title" title -----------------------------14973275531370807725960869059 Content-Disposition: form-data; name="content" (생략 ...) 장고 View 호출 시, 인자 현황 request.GET : <QueryDict: {}> request.POST : <QueryDict: {'title': ['title'], 'content': ['content']}> request.FILES : <MultiValueDict: {'photo': [<InMemoryUploadedFile: 사진.png (image/png)>]}>

바디 사이즈는 크기 제한이 없다.

"""본 내용은 AskDjango VOD, "장고 차근차근 시작하기" 강의내용을 참고하여 작성했습니다.(https://nomade.kr/)"""