Form

사용자로부터 데이터나 정보를 서버에 전송하기 위해 사용한다.

<form action="" method=""></form>

action="API 주소"
협업 시 백엔드에게 접근값을 요청해 적용한다.

method="GET|POST"
중요한 정보 혹은 정보의 양이 많을 경우 post를 사용한다.

Input

'form 태그'에 사용하는 요소
반드시 type 속성을 적용해야 그에 맞는 입력창을 설정할 수 있다.

• text |
  1. placeholer=""를 이용해 사용자의 input 값을 유도할 수 있다
  2. 초기값을 사용할 경우 value=""를 사용한다. 이 경우 placeholder와 다르게 복사가 가능한 기본 입력값이 설정된다.
  3. 길이 제한을 둘 경우 maxlength, minlength를 활용한다.
  4. required로 입력을 강제할 수 있다.
  5. disabled로 특정 인풋 값을 거부할 수 있다.
• Email | 인풋 값을 서버에 보내기 전 유효성 검사를 통해 이메일 값을 받도록 한다. @가 없을 경우 에러로 처리해 사용성 개선이 가능하다.
• password | input 필드에서 text가 보이지 않도록 감춘다
• url
• number| type이 number일 경우 min(최소) 혹은 max(최대)로 제한을 둘 수 있다.
• file| 확장자를 제한할 경우 accept="확장자명,(다수 추가 가능)"을 사용한다.

label

<label>을 사용해 <form> 양식에 이름을 붙일 수 있다.
특정 input의 이름을 나타내기 때문에 반드시 for 를 사용해 label의 속성을 정해야 한다.

<label for="인풋id">label이름</label>
<input id="인풋id" type="text"/>

id를 나타낼 때는 #을 사용하는 게 일반적이지만 label에는 사용하지 않는다.

radio & checkbox

radio 태그를 사용할 경우 name을 통한 그루핑을 해야한다.
또한 value는 각각 다른 값으로 지정해 서버가 확인할 수 있도록 한다.

<form action="" method="GET">
  <input type="radio" name="position" value="front-end" id="front-end"/>
  <label for="front-end">프론트엔드</label>
  <input type="radio" name="position" value="back-end" id="back-end"/>
  <label for="back-end">백엔드</label>
  <button type="submit">선택!</button>
</form>

다중 선택을 할 경우 check box를 사용한다.

select

option 태그로 드롭다운 메뉴를 만들 때 사용한다.

<form>
  <select name="fruit">
    <option>사과</option>
    <option>파인애플</option>
    <option>딸기</option>
  </select>
</form>

textarea

textarea는 여러줄에 걸쳐 텍스트를 작성할 때 사용한다. like blog!
rows="" 세로, cols="" 가로 / css로도 크기 조절 가능
placeholder도 가능하며 label 태그와도 연결할 수 있다.

button

type 속성에 따라 submit, reset 으로 사용할 수 있다.

<button>내용<button/>
<button type="">

submit은 form을 제출할 때
reset은 제출값을 초기화할 때 사용한다!