HTML-form

1. <form>

정보를 입력 하는 영역

[폼 동작 방식]

1. 웹 페이지에 있는 form 데이터 입력
2. 웹 서버로 이동
3. 필요에 따라 app서버로 이동
4. DB에서 CRUD 작업 처리 후 web 또는 app으로 전송
   * CRUD(Create Read Upadate Delete)
5. 브라우저는 Response 받은 페이지 렌더링 후 클라이언트에 전달

*form 속성

action: 입력 값을 전송할 페이지
method: 데이터 전송 방법을 선택

method	설명
get	입력값이 url로 요청되어 보여짐
post	입력값이 body로 요청되어 정보를 숨겨줌 보안이 필요할 때 사용 ex) 이미지, 게시물, 로그인 등

2. <input>

form태그 안에 쓰이면서 사용자가 정보를 입력할 수 있는 공간을 만들어줌

*input 속성

📌 required: radio는 첫번째 input에만 설정/ checkbox는 필요한 input에 개별 설정

*input type 속성

📌 tel, email은 보기에 text랑 같지만, 모바일에서는 다르게 보임

3. <label>

input앞의 텍스트로 설명해주는 역할

label은 input에 꼭 넣어야 시각장애인들을 위한 설명을 읽을 수 있다.

구현방법 1) input을 감싼다

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

구현방법 2) lable에 for="input 또는 select의 id" 지정

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

📌 label에는 id만 가능! (class X)

💙 for 속성 장점💙
radio나 checkbox type 등에서 label텍스트를 눌러도 체크가 됨(사용 편리)

4. <select>

드롭다운 리스트 박스 생성

multiple="multiple"은 여러 옵션 선택 가능(ctrl 또는 Cmd를 눌러야 함)
size 속성: 한번에 보여 줄 옵션 갯수

4-1. <option>

value: 선택 시 서버에 전송할 값
selected: 기본으로 옵션 체크
(미설정시 첫번째 옵션이 미리 선택됨 and 데이터 전송 시 첫번쨰 옵션 값으로)

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

4-2. <input> name VS <option> value

ex) tel(name): 010-1111-1111(value)

input의 name은 'key'
method가 get일 때 url에 ex) tel(name)=010-****-1111(value)
나중에 백엔드 개발자와 협의하여 정함
post일 경우 f12>페이로드에서 확인 가능

option value는 서버로 보내지는 값
일반 input은 직접 value 값을 설정할 수 있지만,
option은 선택만 가능하고 직접 value값 지정을 못해서 사용

📌 서버에 값 안 주기

<option value="" selected>선택</option>>

5. <fieldset>

폼 컨트롤들 그룹화(여러 섹션 구분 시 유용)

section과 같은 역할

6.<legend>

fieldset의 이름

꼭 <fieldset>다음에 설정
폼의 제목을 텍스트로 보여줌

7. <button>

<button type="">

- submit: 서버로 데이터 제출(미지정 시 자동 제출), form 안의 key:value 값 서버로 전송
- reset: form 초기화
- button: 클릭만 가능함, 별 기능 X

💙💙 button에는 꼭 type 선언해야!!!! 정확한 코딩

💙 input submit과 button submit의 차이점
- input은 열린 태그라서 자식 태그 삽입 불가능(꾸미기 힘들다.)
- button은 닫힌 태그라 자식태그로 img 삽입 + 글꼴 설정 + after/ before 가상 요소 등 꾸미기 용이

---

🌷 나름 나의 정리

순서
1. 필드셋 설정
2. legend로 폼 제목 결정
3. input과 label을 이용하여 폼 구성하기

  <legend> 폼 제목</legend>
  <label for="myID">아이디</label>
  <input type="text name="아이디"  id="MyID">
  .
  .
  .

</fieldset>

---

8. <textarea>

여러 줄의 텍스트 입력 받음

- cols(열): 입력창 너비, 문자의 평균적인 넓이를 기준으로(글자 수 기준 X),
양수 값만 가능(font, 언어마다 글자 넓이가 다르다)

- rows(행): 입력창 줄 수

9.<datalist>

- select와 input 혼용 가능
- label for -> input의 id/ input list-> datalist의 id와 연결

- 옵션기능을 제공
- 사용자가 원하는 옵션이 없으면 직접 입력 가능한 서비스 제공