[포스코 x 코딩온] 웹개발 과정 5주차 - 2 | FORM 전송

강민혁·2023년 4월 3일
0

nodejs

목록 보기
5/6
post-thumbnail

요 며칠 갑자기 매크로를 만드는 것에 꽂혀서 블로그를 잠시 못썼다.
매크로구현하기가 생각보다 힘들어서 구성을 다시해야 할 것 같다.

5주차에는 FORM전송에 대해서 배웠다.

FORM?

html의 form요소는 사용자로부터 데이터를 받기 위한 요소입니다.
form 요소를 사용하여 데이터를 입력받으면, 서버로 데이터를 전송하여 처리할 수 있습니다. 서버에서는 해당 데이터를 받아 처리하고, 응답을 다시 클라이언트에게 전송합니다. 이를 통해 사용자와 상호작용하는 다양한 기능들을 구현할 수 있습니다.

FORM의 속성

form은 다음과 같은 속성을 지닐 수 있습니다.

action: 서버로 데이터를 전송할 URL을 지정합니다.
method: 데이터를 전송하는 방법을 지정합니다. 보통 GET 또는 POST 중 하나를 사용합니다.
target: 데이터를 전송할 대상을 지정합니다. 예를 들어, _blank를 사용하면 새 창에서 데이터를 전송할 수 있습니다.
enctype: 데이터를 전송할 때 사용되는 인코딩 방식을 지정합니다. 보통 application/x-www-form-urlencoded 또는 multipart/form-data를 사용합니다.
form 요소 안에는 다양한 입력 요소들을 포함할 수 있습니다. 가장 일반적으로 사용되는 입력 요소들은 다음과 같습니다.

input : 텍스트, 비밀번호, 체크박스, 라디오 버튼, 숨김 등 다양한 종류의 입력 요소를 제공합니다.
textarea : 여러 줄의 텍스트를 입력할 수 있는 요소입니다.
select : 드롭다운 목록을 제공하고, 여러 옵션 중 하나를 선택할 수 있습니다.
button : 클릭할 수 있는 버튼을 제공합니다.
label : 입력 요소와 연결된 텍스트를 제공하고, 화면에서 클릭 가능한 영역을 확장합니다.

FORM method

form에는 get과 post 라는 method가 존재합니다.

GET,POST

get메소드는 url로 정보를 송신합니다.
post메소드는 url로 정보를 송신하지 않습니다.(개인정보)

전송하는법

일단 서버가 존재하여야 전송한 데이터를 받을 수 있으니 서버를 만들어야합니다.
(서버는 나중에..)


이러한 서버가 있다고 가정했을때
get방식으로 form을 전송하고싶다라면
다음과 같은 코드로 전송 할 수 있습니다.

<form action="/getForm" method="get">
	<input />
    <input />
</form>

이런식으로 전송 할 시 input안의 값이 get방식에서 받아질 것입니다.

<form action="/postForm" method="post">
	<input />
    <input />
</form>

이런식이라면 post에서 받아질 것입니다.

결론적으로 'action'속성의 url로 form안의 value들을 전송할 수 있습니다.

action과 서버의 url 이 동일 해야한다는 의미입니다.

이번 포스팅에서는 form에 대해서 기본적인 것들을 다루어 보았습니다.
사실 form 사용을 잘 안했습니다 axios로만 처리를 했어서요.
그래서 form에 대해 무지했는데 form도 굉장히 좋은 방법인 것 같습니다.

profile
화이팅

0개의 댓글