HTML 폼과 입력 태그: 사용자 입력을 위한 폼 만들기
웹 페이지에서 사용자의 데이터를 수집하고 처리하는 것은 웹 개발의 중요한 부분입니다. HTML 폼(form)은 사용자로부터 정보를 받아 서버에 전송하는 데 사용되는 요소입니다. 이 강의에서는 <form> 태그와 함께 사용되는 다양한 입력(input) 태그들에 대해 알아볼 것입니다.
HTML <form> 요소
<form> 태그는 사용자 입력을 위한 HTML 요소의 그룹을 정의합니다. 이 태그는 사용자가 입력한 데이터를 서버에 제출하기 위한 방법을 제공합니다.
기본 폼 구조
<form action="submit.php" method="post">
<!-- 입력 필드들 -->
</form>- action 속성은 폼 데이터가 전송될 서버의 URL을 지정합니다.
- method 속성은 데이터를 전송하는 방식을 정의합니다 (get 또는 post).
입력 태그 <input>
<input> 태그는 다양한 유형의 데이터 입력 필드를 만듭니다. type 속성을 사용하여 다양한 형태의 입력 필드를 생성할 수 있습니다.
텍스트 입력 필드
<label for="name">이름:</label>
<input type="text" id="name" name="name">- type="text"는 한 줄짜리 텍스트 입력 필드를 생성합니다.
- label 태그는 입력 필드의 레이블을 정의하며, for 속성은 연결할 입력 필드의 ID를 지정합니다.
비밀번호 입력 필드
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">- type="password"는 비밀번호 입력 필드를 만듭니다. 입력된 텍스트는 별표나 점으로 표시됩니다.
체크박스와 라디오 버튼
<label><input type="checkbox" name="subscribe"> 뉴스레터 구독</label>
<label><input type="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" name="gender" value="female"> 여성</label>- type="checkbox"는 체크박스를, type="radio"는 라디오 버튼을 만듭니다.
- 체크박스는 다중 선택이 가능하고, 라디오 버튼은 단일 선택만 가능합니다.
제출 버튼
<input type="submit" value="제출">- type="submit"은 폼 데이터를 제출하는 버튼을 생성합니다. value 속성은 버튼에 표시될 텍스트를 지정합니다.
이메일과 전화번호 입력 필드
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">전화번호:</label>
<input type="tel" id="phone" name="phone">- type="email"은 이메일 주소 입력을 위한 필드를 생성합니다. 올바른 이메일 형식인지 자동으로 검증합니다.
- type="tel"은 전화번호 입력 필드를 만듭니다. 특정 형식을 강제하지 않지만, 패턴 속성을 사용하여 형식을 지정할 수 있습니다.
날짜와 시간 입력 필드
<label for="birthday">생일:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<label for="appt">약속 시간:</label>
<input type="time" id="appt" name="appt">
- type="date"와 type="time"은 각각 날짜와 시간을 입력받는 필드를 생성합니다. 사용자는 편리한 UI를 통해 날짜와 시간을 선택할 수 있습니다.
드롭다운 목록
<label for="country">국가:</label>
<select id="country" name="country">
<option value="korea">한국</option>
<option value="usa">미국</option>
<option value="japan">일본</option>
</select>- <select> 태그는 드롭다운 목록을 만듭니다. <option> 태그들은 사용자가 선택할 수 있는 옵션들을 정의합니다.
폼 데이터의 처리
사용자가 폼을 제출하면, action 속성에서 정의한 서버 스크립트(예: submit.php)가 폼 데이터를 처리합니다. 이 처리 방식은 웹 개발의 서버 사이드 프로그래밍 영역에 속합니다.
폼 예제
<form action="submit.php" method="post" style="background-color: lightgray; padding: 20px; border-radius: 10px;">
<label for="name">이름:</label>
<input type="text" id="name" name="name" style="margin-bottom: 10px;"><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" style="margin-bottom: 10px;"><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age" style="margin-bottom: 10px;"><br>
<input type="button" value="회원 가입" style="background-color: blue; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
</form>이 예제에서는 간단한 회원 가입 폼을 만들어 보았습니다. 여기에는 이름과 이메일 입력 필드가 포함되어 있으며, type="submit" 버튼으로 폼을 제출할 수 있습니다.
(*참고 : 아래의 예시를 잘 보여드리기 위해 css로 style을 지정하였고, input type button으로 지정된 것은 원래 "sumbit" 처리가 되어야합니다. form action은 php 환경에서 구동될 수 있도록 코드를 세팅하였습니다.)
결론
HTML 폼과 입력 태그를 사용하여 웹 페이지에서 사용자의 데이터를 효과적으로 수집하고 처리할 수 있습니다. 폼은 정보를 수집하는 가장 기본적인 방법으로, 웹 개발에서 매우 중요합니다. 당장 예시를 생각해봐도 티스토리 로그인 화면, 타 사이트 회원가입 시 생년월일 선택할 대 드롭다운 목록 등 안쓰이는 곳이 없고, 데이터가 백엔드로 넘어가 DB를 형성하는 중요한 과정입니다.
마치며
이번 3강에서는 HTML의 <form> 요소와 다양한 입력 태그들에 대해 알아보았는데요. 이를 통해 사용자로부터 데이터를 수집하고, 서버에 전송하는 방법을 이해할 수 있었습니다. 비주얼스튜디오 코드(VSC)를 활용하여 실습해보시면 공부한 내용이 좀 더 잘 와닿을 것입니다. 다음 강의부터는 CSS 기초와 스타일링 방법에 대해 더 자세히 살펴보겠습니다.
댓글