이번 포스팅에서는 HTML `<input>` 태그의 주요 유형인 텍스트, 패스워드, 라디오 버튼, 체크박스에 대해 알아봅니다. 이론부터 실제 예제까지, 각 유형의 입력 필드를 어떻게 활용하는지 배워보세요.
자동목차
1. 이론
HTML `<input>` 태그는 사용자로부터 정보를 입력받는 중요한 요소입니다. `type` 속성을 이용해 다양한 형태의 입력 필드를 생성할 수 있습니다. 이번 섹션에서는 텍스트, 패스워드, 라디오 버튼, 체크박스 이 네 가지 유형을 중점적으로 다룹니다.
2. 실습
다음 코드는 위 네 가지 유형의 입력 필드를 모두 포함한 예제입니다.
<form>
<label for="username">사용자명:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">비밀번호:</label><br>
<input type="password" id="pwd" name="pwd"><br>
<label for="gender">성별:</label><br>
<input type="radio" id="male" name="gender" value="male">남성<br>
<input type="radio" id="female" name="gender" value="female">여성<br>
<label for="vehicle">차량 보유:</label><br>
<input type="checkbox" id="vehicle" name="vehicle" value="yes">예
<input type="submit" value="제출">
</form>
3. 코드 설명
- <input type="text">: 텍스트 입력 필드를 생성합니다. 사용자는 이 필드에 텍스트를 입력할 수 있습니다.
- <input type="password">: 패스워드 입력 필드를 생성합니다. 입력한 내용은 별표(*)로 표시됩니다.
- <input type="radio">: 라디오 버튼을 생성합니다. 사용자는 동일한 `name` 속성을 가진 버튼 중 하나만 선택할 수 있습니다.
- <input type="checkbox">: 체크박스를 생성합니다. 사용자는 하나 이상의 체크박스를 선택할 수 있습니다.
- <input type="submit">: 제출 버튼을 생성합니다. 이 버튼을 누르면 폼에 입력한 데이터가 서버로 전송됩니다.
4. 폼 활용
1. 회원 가입
웹사이트에서 가장 흔하게 볼 수 있는 폼의 활용 사례입니다. 사용자로부터 이름, 이메일, 비밀번호 등의 정보를 수집하여 회원 가입을 처리합니다.
<form>
<label for="name">이름:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">이메일:</label><br>
<input type="email" id="email" name="email"><br>
<label for="pwd">비밀번호:</label><br>
<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="회원 가입">
</form>
2. 댓글 작성
사용자가 글에 댓글을 달거나, 메시지를 보내는 기능도 폼을 통해 이루어집니다.
<form>
<label for="comment">댓글:</label><br>
<textarea id="comment" name="comment"></textarea><br>
<input type="submit" value="댓글 작성">
</form>
3. 검색
검색 엔진이나 웹사이트 내부 검색 기능도 폼을 활용합니다.
<form>
<input type="text" id="search" name="search">
<input type="submit" value="검색">
</form>
4. 설문 조사
사용자의 의견을 수집하기 위한 설문 조사나 피드백 수집 등도 폼을 통해 이루어집니다.
<form>
<label for="feedback">피드백:</label><br>
<textarea id="feedback" name="feedback"></textarea><br>
<input type="submit" value="제출">
</form>
5. 마무리
HTML <input> 태그는 웹 폼에서 사용자로부터 정보를 수집하는 데 중요한 역할을 합니다. 이번 포스팅을 통해 입력 태그의 주요 유형과 각각의 활용 방법에 대해 알아보았습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다. 다음 포스팅에서는 폼 제어 요소에 대해 더 자세히 알아보겠습니다.