제수기 > HTML > form

Eunbi Jo·2024년 12월 31일

제수기

목록 보기

30/90

제수기 - 제발 수업내용을 기억해라

Form

사용자 입력값을 서버로 전송하기 위한 form과 input 태그 등을 제공

name : 폼의 이름(서버전송되지 않음. 페이지내 구분용)

action : 제출할 서버주소 (url)

method : (http메세지를 작성하는 방법)

get (기본값) : 사용자입력값을 url에 query-string 형식(직렬화)으로 전달

post : 사용자입력값을 http메세지 바디(직렬화)에 작성(url 확인 불가)

와삼스쿨 HTML Input Types

HTML Input Types

action에 페이지 넣어주고 method에 get, post 중에 하나를 넣어준다.

저렇게 빈칸으로만 나오기 때문에, label로 설명을 넣어준다.
버튼은 <input type="submit" value="Login">

get

get을 사용해서 사용자입력값을 url에 query-string 형식(직렬화)으로 전달했기 때문에 저렇게 확인할 수 있다.

f12에서 network에서 요청된 내용을 볼 수 있다. Head에서 정보가 보인다.

응답은 response에서 볼 수 있다.

post

post로 하면 get과 마찬가지로, http messagge가 요청되는데, 거기에 headers가 있고 바디가 있을 때 바디에 username=hong password = 1234 이렇게 적혀서 url에는 안 보인다. 현재 페이지 상황은 준비된 서버가 응답을 주지는 못한 상황.

get과 비교

get으로 바꿔서도 보자
http messaege가 header에 담겨서 간다. 그래서 url에도 비번이랑 아이디가 같이 나오는 것.

http message

get으로 했을 때는 header에 정보가 담기고
post로 했을 때는 body에 담긴다!

text

action = "" 현재페이지로 제출 의미

벨류 속성이 입력된다

input[type=submit]은 input:submit으로 줄여쓸 수 있다
필수 입력

비밀번호 입력

maxlenght
올바른 이메일 형식을 입력해야 한다.

urlencoding

urlencoding
@ 를 %로 바꾼 걸 확인할 수 있다.
사이트에서 쳐보고 공백, 특수문자, 한글 등이 어떻게 치환되는지 볼 수 있다.
인코딩한 다음에 디코딩해서 원래 문자를 찾을 수 있다.
클라이언트가 서버에 보낼 때 영문자, 숫자, 정해진 몇몇 특수기호 외에는 죄다 urlencoding이 된다.