입력 폼 기초 | Minstudio

데이터를 서버로 보내는 소통구

웹사이트에 회원가입을 하거나 로그인을 할 때, 아이디를 입력하고 제출 버튼을 누릅니다. 이처럼 사용자로부터 텍스트, 비밀번호, 파일 등 다양한 정보를 입력받아 웹 서버(도착지)로 안전하게 전송하기 위한 "설문조사 양식지"를 Form(폼)이라고 부릅니다. 현대의 모든 동적 웹서비스는 이 폼을 통해 사용자와 상호작용합니다.

[그림 1] 클라이언트(브라우저)에서 작성한 폼 데이터가 네트워크를 타고 서버로 향하는 구조

1. 입력 폼의 전송 원리 시각화

제출 버튼을 눌렀을 때 데이터가 어떻게 포장되어 목적지로 이동하는지 살펴봅니다.

📦 폼 데이터 전송 메커니즘 (SVG Diagram)

submit 버튼을 누르는 순간, name에 적힌 이름표를 달고 action 주소의 서버로 날아갑니다!

🏷️ 라벨(Label)의 중요성

작은 체크박스나 동그란 라디오 버튼을 마우스로 클릭하거나 스마트폰에서 터치하기 힘들었던 적 있으신가요? &<label> 태그를 이용해 글자("아이디" 등)와 입력창을 서로 짝지어 주면, 글자만 클릭해도 입력창에 커서가 깜빡이거나 체크가 됩니다. 사용자의 편의성을 대폭 올려주는 꿀팁입니다!

2. 핵심 폼(Form) 태그 요약

설문지(form) 안에 들어갈 수 있는 다양한 부품(태그)들의 역할입니다.

태그명	주요 속성	설명
`<form>`	`action`, `method`	설문지 종이 그 자체. 데이터를 전송할 목적지 주소(action)와 전송 방식(method)을 지정합니다.
`<input>`	`type`, `name`	사용자 데이터를 직접 입력받는 칸. type으로 형태를, name으로 고유 이름표 지정
`<label>`	`for`	입력 창의 이름표. `for` 속성을 `<input>`의 `id`와 동일하게 맞추어 연결
`<button>`	`type`	클릭 버튼. `type="submit"`이면 폼 데이터를 서버로 전송

태그명

주요 속성

설명

<form>

action, method

설문지 종이 그 자체. 데이터를 전송할 목적지 주소(action)와 전송 방식(method)을 지정합니다.

<input>

type, name

사용자 데이터를 직접 입력받는 칸. type으로 형태를, name으로 고유 이름표 지정

<label>

for

입력 창의 이름표. for 속성을 <input>의 id와 동일하게 맞추어 연결

<button>

type

클릭 버튼. type="submit"이면 폼 데이터를 서버로 전송