[HTML 기초] form & input 태그의 개념과 데이터 입력 구조

form, input, label 태그

form은 사용자로부터 데이터를 입력받고 전달하기 위한 영역이며,
input은 그 안에서 실제로 값을 입력받는 요소입니다.
label은 input과 연결되어 클릭 영역을 확장해주는 역할을 합니다.

사용자가 로그인, 회원가입, 선택 입력 등을 할 때
이 세 가지 태그가 함께 사용됩니다.

주요 포인트 Top3

01. form 태그

form은 입력 요소들을 감싸는 영역입니다.

<form action="/login" method="post">
  <!-- 입력 요소들을 감싸는 영역 -->
</form>

action은 데이터를 보낼 주소이며,
method는 데이터를 전달하는 방식을 의미합니다.

02. input 태그 기본 구조

input은 사용자 입력을 받는 태그입니다.

<input type="text" placeholder="아이디 입력" />
<input type="password" placeholder="비밀번호 입력" />

type에 따라 입력 형태가 달라지며,
텍스트, 비밀번호 등 다양한 입력을 처리할 수 있습니다.

03. label과 input 연결

label은 input과 연결하여 함께 동작하도록 만들 수 있습니다.

<input type="text" id="text_1" />
<label for="text_1">선택1</label>

label의 for 값과 input의 id 값을 동일하게 설정하면,
label을 클릭했을 때 해당 input이 선택됩니다.

04. 실제 사용 예시

로그인 폼과 체크 선택을 함께 구성한 구조입니다.

<form action="/login" method="post">
  <!-- 아이디 입력 -->
  <label for="user_id">아이디</label>
  <input type="text" id="user_id" name="userId" />
 
  <!-- 비밀번호 입력 -->
  <label for="user_pw">비밀번호</label>
  <input type="password" id="user_pw" name="userPw" />
 
  <!-- 체크 선택 -->
  <input type="checkbox" id="agree" />
  <label for="agree">약관 동의</label>
 
  <!-- 로그인 버튼 -->
  <input type="submit" value="로그인" />
</form>

label과 input을 연결하면 텍스트를 클릭해도 입력 요소가 선택되며,
특히 체크박스나 라디오 버튼에서 사용성이 크게 향상됩니다.

GOYO.’s Tip 💡

• label 안에 input을 포함하는 방식으로도 연결할 수 있습니다
• textarea, select도 form 안에서 함께 사용됩니다

마무리 🎯

form은 입력 구조를 만들고, input은 값을 입력받으며,
label은 입력 요소와 연결되어 사용성을 높이는 역할을 합니다.