사용자가 정보를 입력하고 받는 HTML form은 다양한 형식이 있다.
syntax에 맞게 작성해주는 것이 핵심! 유용한 atrributes와 작성 양식을 익히고 또 익히자.🙂

Form의 구조

• form은 사용자로부터 input 값을 받기 위한 태그.

<form action ="API 주소" method = "GET/POST">

• form의 'action'과 'method'는 셋뚜셋뚜!
• 데이터 양에 따라 GET(일반) 또는 POST(양이 많을 때)를 쓴다.

Input (입력창)

<input type ="type"/>

• input은 받는 태그(/input)따윈 없다.
• "type"에는 text, number, password 등 다양, 형식에 따른 입력창을 생성하면 된다.

Input attributes

<input type="text" placeholder="이름을 입력하세요" />
<input type="text" placeholder="아이디를 입력하세요" minlengh ="5", maxlength="13"/>

• placeholder : 값이 없을 때 나타내는 텍스트
• minlength/maxlength : 최소, 최대 값 설정
• required : 필수 값 입력
• disabled : 입력 제한
• value = "": 초기값 설정
• email : @가 들어간 메일만 입력 가능 (서바 받기 전 미리 유효성 검사가 가능함!)
• password : ***로 구현
• url : http 주소 입력
• number : 숫자만 입력 (min/max로 숫자 제한)
• file : 파일만 넣기 (accept로 파일 확장자 제한)
  다양한 종류의 파일은 accpet="image/, video/*" 로 쓴다. (모든 이미지, 모든 비디오 타입 확장자 가능)

Label(라벨) <label> </label>

폼 양식에 이름을 붙이는 태그. *필수 사용 태그는 아님

<label for ="input id"> 
	<input type ="text" id=""/>
</label>    

• label 태그는 라벨 대상 'for'과 input 태그의 'id'와 셋뚜

Radio(선택) & Checkbox(다중선택)

ex) 서비스 구독 확인
<input type="radio" id="subscribed" name="subscribed" value="subscribed"/> 구독
<input type="radio" id="unsubscribed" name="subscribed" value="unsubscribed"/> 미구독 

• Radio, checkbox의 name, value는 셋뚜
• radio는 예전에 오래된 라디오 기기의 버튼과 비슷한 형태와 기능을 가졌기 때문에 radio로 불린다. (중요하지 않지만 이런 스토리 좋아한다:))
• name = value의 형식으로 전달되므로 여러 항목을 생성할 때 "name"으로 관계있는 태그를 묶어줘야 한다. (그래야 하나의 그룹 안에 항목이라는 것을 인식한다!)

Selection & Option (pulldown 메뉴)

<select name="">
	<option value=""> </option>
</select>

• 다중선택은 <select mutiple name="">
• label 생성시 <select>에 id 값을 준다.

Textarea(멀티라인 텍스트) <textarea> </textarea>

• 숫자 제한이 가능하다. <textarea rows="세로값" cols="가로값">

Button(버튼) <button> </button>

• <button type="button(걍 버튼) / submit(특정 값을 받을 때) / reset(다시 쓰기)">

HTML input의 더 많은 유형은 필요할 때 참고하도록 한다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input (출처: mdn)