Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 요소가 속한 양식 이름 설정하기 – form 속성 활용법

HTML에서 form 속성을 사용하면 요소가 속한 양식(form)의 이름을 지정할 수 있습니다. 이 속성을 활용하면 하나의 요소가 하나 이상의 양식에 연결되도록 설정할 수 있으며, 특히 <button>, <input>, <select> 같은 요소가 실제로는 양식 태그 외부에 위치하지만 특정 양식에 데이터를 제출해야 할 때 매우 유용합니다.

form 속성 사용 예제

다음 코드를 실행하여 form 속성을 직접 구현해 볼 수 있습니다. 아래 예제에서는 제출 버튼이 <form> 태그 바깥에 있지만, form="myform" 속성 덕분에 해당 양식과 연결되어 정상적으로 동작합니다.

<!DOCTYPE html>
<html>
   <body>
      <form action = "" method = "get" id = "myform">
         SubjectID: <input type = "number" name = "subid"><br>
         Subject Name: <input type = "text" name = "subname"><br>
         Total Students: <input type="number" name = "stcount"><br>
      </form>
      <button type = "submit" form = "myform" value = "Submit">Click</button>
   </body>
</html>

코드 설명

  • <form> 요소에 id="myform"이 지정되어 있습니다.
  • <button>은 양식 외부에 위치하지만 form="myform" 속성을 통해 해당 양식과 연결됩니다.
  • 버튼을 클릭하면 myform 양식의 입력 데이터가 GET 방식으로 제출됩니다.

이처럼 form 속성을 사용하면 페이지 레이아웃의 자유도가 높아지고, 여러 양식과 요소를 유연하게 연결할 수 있다는 장점이 있습니다.