폼 기초

🎯 학습 목표

이 강을 마치면 여러분은 사용자가 정보를 입력할 수 있는 폼을 만들 수 있게 됩니다. 검색창, 로그인 화면, 회원가입 양식처럼 우리가 웹에서 무언가를 입력하고 제출하는 모든 곳에 폼이 쓰입니다. 지금까지는 화면에 정보를 '보여 주기'만 했다면, 이번 강에서는 사용자에게 정보를 '받는' 방법을 배웁니다.

구체적으로는 세 가지를 배웁니다. 첫째, 입력 요소들을 담는 form과 만능 입력 태그 input을 익힙니다. 둘째, input의 type으로 텍스트·체크박스·라디오·버튼을 만듭니다. 셋째, 입력칸에 이름표를 붙이는 label을 살펴봅니다.

📥 폼과 입력칸 — form과 input

이 섹션에서는 입력의 기본이 되는 form과 input을 살펴보겠습니다.

사용자 입력과 관련된 요소들은 보통 <form> 태그로 감쌉니다. form은 이 안의 입력값들을 하나로 묶어 제출(전송)하는 단위입니다. 그리고 실제로 값을 입력받는 칸은 <input> 태그로 만듭니다. input은 이름 그대로 '입력'을 담당하는 만능 태그입니다. 가장 기본인 텍스트 입력칸을 만들어 봅시다.

<form>
  <input type="text" placeholder="이름을 입력하세요">
</form>

이 코드는 글자를 입력할 수 있는 한 줄짜리 입력칸을 만듭니다. 여기서 두 가지 속성이 등장합니다. 첫째, type="text"는 이 입력칸이 일반 텍스트를 받는다는 뜻입니다. 잠시 뒤에 보겠지만, 이 type 값을 바꾸면 입력칸의 종류가 완전히 달라집니다. 둘째, placeholder는 입력칸이 비어 있을 때 흐리게 보이는 안내 문구입니다. 사용자가 무엇을 입력해야 할지 알려 주는 힌트 역할을 합니다. 그리고 <input> 역시 지난 강들에서 배운 빈 요소라, 닫는 태그가 없습니다.

🎛️ input의 변신 — type 속성

이 섹션에서는 input을 여러 모습으로 바꾸는 핵심, type 속성을 살펴보겠습니다.

<input>의 진짜 힘은 type 속성 하나로 완전히 다른 입력칸이 된다는 데 있습니다. 같은 input 태그지만 type에 무엇을 넣느냐에 따라 텍스트칸도, 비밀번호칸도, 체크박스도 됩니다. 대표적인 것들을 봅시다.

<input type="text">      <!-- 일반 텍스트 -->
<input type="password">  <!-- 입력이 점(●)으로 가려짐 -->
<input type="email">     <!-- 이메일 형식 입력 -->
<input type="checkbox">  <!-- 체크박스 -->
<input type="radio">     <!-- 라디오 버튼 -->
<input type="submit">    <!-- 제출 버튼 -->

보다시피 type="password"는 입력한 글자가 점으로 가려지는 비밀번호칸이 되고, type="submit"은 폼을 제출하는 버튼이 됩니다. 이처럼 하나의 태그가 속성값에 따라 다양하게 변신하는 것이 input의 특징입니다. 이 중에서 초보자가 헷갈리기 쉬운 체크박스와 라디오 버튼을 다음 섹션에서 자세히 보겠습니다.

☑️ 체크박스와 라디오 버튼

이 섹션에서는 여러 선택지 중에서 고르게 하는 두 가지 입력, 체크박스와 라디오 버튼을 살펴보겠습니다.

체크박스(checkbox)는 여러 항목 중에서 원하는 만큼(여러 개) 선택할 수 있는 입력입니다. 예를 들어 관심사를 여러 개 고를 때 씁니다.

<input type="checkbox"> 운동
<input type="checkbox"> 독서
<input type="checkbox"> 여행

이렇게 하면 세 항목을 모두 또는 일부 자유롭게 체크할 수 있습니다. 반면 라디오 버튼(radio)은 여러 항목 중에서 단 하나만 고르게 하는 입력입니다. 성별이나 하나만 골라야 하는 질문에 씁니다.

<input type="radio" name="gender"> 남성
<input type="radio" name="gender"> 여성

