HTML 폼(Form) 요소

HTML 폼(Form) 요소 정리

웹 페이지에서 사용자 입력을 받기 위해 가장 많이 사용하는 기능이 바로 폼(Form) 입니다. 회원가입, 로그인, 검색창, 설문조사 등 다양한 곳에서 활용되며, HTML의 <form> 태그와 여러 입력 요소들을 조합하여 구현합니다.

아래에서는 대표적인 폼 요소들을 하나씩 정리해 보겠습니다.

1. <form> 태그

• 모든 입력 요소들을 감싸는 컨테이너 역할
• action 속성: 데이터를 전송할 URL 지정
• method 속성: GET 또는 POST 방식 설정

<form action="/submit" method="post">
  <!-- 입력 요소들 -->
</form>

2. <input> 태그

가장 기본적인 입력 요소로, type 속성에 따라 다양한 형태로 변합니다.

자주 쓰이는 type 속성

• text: 일반 텍스트 입력
• password: 비밀번호 입력 (입력 내용이 숨김 처리)
• email: 이메일 형식 입력
• number: 숫자 입력
• checkbox: 다중 선택 체크박스
• radio: 단일 선택 라디오 버튼
• file: 파일 업로드
• submit: 전송 버튼
• reset: 입력값 초기화 버튼

<input type="text" name="username" placeholder="아이디 입력">
<input type="password" name="password" placeholder="비밀번호 입력">
<input type="checkbox" name="hobby" value="music"> 음악
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
<input type="submit" value="로그인">

3. <textarea> 태그

• 여러 줄의 텍스트 입력 가능
• 댓글, 게시글 작성 창 등에 주로 사용

<textarea name="message" rows="5" cols="30"></textarea>

4. <select> & <option> 태그

• 드롭다운 목록을 만들어 단일/다중 선택 가능
• multiple 속성을 추가하면 여러 개 선택 가능

<select name="country">
  <option value="kr">한국</option>
  <option value="us">미국</option>
  <option value="jp">일본</option>
</select>

5. <button> 태그

• 클릭 가능한 버튼 생성
• type 속성: submit, reset, button
• CSS 및 자바스크립트와 결합해 다양한 UI 구현 가능

<button type="submit">제출하기</button>
<button type="reset">다시 쓰기</button>
<button type="button" onclick="alert('클릭됨')">클릭</button>

6. 레이블(<label>) 태그

• 입력 요소와 연결되어 사용성을 높임
• for 속성값이 입력 요소의 id와 일치해야 함

<label for="email">이메일</label>
<input type="email" id="email" name="email">

7. 필수 입력 및 검증 속성

• required: 필수 입력값 지정
• maxlength, minlength: 입력 글자 수 제한
• pattern: 정규식을 통한 입력값 검증

<input type="text" name="nickname" required maxlength="10">
<input type="email" name="user_email" required>

 

마무리

HTML 폼 요소는 단순한 입력 창을 넘어서 사용자와 서버 간 데이터를 주고받는 핵심 역할을 합니다. 각 속성과 태그들을 적절히 조합하면 회원가입, 검색, 문의폼 등 다양한 기능을 구현할 수 있습니다.

티스토리 블로그 글로 정리할 때는 위와 같이 코드 예제와 함께 설명을 덧붙이면, 독자들이 직접 복사해 실습해 보기에 유용합니다.