jQuery와 HTML을 활용한 폼(양식) 만들기 완벽 가이드

HTML만으로 폼 만들기

웹 페이지에서 사용자 입력을 받으려면 HTML의 <form> 태그를 사용합니다. 기본적인 학생 정보 입력 폼은 다음과 같이 작성할 수 있습니다.

<form action="" method="get">
    Details:<br><br>
    Student Name<br><input type="name" name="sname"><br>
    Exam Date and Time<br><input type="datetime-local" name="datetime"><br>
    <input type="submit" value="Submit">
</form>

위 코드에서 각 요소의 역할은 다음과 같습니다.

action: 폼 데이터를 전송할 서버 주소를 지정합니다. 비워 두면 현재 페이지로 전송됩니다.
method: 데이터 전송 방식을 지정하며, 일반적으로 get 또는 post를 사용합니다.
input type="datetime-local": 날짜와 시간을 함께 선택할 수 있는 입력 필드를 제공합니다.

jQuery로 폼에 입력 요소 추가하기

jQuery를 활용하면 이미 존재하는 폼에 동적으로 새로운 입력 요소를 손쉽게 추가할 수 있습니다. 예를 들어 버튼을 하나 추가하려면 다음과 같이 append() 메서드를 사용합니다.

$form.append('<input type="button" value="button">');

append()는 선택한 요소 내부의 마지막에 새로운 HTML 콘텐츠를 삽입하는 jQuery 메서드입니다. 이를 통해 페이지를 새로 고침하지 않고도 폼 구조를 유연하게 변경할 수 있습니다.

폼 자체를 동적으로 생성하는 방법

더 실용적인 예제로, 처음부터 폼 전체를 jQuery로 생성하고 문서에 추가하는 방법을 살펴보겠습니다.

$myform = $("<form></form>");
$myform.append('<input type="button" value="button">');
$('body').append($myform);

위 코드의 실행 흐름은 다음과 같습니다.

$("<form></form>") — 빈 폼 요소를 jQuery 객체로 생성합니다.
$myform.append(...) — 생성된 폼 안에 버튼 입력 요소를 추가합니다.
$('body').append($myform) — 완성된 폼을 문서의 <body>에 삽입해 화면에 표시합니다.

정리

HTML만으로도 기본적인 폼을 충분히 만들 수 있지만, jQuery를 함께 사용하면 런타임에 폼과 입력 요소를 동적으로 생성·수정할 수 있어 훨씬 유연한 사용자 인터페이스를 구현할 수 있습니다. 특히 조건에 따라 입력 필드를 추가하거나 제거해야 하는 경우 jQuery의 append() 같은 DOM 조작 메서드가 매우 유용합니다.