HTML:form

<form> 태그

HTML에서 사용자로부터 데이터를 입력받기 위한 양식을 정의할 때 사용한다. <form> 태그 내부에는 <input>, <textarea>, <select> 등의 태그를 사용하여 다양한 형태의 입력 필드를 생성할 수 있다.

1. <input> 태그: 사용자로부터 입력을 받기 위한 필드를 생성한다. type 속성을 통해 다양한 종류의 입력 필드를 생성할 수 있다.

<form>
  이름: <input type="text" name="name"><br>
  이메일: <input type="email" name="email"><br>
  비밀번호: <input type="password" name="password"><br>
  <input type="submit" value="제출">
</form>

이름:
이메일:
비밀번호:

2. <textarea> 태그: 여러 줄의 텍스트 입력을 받기 위한 입력 필드를 생성한다.

<form>
  메시지:<br>
  <textarea name="message" rows="5" cols="30"></textarea><br>
  <input type="submit" value="제출">
</form>

메시지:

3. <select> 태그: 드롭다운 목록을 생성한다. <option> 태그를 사용하여 선택 가능한 옵션을 지정할 수 있다.

<form>
  좋아하는 과일을 선택하세요:<br>
  <select name="fruit">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="cherry">체리</option>
  </select><br>
  <input type="submit" value="제출">
</form>

좋아하는 과일을 선택하세요:
사과 바나나 체리

이 때 <br> 태그는 줄 바꿈을 의미하며, <input type="submit" value="제출">는 제출 버튼을 생성한다. value는 버튼에 표시되는 텍스트를 지정하기 위한 속성이다.

4. <button> 태그: 사용자가 클릭할 수 있는 버튼을 생성하며 버튼의 동작은 스크립트에 의해 결정된다.

<button type="button">클릭하세요!</button>

클릭하세요!

---

태그 상세 분석

<form action="/submit" method="post">
  이름: <input type="text" name="name"><br>
  나이: <input type="number" name="age"><br>
  <input type="submit" value="제출">
</form>

이름:
나이:

위 코드에서 action 속성은 폼 데이터를 처리할 서버의 URL을 지정하고, method 속성은 데이터를 전송할 방법을 지정한다.

1. <form> 태그: 사용자로부터 입력을 받는 양식을 생성한다. 이 태그 내부에는 다양한 입력 요소들을 포함시킬 수 있다.

   • action 속성: 데이터를 전송할 서버의 URL을 지정한다. 여기서는 "/submit"이라는 URL로 데이터를 전송하도록 설정되어 있다.
   • method 속성: 데이터를 전송하는 방식을 지정한다. "post" 방식은 데이터를 HTTP 메시지의 본문에 포함시켜 전송한다는 의미이다.

2. <input> 태그: 사용자로부터 입력을 받는 필드를 생성한다.

   • type 속성: 입력 필드의 종류를 지정한다. "text"는 한 줄의 텍스트를 입력받는 필드를, "number"는 숫자만 입력받는 필드를 생성한다.
   • name 속성: 입력 필드의 이름을 지정한다. 이 속성은 서버에서 입력된 데이터를 식별하는 데 사용된다.

3. <br> 태그: 줄바꿈을 생성하며 닫는 태그 없이 단독으로 사용된다.

4. <input type="submit"> 태그: 제출 버튼을 생성한다. 이 버튼을 클릭하면 <form> 태그의 action 속성에 지정된 URL로 데이터가 전송된다.

   • value 속성: 버튼에 표시되는 텍스트를 지정한다. 여기서는 "제출"이라는 텍스트가 표시된다.

따라서 이 코드는 "이름"과 "나이"를 입력받는 양식을 생성하며, "제출" 버튼을 클릭하면 "/submit"이라는 URL로 데이터를 "post" 방식으로 전송하는 기능을 수행한다.