[Node.js] HTML Form

2024. 8. 16. 14:26· 클론코딩/생활코딩 Node.js
목차
  1. 1. 기본 <form>
728x90

 

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 버튼: 폼 데이터를 서버로 전송합니다.

 

728x90

'클론코딩 > 생활코딩 Node.js' 카테고리의 다른 글

[Node.js] 파일생성과 리다이렉션  (0) 2024.08.22
[Node.js] PM2  (0) 2024.08.16
[Node.js] 동기(Synchronous) ,비동기(Asynchronous)  (0) 2024.08.15
  1. 1. 기본 <form>
'클론코딩/생활코딩 Node.js' 카테고리의 다른 글
  • [Node.js] 수정
  • [Node.js] 파일생성과 리다이렉션
  • [Node.js] PM2
  • [Node.js] 동기(Synchronous) ,비동기(Asynchronous)
아사_
아사_
프로그래밍 공부한거 정리해두는 메모장 블로그
아사_
개발공부 블로그
아사_
전체
오늘
어제
  • 분류 전체보기
    • FrontEnd
      • html
      • css
      • JavaScript
      • Node.js
      • React
      • React Native
    • BackEnd
      • SpringBoot
      • FastAPI
      • PHP
      • Flask
      • supabase
    • Language
      • Python
      • JAVA
      • Kotlin
      • C++
    • Development Tools
      • AWS
      • GIT,GITHUB
      • Docker
      • 메시지 브로커
      • 기타 도구,플랫폼
    • Computer Science
      • 개발지식
      • Server&Network
      • Algorithm&DataStructure
      • Security
      • DataBase
      • OS
    • AI
    • 기타
      • 잡다
      • Android
      • 도서
    • 클론코딩
      • 생활코딩 Express.js
      • 점프 투 장고
      • 생활코딩 Node.js
    • 프로젝트
      • DevQuest

인기 글

최근 글

250x250
hELLO · Designed By 정상우.v4.2.2
아사_
[Node.js] HTML Form
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.