📖 <form>

• 정보를 입력하는 영역
• 폼에 입력 후 제출하면 데이터는 서버로 전송되고,
  전송한 데이터는 웹서버가 처리하며
  처리 후 로그인 결과 화면 같은 다른 웹페이지를 클라이언트에 전송함.
  

<form>의 속성

• <form action=""> 입력 값을 전송할 페이지
• <form method=""> 데이터를 전송할 방법 정의
  • get : 웹서버에 데이터를 요청할 때
  • post : 파일 올리거나 보안 필요한 데이터 전송할 때 (사용 주소에 입력내용 나오지 않음)

📌 <input>

• 사용자에게 폼 태그에 입력할 수 있는 공간을 만들어 주고 정보를 입력받음

속성

• type : 태그 모양 변경 가능
• name : 태그 이름 지정
• readonly : 읽기 전용 태그
• maxlength : 최대 글자 수 지정
• minlength : 최소 글자 수 지정
• required : 필수 태그로 지정
• autofocus : 웹 페이지 로딩되면 이 속성 지정한 태그로 포커스 바뀜
• placeholder : 입력할 값에 대한 힌트
• pattern : 정규 표현식 사용하여 특정 범위 내 유효한 값 입력 받을 때 사용

type

• text
• button
• password
• search
• date
• time
• range
• number
• color
• radio : 선택 항목 중 하나만 선택 가능
• checkbox : 선택 항목 중 0개 이상 선택 가능
• file
• email
• url
• tel

📌 <label>

시각 장애인분들도 폼을 사용할 수 있도록 시멘틱한 <label>요소 사용

사용법

- 텍스트의 설명과 폼 입력 모두를 포함하는 방식
<label>
	이름 :
<input type="text" name="name">
</label>

- 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식 
<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

for 속성

• 레이블이 속한 input과 같은 폼 컨트롤을 의미
  (input, select, textarea 와 같은 요소들)
• for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야함
• 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동.
  (즉, 클릭 할 수 있는 영역이 더 넓어져 폼 쉽게 사용 가능)
  

📌 <select>

• 드롭다운 리스트 박스 생성
• 전달될 땐 옵션의 밸류값이 전달됨.

<select> 속성들

• multiple="multiple"

  • 사용자가 여러 요소를 선택할 수 있게 됨
  • ctrl이나 command버튼 클릭해야 선택 가능
  • 속성이름과 속성값이 같을 경우 값을 적지 않아도 됨
    그냥 multiple로 작성 가능 !

• size
  - 드롭다운에서 한번에 보여줄 옵션의 개수 정함

<option> 속성들

1. value : 서버에 어떤 값을 전송할지 서정
2. selected : 페이지가 로딩되고 난 뒤 기본적으로 선택되는 옵션
   selected 옵션 사용하지 않으면 첫번째 옵션 선택되고
   아무것도 선택하지 않고 데이터를 서버로 전송하면 첫번재 옵션 값이 밸류가 전송됨.

• 옵션하나 추가해서 선택
  <option value="0">선택</option> 하면 선택이 가장 먼저 나옴 !

📌 <fieldset>

• 섹션과 같은 역할을 함.
• <fieldset>를 통해 자식요소로 사용되는 폼 컨트롤을 그룹화할 수 있음

<legend> 태그

• <fieldset> 태그 바로 뒤에 위치 (<fieldset>의 첫번째 자식)
• 폼 그룹의 목적을 나타내는 제목을 의미

📌 <button>

• 클릭 가능한 버튼
• 버튼을 적을 땐 타입을 선언하는 버릇을 들이자!
• value="" -> 버튼 안에 들어가는 글씨!

type

• submit : 기본 값, 서버로 양식 데이터 제출
• reset : <input type="reset"> form의 모든 값 초기화
• button : 클릭 가능한 버튼, 사용자가 기능을 부여하기 전까지는 별 다른 작동 하지 않음
  
  
• <input> 열린 태그 , 닫는 태그 없음 !!
  (닫는 태그 없으니 자식으로 다른 태그 쓸 수 없음)
• <button> 열린 태그 닫힌 태그 있으니
  이미지 형식의 버튼을 만들 수도 있음

📌 <textarea>

• 여러 줄의 text를 입력받을 수 있음 (input은 한줄만 입력 가능)

1. cols : textarea가 보여줄 입력창의 넓이.
   양수 값만 사용 가능, 기본값은 20.
2. rows : textarea 입력 창이 기본적으로 보여줄 입력 줄 수.

<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>

📌 <datalist>

• <datalist>는 <select>와 <input> 을 섞어서 사용하는 것
• <input> 의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용.

사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>

---

💡 자주 사용되는 속성

• checked : 체크상태 표시
• required : 필수값
• min : 최솟값
• max : 최댓값
• value : 입력된 값
• placeholder : 입력값 힌트
• minlength : 최소 길이
• maxlength : 최대 길이
  
  
• select에서 선택해야만 제출하게 하려면
  required 속성 지정 후 첫번째 option에 value=""