HTML 양식 작업 속성 익히기:단계별 가이드

HTML 양식 작업 속성은 양식이 웹페이지에 제출될 때 데이터에 어떤 일이 발생해야 하는지 정의합니다. 작업 속성의 값은 양식의 콘텐츠를 처리할 웹 리소스의 URL이어야 합니다.

사이트나 웹 애플리케이션에서 양식을 작성하고 데이터를 요청할 때 데이터로 무언가를 하고 싶은 경우가 많습니다. 그렇죠? 여기가 양식 작업 속성이 작동하는 곳입니다.

HTML로 양식을 작성하는 기본 사항을 알아야 합니다. 기본적으로

요소에 양식 내용을 래핑합니다. 여는 태그에는 사용할 수 있는 몇 가지 속성이 있으며 그 중 하나가 액션입니다.

action 속성은 양식이 제출될 때 양식 데이터를 보낼 위치를 지정하는 데 사용됩니다. 따라서 작업의 값은 양식을 처리할 페이지입니다.

HTML 양식 작업 속성은 양식의 내용을 처리할 URL을 나타냅니다. 작업 속성이 가리키는 웹 리소스가 "메서드" 속성에 지정한 모든 방법을 허용하는지 확인해야 합니다.

action 속성의 구문을 살펴보겠습니다:

<form action="/submit.php">
 
</form>

action 속성은 여는 태그 사이에 나타납니다. 이 속성은 method 속성과 함께 자주 사용됩니다.

기본적으로 메소드 속성은 "get"으로 설정됩니다. 이는 양식이 제출될 때 HTTP GET 요청을 통해 데이터를 전송한다는 의미입니다. 시작 태그에 "method='post'"를 지정하여 방법을 변경할 수 있습니다.

제출 버튼을 클릭하면 양식의 데이터가 "작업" URL로 전송됩니다.

양식 작업 HTML 예

예를 살펴보겠습니다:

<form action="process.html" method="get">
 <label for="username">User</label>
 <input type="text" id="username" name="username"><br><br>
 <label for="email">Email</label>
 <input type="email" id="email" name="email"><br><br>
 <input type="submit" value="Submit">
</form>

위에서 작업은 사용자 이름과 이메일 데이터를 process.html이라는 페이지로 보내는 것입니다. 사용자 이름과 이메일 데이터의 입력 유형은 "text"입니다. 입력 유형이 "제출"인 버튼을 정의합니다. 이 버튼을 클릭하면 데이터가 "작업" URL로 전송됩니다.

이제 위의 양식 예제를 실제 HTML 파일에 연결하세요. 그런 다음 동일한 폴더에 process.html이라는 다른 파일을 만듭니다. 이 파일에는 다음 내용이 있어야 합니다:

<html>
 <head>
 <meta charset="UTF-8">
 <title>Process</title>
 </head>
 <body>This is the destination process page</body>
</html>

이 코드는 페이지가 로드될 때 텍스트 단락을 표시하는 간단한 웹 페이지를 정의합니다. 앞서 정의한 웹 양식으로 돌아가서 작성해 보겠습니다.

이제 제출을 클릭하세요. 자동으로 process.html 페이지로 이동됩니다! 그렇다면 URL 표시줄을 보셨나요? 추가 데이터는 모두 무엇인가요? "?" 이후의 데이터 기호는 쿼리 매개변수이며 요청을 GET으로 지정했기 때문에 데이터가 쿼리 매개변수로 전달됩니다.

이 예에서는 이것이 그다지 유용하지 않다고 생각할 수도 있습니다. 그것은 사실이다. 일반적으로 action 속성은 양식 내용을 서버 페이지로 보내는 데 사용됩니다. 예를 들어, process.php라는 PHP 파일을 사용할 수 있습니다.

그러면 이 process.php는 데이터로 모든 마법을 수행할 것입니다. 이 페이지에서는 데이터를 데이터베이스에 저장할 수도 있고, 원하는 이벤트에 등록할 수도 있습니다. PHP는 웹 개발에 자주 사용되는 강력한 서버 스크립팅 언어입니다. WordPress를 사용해 본 적이 있다면 아마도 처리 중인 데이터가 PHP를 통해 수행되었을 것입니다.

PHP에 대해 자세히 알아보려면 PHP를 배우는 방법 가이드를 확인하세요.

작업 속성이 필수인가요?

HTML4로 돌아가면 대답은 '예'입니다. 요즘 HTML5에서는 액션 속성을 지정할 필요가 없습니다. 작업 속성이 없는 양식 태그가 있는 경우 데이터는 자체 페이지로 전송됩니다.

우리는 왜 이것을 할까요? 단일 페이지 애플리케이션(SPA)이 탄생하면서 JavaScript를 사용하여 양식 데이터를 처리하고 싶을 수도 있습니다. 아니면 React/Angular와 같은 다른 프레임워크를 사용하여 데이터를 처리하고 싶을 수도 있습니다.

바닐라 자바스크립트를 사용하는 경우 양식이 제출될 때 자바스크립트 이벤트 리스너를 추가하여 이를 수행하는 경우가 많습니다.

결론

HTML 양식 작업 속성은 양식이 제출될 때 양식의 내용에 어떤 일이 발생하는지 정의합니다. action 속성은 URL을 인수로 허용합니다.

웹 개발자가 되는 데 관심이 있나요? 전체 HTML 학습 방법 가이드를 확인하세요. HTML 학습에 대한 전문가의 조언은 물론 최고의 온라인 강좌 및 학습 리소스 목록도 찾아볼 수 있습니다.