HTML 폼(form)을 사용해 이메일을 보내려면 폼의 action 속성에 이메일 주소를 지정하면 됩니다. 이때 이메일 주소 앞에 mailto:를 붙여 mailto:emailid@example.com 형태로 작성합니다.
이렇게 설정하면 사용자가 폼을 작성하고 제출 버튼을 누를 때, 기본 메일 클라이언트(Outlook, Apple Mail 등)가 자동으로 실행되며 입력한 내용이 이메일 본문에 담겨 전송됩니다.
기본 예제
아래 코드는 HTML 폼으로 이메일을 전송하는 간단한 학생 연락 양식 예제입니다.
<!DOCTYPE html> <html> <body> <h2>학생 연락 양식</h2> <form action="mailto:emailid@example.com" method="post" enctype="text/plain"> 학생 이름:<br><input type="text" name="sname"> <br> 제목:<br><input type="text" name="ssubject"><br> <input type="submit" value="보내기"> </form> </body> </html>
코드 설명
- action 속성:
mailto:프로토콜 뒤에 수신자 이메일 주소를 입력하여 메일이 전송될 대상을 지정합니다. - method 속성:
post방식을 사용하면 폼 데이터가 URL에 노출되지 않고 전송됩니다. - enctype 속성:
text/plain으로 설정하면 입력값이 일반 텍스트 형태로 이메일 본문에 포함됩니다.
참고 사항
mailto: 방식은 서버 측 처리 없이 간편하게 사용할 수 있지만, 몇 가지 한계가 있습니다. 사용자 컴퓨터에 메일 클라이언트가 설정되어 있어야 하며, 브라우저와 클라이언트 환경에 따라 동작이 다를 수 있습니다. 또한 실제 서비스에서는 안정적인 이메일 전송을 위해 PHP, Node.js 등 백엔드 언어나 SendGrid 같은 이메일 API를 활용하는 것이 권장됩니다.