폼 개념
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
HTML폼은 사용자와 웹사이트, 앱이 서로 상호 작용하는 기술 중 하나이다. 폼을 사용하면 사용자가 웹사이트에 데이터를 전송할 수 있다.
폼에는 수많은 종류가 있으며, 이중에는 위에 나온 대로 ID와 비밀번호를 받는 로그인 폼이나 댓글을 남기는 코멘트 폼 등이 있다.
폼을 만들기 위한 다양한 HTML요소가 있고, 크게 인풋을 검증하는 단계와 받은 인풋을 처리하는단계로 나뉜다.
필요한 HTML요소들
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
-
input: 사용자의 인풋을 받기 위해 가장 중요한 요소는 input요소이다. 이는 사용자 인풋을 가져오는 요소이며, 빈 요소이다. 또한 type 속성을 사용하여 어떤 종류의 인풋을 받을지를 설정할 수 있다.
-
textarea: 여러 줄의 텍스트 인풋을 가져올 수 있도록 해준다. 이는 사용자가 남긴 댓글 혹은 피드백을 가져오기 위해 쓰인다.
-
select: 드랍다운 메뉴를 만들어 사용자가 여러 값 중 하나를 선택하도록 해준다
-
button: 위의 세 요소는 사용자가 어떤 값을 입력하거나 선택하지만 이 요소는 그 값들을 확정하는 역할을 한다. 사용자가 인풋을 확인하고 제출하도록 한다. 받은 인풋을 제출하는 역할이므로 거의 모든 폼에서 사용한다.
input 요소 사용하기
input요소는 빈 요소이기 때문에 종료 태그가 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form</title>
</head>
<body>
<input type="text">
</body>
</html>!으로 기본 html스켈레톤을 만든 뒤 body에 input태그를 넣어주면
뭔가 입력하는 창이 생긴다. 인풋요소는 기본적으로 일반 텍스트를 입력 받기 때문에 어떠한 텍스트든 쓸 수 있다. 인풋 종류를 명시하려면 type속성을 사용하는데, 거의 무조건 type으로 인풋을 명시하는 것이 필요하다.
body{
background-color: rgb(31, 30, 30);
margin: 8rem;
}
input{
width: 20rem;
}css로 스타일링을 약간 해주면
이렇게 변했다. type=”text”이므로 어떤 텍스트든지 숫자제한 없이 입력 받을 수 있다고 한다.
하지만 이렇게 받은 인풋을 제출하는 수단이 없다. 이제 버튼을 추가해야 한다
button 추가하기
button요소는 빈 요소는 아니며, 이것의 콘텐츠로는 캡션을 준다. 버튼 위로 표시되는 텍스트를 주는 것이다.
<body>
<input type="text">
<button>submit</button>
</body>button요소를 추가해보면
개발자 도구로 봐보면
이 요소는 블록요소의 성질을 가지고 있지만 브라우저 기본 설정에 의해 인라인 요소처럼 보이고 있음을 알 수 있다. input요소도 마찬가지다.
일단 버튼이 만들어지긴 했지만 여전히 버튼을 눌러도 사용자 인풋은 제출되지 않는다. 여기서 form요소를 사용한다.
form 요소 사용하기
form요소는 폼의 모든 입력관련 요소를 감싸고 전체적인 양식을 표기하는 요소다. 받은 인풋을 데이터 베이스나 서버에 전송하려고 한다면 반드시 이 요소가 필요하다고 한다.
<body>
<form action="">
<input type="text" />
<button>submit</button>
</form>
</body>form요소 안에 input과 button요소를 넣었다. 이는 의미적으로 검색엔진과 다른 공학 장치들에게 입력 폼이 시작할 것이라고 알려준다. 또한 form 안의 button요소는 form밖에 있을 때와는 다르게 동작한다. 이제 입력 박스에 아무 텍스트나 입력하고 제출 버튼을 누르면
입력된 텍스트가 사라지고 페이지의 URL 맨 뒤에 ?가 추가된다. 이는 브라우저가 내가 쓴 인풋을 받아서 해당하는 서버에 전송했다는 뜻이다. 이 내용은 백엔드 부분에서 배운다고 한다.
정리하자면 (form요소에 중첩되어 있는)button을 눌렀을 때 브라우저는 기본 동작으로 받은 인풋을 서버에 제출한다.
이제 이 페이지를 개발자 도구의 network탭을 눌러서 봐보면 모든 요청을 확인할 수 있다. 페이지의 URL에서 ?를 지우고 봐보면
index.html파일이 보내지고 있음을 알 수 있다. 이러한 요청은 서버에 따라 다르다. 여기서는 vs code의 live server이기 때문에 index.html이 가장 먼저 요청되고 있다.
양식이 어떻게 제출되고 어디로 제출되는 지를 파악할 수 있어야 한다. 이를 위해서는 form요소에 action과 method속성을 알면 된다.
- action은 이 요청이 보내져야 하는 URL주소와 통로를 나타낸다. 나중에 백엔드를 공부하여 서버에 코드를 쓰면 특정 html로부터 분리된 통로와 URL을 정의하거나 이것을 html파일에 보내 DB에 저장도 시킬 수 있다고 한다.
<form action="/user-data" method="">로 설정하면 입력 데이터가 웹페이지 도메인으로 전송되고, 이는 URL경로의 도메인 다음에 추가된다. 하나의 도메인을 위해 여러 경로를 설정하고, 선택된 경로를 기반으로 여러 코드를 백엔드에서 실행하는 방식이다.
- method: 전송되어야 하는 http요청의 종류를 설정한다. 요청의 종류로는 GET과 POST가 있다(관습적으로 대문자로 입력함).
GET요청은 어떤 리소스를 가져올 때 사용한다. 그러므로 브라우저의 주소창에 URL을 입력하고 엔터를 치면 브라우저가 GET요청을 보낸다.
하지만 일반적으로 폼은 백엔드의 DB에 사용자 데이터를 저장하기 위해 제출되는 것이다. 이 때는 POST요청을 사용한다.
이는 브라우저에게 POST요청을 보내서 서버가 해당하는 데이터를 저장하라고 명시하는 것이다. 저장 할지 말지는 서버 코드에서 결정한다. 역시 백엔드 부분.
현재는 라이브 서버말고 없기 때문에
<form action="/user-data" method="POST">로 설정한 후 인풋을 보내보면(/user-data는 폼의 데이터를 현재 도메인으로 전송하라는 뜻)
에러가 뜬다.
실패한 요청인 user-data를 클릭해보면 서버가 이 method를 지원하지 않는다고 떠있다.
또한 스크롤을 내려봐도 제출된 데이터는 찾을 수가 없다. 이를 위해서는 form요소 안에 중첩된 input 요소에 name속성을 추가해야 한다.
name속성은 input 요소에 id처럼 고유한 식별자를 부여할 수 있도록 해준다.
<input type="text" name="user-data" />이제 다시 개발자 도구를 뒤져보면
폼의 데이터가 보인다. 이것은 브라우저에 의해 보내진 요청(method - POST)에 자동으로 첨부된 데이터이다. 이제
<form action="/ " method="GET">로 설정하고(/는 서버의 메인 페이지를 불러오라는 뜻. index.html과 같다.) 다시 페이지에서 아무 텍스트나 보내보면
URL에 보낸 데이터가 추가되고,
쿼리 스트링이라는 파라미터에서 입력 데이터를 찾을 수 있다. 이것이 GET과 POST의 차이다. POST에서 제출된 데이터는 요청의 일부로 일종의 메타데이터이나, GET요청에서는 핵심 아이디어가 데이터 전송과는 관련 없기 때문에 데이터가 요청에 들어있지 않고 URL에 들어가게 된다.
GET요청은 ? 이후에 키-값 쌍으로 나타난다. 키는 내가 선택한 폼 요소의 식별자이고, 값이 입력한 데이터이다. 이러한 쌍들은 &에 의해 구분된다.
이런 식.
