Form 요소란?

웹 페이지에서 사용자 입력을 수집하고 서버로 전송하는 데 사용되는 중요한 요소 중 하나는 <form> 요소입니다. 이 글에서는 <form> 요소의 기본 속성에 대해 설명하고, 예시를 통해 설명을 추가합니다.

기본 코드 예시

<form class="container" action="/articles/form" method="post">

설명

속성	설명	예시
class	form 요소에 적용할 CSS 클래스를 지정합니다	class="container"
action	form 데이터를 처리할 서버의 URL을 지정합니다	action="/articles/form"
method	form 데이터를 서버에 전송할 때 사용할 HTTP 메소드를 지정합니다	method="post"

실제 코드 예시

다음은 로그인 폼을 생성하는 코드 예시입니다:

<form class="login-form" action="/users/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="Login">
</form>

위의 예시에서는 "login-form" 클래스를 적용하고, "/users/login" 경로로 데이터를 전송하는 "post" 메소드를 사용하며, 사용자 이름과 암호 입력 필드를 포함하고 있습니다. "submit" 버튼을 통해 폼을 제출할 수 있습니다.