웹사이트에서 회원가입, 로그인, 검색, 문의하기와 같은 기능을 구현할 때 반드시 사용하는 요소가 바로 HTML form 태그입니다.
form 태그는 사용자가 입력한 데이터를 서버로 전달하는 역할을 하며 웹 애플리케이션에서 매우 중요한 기능을 담당합니다.
form 태그 내부에는 다양한 입력 요소가 들어가며, 대표적으로 input 태그가 가장 많이 사용됩니다.
input 태그는 type 속성에 따라 텍스트 입력, 비밀번호 입력, 체크박스, 버튼 등 다양한 형태로 사용할 수 있습니다.
이번 글에서는 HTML form 태그의 기본 구조와 함께 input 태그의 주요 타입을 정리해보겠습니다.
HTML을 처음 배우는 분들도 이해할 수 있도록 쉽게 설명하겠습니다.
form 태그란 무엇인가?
form 태그는 사용자가 입력한 데이터를 서버로 전송하기 위한 HTML 요소입니다.
웹페이지에서 데이터를 입력받는 모든 영역은 일반적으로 form 태그 안에서 작성됩니다.
예를 들어 로그인 페이지나 회원가입 페이지를 생각해 보면 아이디와 비밀번호를 입력하는 영역이 있는데 이러한 기능이 바로 form 태그를 통해 구현됩니다.
form 태그의 기본 구조
HTML에서 form 태그의 기본적인 구조는 다음과 같습니다.
<form action="/login" method="post">
<label>아이디</label>
<input type="text" name="userid">
<label>비밀번호</label>
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
위 코드를 보면 form 태그 안에 input 요소들이 들어가 있는 것을 확인할 수 있습니다.
action 속성
action 속성은 폼 데이터가 전송될 서버의 주소를 지정합니다.
사용자가 입력한 정보는 action에 설정된 URL로 전달됩니다.
method 속성
method 속성은 데이터 전송 방식을 지정합니다.
- GET : 데이터를 URL에 포함하여 전송
- POST : 데이터를 숨겨서 전송
일반적으로 로그인이나 회원가입 같은 민감한 정보는 POST 방식을 사용합니다.
input 태그란 무엇인가?
input 태그는 사용자가 데이터를 입력할 수 있도록 하는 HTML 요소입니다.
type 속성에 따라 입력 방식이 달라집니다.
HTML에서는 다양한 input 타입을 제공하여 웹페이지에서 다양한 사용자 입력을 처리할 수 있습니다.
자주 사용하는 input 타입 정리
text
text 타입은 가장 기본적인 입력 필드입니다. 일반적인 텍스트를 입력할 때 사용합니다.
<input type="text" name="username">
password
password 타입은 비밀번호 입력을 위한 필드입니다. 입력된 글자가 화면에 표시되지 않고 점 또는 별표 형태로 표시됩니다.
<input type="password" name="password">
email 타입은 이메일 주소 입력을 위한 필드입니다. 브라우저에서 기본적인 이메일 형식 검사를 자동으로 수행합니다.
<input type="email" name="email">
number
number 타입은 숫자 입력을 위한 필드입니다. 숫자만 입력할 수 있도록 제한할 수 있습니다.
<input type="number" name="age">
checkbox
checkbox 타입은 여러 개의 옵션 중에서 여러 개를 동시에 선택할 수 있는 입력 방식입니다.
<input type="checkbox" name="hobby" value="sports"> 운동
radio
radio 타입은 여러 옵션 중에서 하나만 선택할 수 있는 입력 방식입니다.
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
submit
submit 타입은 form 데이터를 서버로 전송하는 버튼입니다.
<input type="submit" value="전송">
file
file 타입은 사용자가 파일을 업로드할 수 있도록 하는 입력 필드입니다.
<input type="file" name="upload">
label 태그의 중요성
폼을 작성할 때는 input 태그와 함께 label 태그를 사용하는 것이 좋습니다.
label 태그는 입력 필드의 설명을 제공하며 웹 접근성과 사용성을 개선하는 역할을 합니다.
<label for="email">이메일</label>
<input type="email" id="email" name="email">
label을 클릭하면 연결된 input 필드에 자동으로 포커스가 이동합니다.
폼 작성 시 알아두면 좋은 팁
form 태그를 사용할 때 다음 사항을 함께 고려하면 좋습니다.
- label 태그를 함께 사용하기
- required 속성으로 필수 입력 설정
- placeholder로 입력 예시 제공
- 적절한 input 타입 선택
예를 들어 다음과 같이 작성할 수 있습니다.
<input type="email" name="email" placeholder="example@email.com" required>
마무리
HTML form 태그는 사용자 입력을 처리하는 가장 기본적인 구조입니다.
웹사이트에서 로그인, 회원가입, 검색, 문의 기능 등을 구현할 때 반드시 사용됩니다.
또한 input 태그의 type 속성을 적절하게 사용하면 사용자 경험을 크게 개선할 수 있습니다.
이번 글에서 정리한 내용을 다시 정리하면 다음과 같습니다.
- form 태그는 사용자 입력 데이터를 서버로 전송하는 역할을 한다
- action과 method 속성으로 전송 방식 설정
- input 태그는 type 속성에 따라 다양한 입력 방식 제공
HTML을 처음 배우는 분이라면 form 구조와 input 타입을 정확히 이해하는 것이 웹 개발의 중요한 기초가 됩니다.