HTML 폼은 텍스트 필드, 드롭다운, 체크박스 등 다양한 요소를 통해 사용자로부터 데이터를 수집하는 기능입니다. HTML에서 폼은 <form> 태그로 감싸며, 각 요소는 <input> 태그를 사용해 생성합니다.
HTML 폼은 사용자가 웹사이트나 웹 애플리케이션과 상호작용할 수 있게 해주는 핵심 도구입니다. 웹 폼을 통해 사용자는 데이터를 제출할 수 있고, 웹사이트나 서버는 해당 데이터를 처리하고 저장할 수 있습니다.
그렇다면 HTML에서 폼은 어떻게 만들까요? 이 글에서 그 답을 단계별로 살펴보겠습니다.
이 튜토리얼에서는 실제 예제를 바탕으로 HTML 폼의 기본 개념, 입력 필드 추가 방법, 그리고 폼을 통해 서버로 데이터를 전송하는 방법까지 다룹니다. 글을 끝까지 읽고 나면 누구나 자신 있게 HTML 폼을 작성할 수 있을 것입니다.
HTML 폼이란?
HTML에서 폼(form)은 하나 이상의 요소로 구성됩니다. HTML 폼에는 다음과 같은 요소들이 포함될 수 있습니다.
- 한 줄 텍스트 필드
- 텍스트 박스
- 드롭다운 박스
- 체크박스
- 버튼
- 라디오 버튼
이 중 버튼과 텍스트 박스를 제외한 대부분의 요소는 HTML 코드에서 <input> 태그를 사용해 만듭니다.
사용자가 폼을 제출하면 폼의 내용은 두 가지 방식으로 처리될 수 있습니다.
- 서버로 전송되어 추가적으로 처리되거나,
- 웹 브라우저 내부에서 직접 처리됩니다.
폼을 만들기 전에는 먼저 설계를 고민해야 합니다. 어떤 데이터를 수집해야 할까요? 어떻게 하면 폼을 단순하게 유지할 수 있을까요? 폼이 클수록 사용자가 끝까지 작성해 완료할 가능성은 낮아진다는 점을 기억하세요.
실습 프로젝트 소개
이번 튜토리얼에서는 커피숍 웹사이트용 폼을 만들어 보겠습니다. '쓰리 브라더스 커피하우스(Three Brothers Coffee House)'라는 가게가 고객 문의를 웹사이트를 통해 접수받을 수 있는 폼을 의뢰했다고 가정합니다.
우리가 만들 폼은 네 가지 정보를 받아야 합니다.
- 사용자의 이름
- 사용자의 이메일 주소
- 사용자가 해당 커피숍에 방문한 적이 있는지 여부
- 커피숍에 보내고 싶은 메시지
즉, 폼에는 네 개의 입력 요소가 필요하고, 사용자가 폼을 제출할 수 있도록 버튼 하나도 추가해야 합니다.
HTML <form> 태그
HTML에서 폼은 <form> 태그 안에 감싸서 정의합니다. 기본 구조는 다음과 같습니다.
<form> // 폼 요소들이 들어갑니다 </form>
<form> 태그는 HTML에서 폼을 정의하는 역할을 하며, 그 안에는 체크박스나 한 줄 텍스트 필드 같은 다양한 폼 요소를 포함할 수 있습니다.
폼 요소는 action과 method라는 두 가지 속성을 받습니다. 이 속성들은 뒤에서 자세히 다루겠습니다.
HTML 폼의 <input> 요소
대부분의 HTML 폼 컨트롤은 input 요소를 포함합니다. input 요소는 사용자로부터 다양한 유형의 데이터를 수집하는 데 사용되며, <input> 태그로 정의합니다.
<input> 요소가 화면에 어떻게 표시되는지는 지정된 type 속성에 따라 달라집니다. 예를 들어, 텍스트 박스로 지정된 입력 필드와 라디오 버튼으로 지정된 입력 필드는 서로 다르게 나타납니다.
<input> 요소의 기본 문법은 다음과 같습니다.
<input type="타입" id="요소ID">
여기서 첫 번째 속성인 type은 해당 폼 필드가 받아들일 입력의 종류를 의미합니다. type 속성에는 많은 값을 지정할 수 있으며, 대표적인 값은 다음과 같습니다.
buttoncheckboxemailtextnumberradio
두 번째 속성인 id는 해당 input 요소를 고유하게 식별하는 역할을 합니다. 나중에 스크립트로 사용자가 제출한 데이터를 다룰 때 이 id 값이 활용됩니다.
이제 쓰리 브라더스 커피하우스 예제로 돌아가 보겠습니다. 먼저 수집할 정보는 사용자의 이름과 이메일 주소입니다. 이 두 가지는 <input> 태그 두 개로 수집할 수 있습니다.
<form> <label for="name">이름:</label><br/> <input type="text" id="name" name="name"><br /><br /> <label for="email">이메일:</label><br/> <input type="email" id="email" name="email"> </form>
위 코드를 실행하면 이름과 이메일 주소, 두 가지 값을 입력받는 폼이 완성됩니다. 참고로 이 예제에서는 <label> 요소도 함께 사용했는데, 이 요소에 대해서는 곧 자세히 설명하겠습니다.
HTML 폼의 name 속성
HTML 폼의 모든 요소에는 반드시 name 속성이 있어야 합니다. 이 속성은 폼 내용을 제출할 때 사용되며, name 속성이 지정되지 않은 요소의 값은 서버로 전송되지 않습니다.
앞선 예제에서 '이름' 필드는 값이 name인 name 속성을, '이메일' 필드는 값이 email인 name 속성을 가지고 있습니다.
HTML <label> 요소
앞선 예제에서는 폼의 각 항목에 라벨을 붙이기 위해 <label> 요소를 사용했습니다. <label> 태그를 활용하면 해당 폼 요소의 용도와 어떤 데이터를 입력해야 하는지 명확하게 표시할 수 있습니다.
또한 <label> 태그는 접근성 측면에서도 중요합니다. 스크린 리더(screen reader)를 사용하는 사용자에게는 라벨 텍스트가 읽혀 전달되기 때문입니다. 스크린 리더는 웹 페이지에서 입력 필드를 만나면 연결된 라벨의 내용을 읽어줍니다.
HTML 라벨의 기본 문법은 다음과 같습니다.
<form> <label for="name">이름:</label><br/> <input type="text" id="name" name="name"> </form>
위 예제에서는 사용자의 이름을 수집하는 폼을 만들고, <label> 태그로 '이름:'이라는 라벨을 추가했습니다. 여기서 주목할 점은 <label> 요소에 for 속성을 지정했다는 것입니다. for 속성의 값은 라벨이 연결될 input 요소의 id 값과 일치해야 하며, 이를 통해 폼 필드와 라벨이 서로 연결됩니다.
HTML 폼의 다양한 요소
다시 쓰리 브라더스 커피하우스 예제로 돌아가겠습니다. 우리는 처음에 네 가지 정보, 즉 사용자의 이름, 이메일 주소, 고객 여부, 그리고 전달할 메시지를 수집하기로 했습니다.
지금까지 이름 필드와 이메일 필드 두 개를 만들었습니다. 이제 나머지 폼 요소를 만드는 방법을 살펴보겠습니다.
라디오 버튼(Radio Buttons)
라디오 버튼은 HTML 폼에서 가장 흔히 사용되는 입력 유형 중 하나입니다. 라디오 버튼은 제한된 선택지 중에서 하나의 값만 선택하도록 할 때 사용되며, 성별, 연령대, 예/아니오 응답을 수집하는 폼에 자주 활용됩니다.
라디오 버튼의 기본 문법은 다음과 같습니다.
<input type="radio" name="radio_button">
우리 폼에서는 사용자가 쓰리 브라터스 커피하우스의 고객인지 묻고 싶습니다. 이 작업은 라디오 버튼으로 구현할 수 있습니다.
<form> <p>쓰리 브라더스 커피하우스의 고객이신가요?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">예</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">아니오</label><br /> </form>
이렇게 하면 사용자는 yes 또는 no, 두 값 중 하나를 제출할 수 있습니다.
코드를 하나씩 분석해 보겠습니다. 먼저 <form>을 정의하고, <p> 태그를 사용해 사용자에게 안내 문구를 추가했습니다.
그다음 줄에서는 값이 yes인 라디오 버튼을 만들고, '예'라는 텍스트를 표시하는 라벨을 붙였습니다. 이어서 값이 no인 라디오 버튼과 '아니오'라는 텍스트를 표시하는 라벨을 만들었습니다.
여기서 라디오 버튼에 value 속성이 지정되어 있다는 점에 주목하세요. 이 value 값이 사용자가 폼을 제출할 때 서버로 전송되는 실제 데이터입니다. 따라서 사용자가 '예' 라디오 버튼을 클릭하면 yes라는 값이 서버로 전달됩니다.
HTML <textarea> 요소
폼에 추가할 마지막 입력 요소는 텍스트 영역(textarea)입니다. 지금까지 사용자의 이름, 이메일 주소, 고객 여부를 수집했습니다. 이제 커피숍에 메시지를 남길 수 있는 요소를 추가해야 합니다.
이때 <textarea> 요소를 사용하며, 코드는 다음과 같습니다.
<form> <label for="message">메시지:</label><br /> <textarea id="message" name="message"> 쓰리 브라더스 커피하우스에 전달하고 싶은 메시지를 입력하세요. </textarea> </form>
코드를 살펴보면, 먼저 '메시지:'라는 텍스트를 표시하는 label을 정의했습니다.
그다음 <textarea> 태그로 텍스트 영역을 정의하면서 두 가지 속성을 지정했습니다.
id: 사용자가 응답을 제출한 후 폼 내용을 참조할 때 사용됩니다.name: 폼 내용이 정상적으로 제출되기 위해 반드시 필요합니다.
마지막으로 <textarea>의 시작 태그와 종료 태그 사이에 기본 안내 문구를 넣었습니다. 이 문구는 사용자가 처음 화면을 열었을 때 보게 되는 기본값(default message)입니다.
이제 사용자가 커피숍에 메시지를 남길 수 있는 텍스트 영역 필드가 완성되었습니다.
HTML 제출(submit) 버튼
폼의 내용을 모두 정의했다면 이제 제출 버튼을 추가할 차례입니다. submit 버튼의 기본 문법은 다음과 같습니다.
<input type="submit" value="Submit">
submit 버튼은 폼의 내용을 폼 핸들러(form handler)로 전송하는 역할을 합니다. 폼 핸들러란 일반적으로 폼 내용을 처리할 수 있는 웹 서버 상의 페이지를 의미합니다. submit 버튼은 이 폼 핸들러와 연결되며, 연결 대상은 <form> 태그의 action 속성으로 지정합니다.
커피숍 웹 폼에 submit 버튼을 추가한 전체 코드는 다음과 같습니다.
<form action="/post.php">
<label for="name">이름:</label>
<br/>
<input type="text" id="name" name="name">
<br />
<br />
<label for="email">이메일:</label>
<br />
<input type="email" id="email" name="email">
<br />
<p>쓰리 브라더스 커피하우스의 고객이신가요?</p>
<input type="radio" id="yes" name="customer" value="yes">
<label for="yes">예</label>
<br />
<input type="radio" id="no" name="customer" value="no">
<label for="no">아니오</label>
<br /><br />
<label for="message">메시지:</label><br />
<textarea id="message" name="message">
쓰리 브라더스 커피하우스에 전달하고 싶은 메시지를 입력하세요.
</textarea>
<input type="submit" value="제출">
</form>
위 코드에서 볼 수 있듯이 폼에 submit 버튼을 추가했고, <form> 태그에 action 매개변수도 지정했습니다. 이 action 값은 폼 내용을 처리할 파일과 폼을 연결하는 역할을 합니다.
웹 폼 제출하기: action과 method
HTML 폼을 만든 후에는 사용자가 제출한 데이터를 처리할 핸들러(handler)를 준비해야 합니다. <form> 요소는 폼 데이터를 서버로 전송할 때 사용하는 두 가지 속성, 즉 action과 method를 제공합니다.
폼의 action 속성
action 속성은 폼 핸들러 코드의 위치를 정의합니다. 사용자가 submit 버튼을 클릭해 폼을 제출하면, 폼이 수집한 데이터가 action에 지정된 폼 핸들러로 전송됩니다.
앞선 예제에서는 폼이 제출될 때 데이터가 폼 핸들러 코드를 담고 있는 post.php 페이지로 전송됩니다. action 속성이 지정된 폼의 예는 다음과 같습니다.
<form action="/post.php"> </form>
만약 action 속성을 지정하지 않으면, 폼 데이터는 현재 페이지 자체로 제출됩니다.
폼의 method 속성
method 속성은 폼이 제출될 때 사용할 HTTP 메서드를 지정합니다. 기본값은 GET이며, 필요에 따라 POST 같은 다른 HTTP 메서드도 사용할 수 있습니다.
method 속성이 적용된 폼의 예는 다음과 같습니다.
<form action="/post.php" method="POST"> </form>
이 폼이 제출되면 수집된 데이터는 HTTP POST 방식으로 서버에 전송됩니다. 만약 GET 요청을 보내고 싶었다면 "GET"을 명시하거나, GET이 기본값이므로 아예 비워두어도 됩니다.
대부분의 경우 폼 데이터를 전송할 때는 HTTP POST 메서드를 사용하는 것이 좋습니다. 그 이유는 GET 방식에서는 폼 데이터가 페이지 주소창에 그대로 노출되기 때문입니다. 예를 들어, 'name'이라는 필드에 'Pauline'이라는 값이 담긴 폼을 GET 방식으로 post.php에 제출하면 다음과 같은 주소가 전송됩니다.
/post.php?name=Pauline
이처럼 GET 방식은 데이터가 외부에 노출되므로 안전하지 않습니다. 민감한 정보를 다룰 때는 GET 메서드를 절대 사용해서는 안 됩니다.
마무리
폼은 사용자 데이터를 수집하고 처리할 수 있게 해주는 HTML의 핵심 기능입니다.
이 튜토리얼에서는 실제 예제를 통해 HTML 폼의 기본 개념과 첫 번째 웹 폼을 만드는 과정을 살펴보았습니다. 이제 여러분도 전문가처럼 자신만의 HTML 폼을 설계하고 개발할 준비가 되었습니다!