Django : Form 기초

이번에는 HTML form을 설정하는 부분이다. 굉장히 중요한 부분이라고 생각되는 부분이다. 이번엔 입력 란에 정보를 입력하면 해당 정보가 출력되는 것을 구현해볼 것이다. 예를들면 로그인이 될 수 있고, 게시글이나 다이어리, todo 리스트를 작성하는 것이 있겠다. 가보자고!
웹 특성상 먼저 구현을 보여주고 하나씩 설명하는 것이 좋을 것 같아 예시를 들 때, 먼저 따라해보고 설명을 보는 것도 좋은 방법이다.

---

HTML form

: html의 tag 종류이다. (django tags와 다름)

: HTTP 요청을 서버에 보내는 가장 편리한 방법이

Client와 Server의 관계

 

URL은 우리가 직접, Form은 입력을 통한 요청이라고 생각하면 좋다

 

우리의 친구 네이버의 홈페이지를 까보자!!

봄꽃 핀다고 초록창이 분홍색이 되어있다..

네이버 검색 부분을 개발자 도구로 확인해보면 form임을 알 수 있다.

로그인 부분도 아이디 비밀번호를 보내는 부분이 있으므로 form 태그를 확인할 수 있다.

 

그러면 자세하게 form 태그 내에 어떤 역할들이 있는지 확인해보자

button이 없다면 enter로 밖에 진입이 안되니 개인적으론 필요하다곤 생각한다. 필수는아님!!!

• action 속성
• method 속성
• input 태그

위의 세가지는 반드시 필요한 부분이므로 알아두고, 자세한 내용은 마지막에 정리할 예정이니 먼저 작성부터 따라해보자!

간단하게 검색 form을 갖추어 보자. action에는 빈 문자열 혹은 #을 넣어주면 된다(이는 자기 자신을 호출하는 의미로 동일하다)

 

먼저 body에 form 태그를 추가하고, action은 빈문자열 or # 을 넣어준 다음, input 태그를 통해 type = 'text'와 type = 'submit' 을 정의해준다. value는 어떻게 출력되는지 표현하는 것이므로 자기가 원하는 문구로 교체해도 문제없다. 이후 form 태그를 닫아준다. 이때 form 태그에 name를 넣어주자

? 기준으로 나뉘는 것을 확인!

검색 URL 해석

---

 

Fake Google 검색창을 만들어볼까?? 

과연 어떻게 가능한지 먼저 확인해보자.

url로 직접 google.com 을 직접 탐색해보자. 검색해서 들어가면 URL에 다른 정보가 써져있을 수 있으니 직접 URL 창에 입력해보자.

눈이 안아픈 다크모드

위에서 만들었던 형식 그대로 ? 을 기준으로 나뉘고 검색어 키워드가 입력된 것을 확인할 수 있다

 

근데 내가 검색했던거와 다르게 뒤에 &와 함께 dictionary 형태로 데이터들이 쭉 이어지는 것도 확인할 수 있다.

검색엔진에 해당하게 동작하는 부분은 q=김채원 이며 이후 &로 작성된 부분들은 삭제해도 동일한 검색 결과를 불러온다.

 

근데 내가 사용한 URL http://127.0.0.1:8000/index/ 에 비해서 굉장히 길다??? 필요한 부분을 제외하고 지워보자.

&(앰퍼샌드)관련해선 본문 마지막에 정리하겠다.

 

지금 중요한 부분은 아니지만 궁금하신분들을 위해..

 

>> 검색 엔진이 검색어 매개변수를 기반으로 쿼리를 실행하고 결과를 반환하기 때문에 메인 매개변수를 제외하고는 삭제해도 문제 없다. 지워진 친구들은 추가적인 옵션이나 추적 정보를 담고 있을 수 있지만 검색 자체를 실행하는 데 필수적이지 않기 때문에 지워도 문제 없는 것이다.

 

서론이 길었는데, 지금까지 주어진 정보로 나만의 검색창을 만들어보자!

 

주의깊게 봐야할 부분은 이동되는 URL 주소, ?의 위치, ? 이후의 요소들을 확인하고 유추해보자.

• html form 내부에 action 에는 이동될 URL 주소
• input 속 name 속성에 해당되는 q

위의 내용을 html에 적어볼까?

구글은 q를 사용하고, 네이버의 경우는 조금 다르다

name 속성에 query라고 써진 것을 확인할 수 있으며

URL 상에서도 query 임을 확인할 수 있다. 다만 순서는 google과 다르게 정의 해놨는데, '?' 뒤부터 'query' 전까지 지워도 작동한다

 

 

자 그럼 실행시켜볼까?

 

슛!

google에 codinglarva 검색 결과가 나온다! 솔직히 처음 해보고 소리지름 ㅎㅎ; 그리고 내가 검색하면 나오는구나 싶다

---

Form ( action & method )

: 데이터를 어디(action)로 어떤 방식(method)으로 요청한다. 

 

form의 핵심 속성 2가지

 

action

• 입력 데이터가 전송될 URL을 지정 (목적지)
• 해당 속성을 지정하지 않을 경우(기본값) 데이터는 현재 form 페이지 URL으로 설정된다. (자기 호출)

method

• 데이터를 어떤 방식으로 보낼 것인지에 대한 정의
• 데이터의 HTTP requeset methods (주로 GET, POST)를 지정
• 기본값 GET method로 설정 되어있으며 검색에 주로 쓰인다. (URL에 정보가 노출된다)
• POST method의 경우 로그인에 주로 쓰이며 URL에 정보가 노출되지 않고 데이터 검증까지 가능하다

 

 

INPUT

• 사용자의 데이터를 입력 받을 수 있는 요소
• type 속성 값에 따라 다양한 유형의 입력 데이터를 받을 수 있다
• 일반적으로 text / password / checkbox / submit / button 등이 있다.

input의 핵심 속성

 

name

• 입력한 데이터에 붙이는 이름(key)에 해당된다
• 데이터를 전송하면서 해당 데이터에 네임택을 붙여서 전달한다고 생각하면 된다
• 데이터를 제출했을 때 서버는 name 속성에 설정된 값을 통해서만 사용자가 입력한 데이터에 접근할 수 있다

---

Query String Parameters

• 사용자의 입력 데이터를 URL 주소에 파라미터를 통해 서버로 보내는 방법
• 문자열 ' & ' (앰퍼샌드)로 연결된 key=value 쌍으로 구성되며 기본 URL과는 ' ? '(물음표)로 구분한다

: Dictionary 형태로 작성되어 있는 이유는 Web server에서 매개변수를 처리하기 위해서다. 데이터를 주고 받을 때 Dictionary를 사용하는 것을 약속했던 것을 잊지 말자! 이를 토대로 Server는 Client에서 전송된 URL의 쿼리 문자열을 파싱하여 딕셔너리나 다른 형태의 자료구조로 변환 사용한다. 곧 배우게 될 부분이다.

---

쉴틈없이 달리고 있는데, django도 쉬운 편이라는데 큰일이다.. 언제 spring까지 배울지~