HTML - form
form
사용자로 부터 input을 받기 위한 태그. input 태그 밖에 넣어준다.
- Syntax
<form action="API 주소" method="GET/POST"></form>
API 주소는 백엔드 개발자에게 받아야함
6. method GET vs POST
method : <form> 태그의 속성(attribute)인 method는 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다. method 속성(attribute)의 값(Value)로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.
<form method:"GET" 또는 "POST">
*HTTP 메소드 : 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식. 쉽게 말하면 서버에 요청을 보내는 방법.
GET :데이터가 노출되기 때문에 보안에 취약 하며, 개인정보가 포함되지 않는 상황에서 캐싱을 하여 페이지 로딩 속도를 높일 때 사용.
POST : BODY에 데이터를 넣어 전송하며 길이의 제한이 없다. 따라서 GET과 다르게 대용량 데이터를 전송 할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 조금 더 안전 하다고 할 수 있다. 하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다.
input
정보를 받을 때 사용
- Syntax
<input type=""/>
- text
<input type="text"/> - email
<input type="email"/> <button> 이메일 구독 </button> 이메일 형식이 아닌 것을 제출 시 오류 발생 - password
<input type="password"/> - url
<input type="url"/> - number
<input type="number"/> - file
<input type="file"/>
multiple을 넣어줄 시 파일 다중 선택 가능.
accept=”image/*” 모든 이미지 가능.
<input type="file" multiple accept="image/*"/>
- radio : 하나만 선택하고 attribute(name, value)를 반드시 넣어줘야한다.
name : 동일하게 설정해서 radio를 그룹화
value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게.
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">남</label>
<input type="radio" name="sex" value="male" id="female"/>
<label for="female">여</label>
<input type="radio" name="job" value="front" id="frontend"/>
<label for="forntend">프론트엔드</label>
<input type="radio" name="job" value="back" id="backend"/>
<label for="backend">backend</label>
- checkbox : 다중 선택 attribute(name, value)를 반드시 넣어줘야한다.
name : 동일하게 설정해서 radio를 그룹화
value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게.
<input type="checkbox" name = "skill" value="H" id="html"/>
<label for="html">HTML</label>
<input type="checkbox" name = "skill" value="C" id="CSS"/>
<label for="html">CSS</label>
<input type="checkbox" name = "skill" value="J" id="JS"/>
<label for="JS">JavaScript</label>
attribute
- placeholder : 빈 칸 안내문구
<input type="text" placeholder="ID 입력"/> - minlength : 최소 글자 수
<input type="text" placeholder="ID 입력(최소 5)" minlength = "5"> - maxlength : 최대 글자 수
<input type="text" placeholder="ID 입력(최대 12)" maxlength = "12"> - required : 필수 입력
<input type="text" required /> - disabled : 입력 불가
<input type="text" disabled /> - value : 초기 텍스트 값 자동 입력
<input type="text" value = "크리머" /> - number의 max / min : 최대, 최소 수
<input type="number" min="5" max="10"/> - accept : 허용 가능한 파일 확장 설정 시
<input type="file" accept=".jpg, .png"/>
Label
form에 이름을 붙이는 태그. id로 구분
- Syntax
<label for="">라벨</label>ex :
<label for="id">ID</label> <input type="text" id="id"/>
Select
attribute(name, value)를 반드시 넣어줘야한다.
attribute : multiple (컨트롤을 눌러 다중 선택)
<label for="dev_skill">개발 언어</label>
<select name="skill" id="dev_skill">
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="J">JavaScript</option>
</select>
textarea
<label for="intro">자기소개</label>
<textarea id="intro"> </textarea>
button
-Syntax
<button type="button">버튼</button>
<button type="submit">제출</button>
<button type="reset">다시 쓰기</button>