여기서 매우 중요한 점이 있습니다. 라디오 버튼은 같은 그룹으로 묶어야 '하나만 선택'이 제대로 작동합니다. 그 묶는 방법이 바로 name 속성을 똑같이 지정하는 것입니다. 위 코드에서 두 라디오 버튼의 name이 모두 "gender"로 같기 때문에, 하나를 선택하면 다른 하나는 자동으로 해제됩니다. 만약 name을 다르게 하거나 빠뜨리면 둘 다 선택되어 버려, 라디오 버튼의 의미가 사라집니다. 같은 질문의 라디오 버튼은 name을 같게 — 이것을 꼭 기억하세요.

🏷️ 이름표 붙이기 — label

이 섹션에서는 입력칸에 설명을 연결하는 label을 살펴보겠습니다.

지금까지의 예시에는 아쉬운 점이 있습니다. 입력칸 옆의 '운동', '남성' 같은 글자가 입력칸과 제대로 연결되어 있지 않다는 것입니다. 이 글자와 입력칸을 정식으로 이어 주는 것이 <label> 태그입니다. label을 쓰면 글자를 클릭해도 그에 연결된 입력칸이 선택되어, 작은 체크박스를 정확히 누르지 않아도 되니 훨씬 편리합니다.

연결하는 방법은 이렇습니다. input에 id라는 고유 이름을 붙이고, label의 for 속성에 같은 이름을 적어 짝지어 줍니다.

<input type="checkbox" id="sports">
<label for="sports">운동</label>

여기서 input의 id="sports"와 label의 for="sports"가 같은 값으로 짝을 이룹니다. 이제 '운동'이라는 글자를 클릭하면 체크박스가 켜지고 꺼집니다. 이 label은 단지 편의를 위한 것이 아니라, 4강·5강에서 배운 접근성을 위해서도 중요합니다. 화면 낭독기가 '이 입력칸은 운동을 뜻하는구나'라고 정확히 읽어 줄 수 있기 때문입니다. 입력칸에는 label로 이름표를 붙이는 습관을 들이세요.

⚠️ 자주 하는 실수

이 섹션에서는 폼을 만들 때 흔한 실수를 정리하겠습니다.

첫 번째, 라디오 버튼의 name을 다르게 하는 것입니다. 같은 질문의 라디오 버튼끼리 name이 다르면 여러 개가 동시에 선택되어 버립니다. '하나만 선택'이 안 된다면 name이 같은지부터 확인하세요.

두 번째, label의 for와 input의 id를 안 맞추는 것입니다. 이 둘의 값이 정확히 일치해야 연결됩니다. 철자나 대소문자가 조금이라도 다르면 label을 눌러도 입력칸이 반응하지 않습니다.

세 번째, placeholder를 label처럼 쓰는 것입니다. placeholder는 어디까지나 흐린 힌트일 뿐, 입력을 시작하면 사라집니다. 항목의 정식 이름표는 반드시 label로 따로 만들어야 합니다. 이 둘을 혼동하지 마세요.

📝 핵심 요약

이번 강에서는 폼의 기초를 배웠습니다.

• form과 input — 입력 요소를 form으로 감싸고, 실제 값은 만능 태그 input으로 받습니다. input은 빈 요소입니다.
• type 속성 — input은 type에 따라 텍스트·비밀번호·체크박스·라디오·제출 버튼 등으로 변신합니다.
• 체크박스 vs 라디오 — 체크박스는 여러 개 선택, 라디오는 하나만 선택입니다. 라디오는 같은 name으로 묶어야 제대로 작동합니다.
• label — for와 input의 id를 같게 하여 이름표를 연결하면, 글자 클릭으로도 선택되고 접근성도 좋아집니다.

이제 정보를 보여 주는 것을 넘어 사용자에게 정보를 받는 폼까지 만들 수 있게 되었습니다. 다음 강에서는 페이지의 구조를 의미 있게 나누는 시맨틱 태그를 배워, HTML 기초의 마지막을 정리하겠습니다. 다음 강 「시맨틱 태그」에서 이어가겠습니다.

📚 참고 자료

• <form> 폼 요소 — MDN Web Docs
• <input> 입력 요소와 type — MDN Web Docs
• <label> 레이블 요소 — MDN Web Docs