JavaScript로 양식 데이터를 효과적으로 읽기

이 튜토리얼에서는 JavaScript를 사용하여 사용자가 양식에서 입력한 데이터를 읽고 처리하는 방법을 배웁니다. 양식 요소는 사용자가 정보를 입력할 수 있도록 하는 웹사이트의 필수 요소입니다. 이를 위해 복잡한 프레임워크를 사용해야 한다고 생각하는 경우가 많습니다. 이 글에서는 간단한 JavaScript를 사용하여 양식 데이터를 성공적으로 처리하는 방법을 보여드리겠습니다.

주요 결과

• 양식을 만드는 방법, JavaScript를 사용하여 양식 데이터에 액세스하는 방법, preventDefault를 사용하여 양식의 기본 동작을 방지하여 사용자의 데이터 입력을 제어할 수 있는 방법을 배웁니다.

단계별 가이드

문서에 간단한 HTML 양식을 만드는 것으로 시작하세요. 다양한 입력 필드와 제출 버튼을 성공적으로 삽입했는지 확인하세요.

양식이 브라우저에 표시되면 테스트할 수 있습니다. 입력 필드에 이름을 입력하고 Enter 키 또는 제출 버튼을 누릅니다. 모든 것이 올바르게 작동하면 입력한 이름이 포함된 알림이 표시됩니다.

이를 위해 HTML 파일에 스크립트 태그를 추가합니다. 이 스크립트에서는 이벤트 객체를 매개변수로 받아들이는 submitForm이라는 전역 함수를 정의합니다.

스크립트에서 양식에 대한 이벤트 핸들러 onsubmit을 정의할 수 있습니다. 즉, 양식이 제출될 때 submitForm 함수가 호출됩니다. 이벤트 핸들러에 있을 때는 이벤트 객체를 항상 사용할 수 있습니다.

중요한 단계 중 하나는 event.preventDefault()를 호출하여 양식의 기본 동작을 방지하는 것입니다. 데이터가 제출된 후 폼이 페이지를 다시 로드하는 것을 원하지 않기 때문에 이 단계가 중요합니다.

이제 양식 데이터 읽기를 시작할 수 있습니다. 양식 데이터는 event.target에서 사용할 수 있습니다. 이렇게 하면 입력한 정보에 쉽게 액세스할 수 있습니다.

양식 데이터를 가져오려면 생성자 FormData를 사용하여 새 객체를 만들고 양식 요소를 매개변수로 전달합니다. 객체가 생성되면 get 메서드를 사용하여 입력 값에 액세스할 수 있습니다.

예를 들어 formData.get('firstName')을 사용하면 이름이 'firstName'인 입력 필드의 값을 받습니다. 그런 다음 이 값을 사용하여 사용자에게 표시되는 메시지를 만들 수 있습니다.

양식에 다른 입력 필드를 추가하려면 다음과 같이 진행하세요: 'lastName'이라는 이름의 성에 대한 추가 텍스트 필드를 추가합니다. 그런 다음 비슷한 단계를 수행하여 해당 값을 검색할 수 있습니다.

그런 다음 두 값을 모두 사용하여 개인화된 메시지를 생성할 수 있습니다. 예: "안녕하세요 [이름] [성]!"

더 이상 알림을 통해 메시지를 표시하지 않고 HTML에 직접 통합하려면 DOM에 메시지를 텍스트로 표시하는 새 섹션을 추가하면 됩니다. 이렇게 하려면 고유 ID를 가진 div를 만들고 그 내부 텍스트를 결과 메시지로 설정합니다.

이제 콘솔에서 데이터를 출력하거나 fetch를 통한 POST 요청과 같은 다른 JavaScript 작업에 사용하여 다양한 변형을 시도해 볼 수 있습니다.

이것은 JavaScript로 양식 데이터를 읽고 사용할 수 있는 가장 기본적인 방법입니다. 유효성 검사를 삽입하거나 서버에서 데이터를 추가 처리하는 등 여러 가지 다른 방법으로 개선할 수 있습니다.

요약

이 튜토리얼에서는 간단한 JavaScript 함수를 사용하여 양식 데이터를 읽는 방법을 배웠습니다. event.preventDefault의 중요성을 살펴보고 문서에 직접 삽입하는 방법뿐만 아니라 알림에 데이터를 삽입하는 방법을 살펴보았습니다. 이러한 기초를 바탕으로 보다 복잡한 양식과 그 데이터 처리를 설계할 수 있습니다.