html form

HTML form은 사용자로부터 정보를 수집하고 서버로 전송할 수 있는 기능을 제공합니다. 사용자가 입력한 데이터를 웹 서버로 전송하거나, URL 매개변수를 이용하여 다른 페이지로 이동하게 하는 기능을 담당합니다.

 

form 요소는 action 속성과 method 속성을 가지며, action 속성은 데이터를 전송할 URL을 지정하고, method 속성은 HTTP 요청 방식을 지정합니다. HTTP 요청 방식은 GET 방식과 POST 방식이 있습니다.

 

form 요소 안에는 input, textarea, select, button 등 다양한 폼 요소가 포함될 수 있습니다. 이러한 폼 요소들은 각각 사용자로부터 입력받는 데이터의 유형에 따라 다양한 속성을 가지고 있습니다. 예를 들어, input 요소는 type 속성을 이용하여 텍스트, 숫자, 날짜 등의 입력 형식을 지정할 수 있습니다.

 

form 요소는 웹 사이트의 사용자 경험을 개선하고, 데이터 수집 및 처리를 위한 필수적인 기능을 제공합니다. 이를 이용하여 로그인 폼, 회원 가입 폼, 검색 폼 등을 만들 수 있습니다.

 

사용법

 

<form action="submit-form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br>

  <input type="submit" value="Submit">
</form>

 

위의 예제에서, action 속성은 폼을 처리할 서버측 스크립트의 URL을 나타냅니다. 이 예제에서는 submit-form.php 파일을 이용하여 폼의 입력값을 서버에 제출합니다.

 

method 속성은 폼을 제출할 때 사용되는 HTTP 메소드를 지정합니다. GET 또는 POST 중 하나의 값을 가질 수 있습니다. GET 방식은 URL에 입력값을 추가하여 전송하며, POST 방식은 입력값을 요청 본문에 추가하여 전송합니다. 일반적으로, 입력값이 보안성이 필요한 정보(비밀번호 등)를 포함할 경우 POST 방식을 사용합니다.

 

위의 예제에서, 폼에는 이름, 이메일, 메시지 입력요소가 있습니다. <input> 태그를 사용하여 텍스트박스, 비밀번호박스, 라디오버튼, 체크박스 등의 입력요소를 추가할 수 있으며, <textarea> 태그를 사용하여 여러 줄의 텍스트 입력요소를 추가할 수 있습니다.

 

<label> 태그를 사용하여 입력요소와 해당 입력요소의 설명을 연결할 수 있습니다. for 속성에 해당 입력요소의 id 값을 지정하면 됩니다. 이렇게 하면, 해당 입력요소가 클릭되면 레이블이 자동으로 활성화됩니다.

 

마지막으로, <input> 태그를 사용하여 폼을 제출하는 버튼을 추가할 수 있습니다. type="submit" 속성을 사용하여 전송 버튼을 추가할 수 있으며, type="reset" 속성을 사용하여 폼을 초기화하는 버튼을 추가할 수도 있습니다.

 

위와 같이 폼을 작성하면, 사용자가 폼을 제출하면 지정된 URL로 폼의 입력값이 전송됩니다. 이후에 서버측 스크립트는 입력값을 처리하고 결과를 반환할 수 있습니다.