[Node.js] HTML Form

 

https://opentutorials.org/course/3332/21028

생활코딩님의 Node.js강의를 참고하였습니다.

---

 

1. 기본 <form>

 

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Submit">
</form>

 

 

• <form> 요소: 사용자 입력 데이터를 서버로 전송하는 컨테이너 요소입니다.
  
  
• action 속성: 폼 데이터를 전송할 서버의 URL을 지정합니다.
  
  
• method 속성: 데이터를 전송하는 방식(예: GET 또는 POST)을 지정합니다.
  
  
• id 속성: HTML 요소를 고유하게 식별하기 위한 고유 식별자입니다.
  
  
• name 속성: 폼 데이터 전송 시 서버에서 필드를 식별하는 이름입니다.
  
  
• input 요소: 사용자가 데이터를 입력할 수 있는 다양한 유형의 입력 필드를 생성합니다.
  
  
• type 속성: 입력 필드의 유형(예: text, password, email, submit 등)을 지정합니다.
  
  
• value 속성: 입력 필드의 초기값을 설정하거나 전송될 값을 지정합니다.
  
  
• placeholder 속성: 입력 필드에 힌트로 표시될 텍스트를 지정합니다.
  
  
• label 요소: 폼 요소에 대한 설명이나 이름을 제공합니다. for 속성을 통해 특정 입력 필드와 연결됩니다.
  
  
• textarea 요소: 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 생성합니다.
  
  
• select 요소: 드롭다운 메뉴를 생성하며, 여러 옵션 중 하나를 선택할 수 있게 합니다.
  
  
• option 요소: select 요소 내에서 선택 가능한 항목을 정의합니다.
  
  
• button 요소: 클릭 가능한 버튼을 생성합니다. type 속성을 통해 버튼의 기능을 지정할 수 있습니다(예: submit, reset, button).
  
  
• checkbox 입력 필드: 사용자가 하나 이상의 옵션을 선택할 수 있게 합니다.
  
  
• radio 입력 필드: 사용자가 여러 옵션 중 하나를 선택할 수 있게 합니다.
  
  
• hidden 입력 필드: 사용자에게 표시되지 않는 데이터를 폼과 함께 서버로 전송합니다.
  
  
• file 입력 필드: 사용자가 파일을 업로드할 수 있게 합니다.
  
  
• reset 버튼: 폼의 모든 입력 필드를 초기 상태로 되돌립니다.
  
  
• submit 버튼: 폼 데이터를 서버로 전송합니다.