HTML 기초 #2 (form)

<form>: 폼을 정의하는 태그, 사용자 입력을 받기 위한 다양한 요소들이 포함, 폼을 제출할 때 서버로 데이터를 전송.
action 속성으로 데이터가 전송될 URL을, method 속성으로 HTTP 전송 방법을 지정.

<form action="/submit" method="POST">
    <!-- 폼 요소들 -->
</form>

 

<input>: 사용자가 데이터를 입력할 수 있는 요소를 생성. 
type 속성에 따라 텍스트 박스, 체크박스, 라디오 버튼, 날짜 입력 등 다양한 입력 방식이 가능.

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</form>

 

• 주요 속성:
  • type: 입력의 종류를 정의합니다 (예: text, password, email, number, checkbox 등).
  • id: 입력 요소의 고유 식별자.
  • name: 서버로 전송될 데이터의 이름을 지정.
  • value: 기본값을 설정하거나 폼 제출 시 전달되는 값을 설정.
  • placeholder: 입력란에 기본 안내 텍스트를 제공.

 

See the Pen form1 by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

See the Pen select-option by Cheolho Jang (@chiro-J) on CodePen.

 

 

• 주요 속성:
  • name: 선택된 값을 전송할 이름을 정의합니다.
  • value: 각 옵션의 값을 설정합니다.
  • selected: 기본으로 선택된 옵션을 설정합니다.

 

 

 

실습

 

 

See the Pen form2 by Cheolho Jang (@chiro-J) on CodePen.