📌 Form 태그

1. form의 속성

• action : 전송 시 폼에 있는 정보를 수신할 서버 페이지의 URL
• method : get, post 방식

2. input의 속성

• type
• name
• readonly
• maxlength
• minlength
• required : 필수 태그로 지정됩니다.
• autofocus
• placeholder
• checked
• pattern : 정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력 받을 때 사용

3. input의 타입

• text
• button
• password
• search : 검색 창으로 사용할 수 있는 input
• date : 날짜
• time
• range
• number
• color
• radio
• checkbox
• file
• email
• url
• tel
• hidden

4. label

단순히 텍스트를 옆에 붙일 수 있지만, 시각 장애인들도 사용할 수 있도록 시멘틱한 <label> 요소를 사용

<label>
	이름 :
	<input type="text" name="name">
</label>

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

for 속성의 값은 id 값과 일치해야 한다.

5. select

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="LG">LG폰</option>
  </select>
</form>

• multiple="multiple" 사용하여 다중 선택 가능
• <option> 요소는 value 속성을 사용해서 선택값에 따라 서버에 어떤 값을 전송할지 설정 가능
• selected : 페이지 로딩 후 기본으로 선택되는 옵션을 나타낼 때 사용

6. fieldset

요소 안에서 관련된 폼 컨트롤들을 그룹화 가능
폼 내용이 많은 경우에 유용

<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

7. legend

fieldset 태그 바로 뒤에 위치하며 폼 컨트롤 그룹의 목적을 나타내는 제목을 포함한다!

8. button의 타입

• submit : 버튼이 서버로 데이터 제출 , 기본값이기 때문에 제출하기위한 용도가 아니라면 반드시 type 선언!
• reset : <input type="reset"> 처럼 form의 모든 값 초기화
• button : 사용자가 기능을 부여하기 전까지 작동하지 않는다.

9. Input vs Button

• button 요소가 input 요소보다 스타일을 적용하기 훨씬 수월하다!
• input 은 닫는 태그가 없기 때문에 자식요소를 넣지 못하지만 button은 내부에 여러가지 자식 컨텐츠 추가 가능 + ::before, ::after 와 같은 가상요소 사용 가능하다.

10. datalist

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>

입력도 가능하고 선택도 가능하게 한다!