다시 시작하는 HTML🤣
Form
사용자로부터 정보 또는 데이터의 인풋(Input)을 받기 위한 태그
문법 주의! 사용하는 속성이 많다.
<form action="API 주소" method="GET|POST"> </form>action: form을 처리해줄 서버에게 접근 가능한 URL(경로)
(action 속성값은 프론트단에서 알 수 없으므로 #으로 해두고 Backend 개발자님이 알려주실 겁니다.)
method 속성도 서버와 밀접한 관련이 있다. 사용 목적에 따라 구분하면
- POST: (보안이 필요한 중요한 정보가 있거나 정보의 양이 많은 경우) 사용자가 입력한 값을 '저장'하고 싶을 때 사용
- GET: (보안이 필요없는 일반적인 정보만 받아오면 되는 경우) 단순히 정보를 '읽고(read)' 싶을 때 사용
GET 요청은 캐시가 된다는 장점이 있다. 한번 본 페이지는 빠르게 로딩이 가능하고, 서버나 DB를 변형시킬 일이 없어 무해하다.
그러나, POST 요청은 주로 "새로운 데이터를 저장하고 싶을 때" 사용하는 요청이다.
요청 후에는 데이터베이스에 새로운 변경사항이 추가되어 위험한 상황이 발생할 수도 있다.
일반적으로 정보만 얻어온다면 GET을 사용하는 것이 낫다.
Form 안에서 사용되는 필드Field 태그
- Input
- Label
- Radio & Checkbox
- Select & Option
- Textarea
모든 input에 적용 가능한 기본적인 사용법과 type마다 추가되는 특수 사항을 파악하자.
Form(1) Input
사용자에게 정보나 데이터를 받아오기 위한 필드를 생성하는 태그
정의: 입력창, 인풋 필드(Input field)
문법 주의! type 속성을 반드시 작성해야 한다.
<input type="text" />input의 종류는 text, number, email, password, file 등 다양하다.
type 속성값으로 작성한 내용에 따른 입력창이 생긴다.
◐ 다양한 속성들(attributes)
<input type="text" placeholder="아이디를 입력하세요" minlength="4" maxlength="12" required[disabled] value="kiyomi" />- placeholder : 입력창에 글자를 입력하기 전까지 뜨는 기본적인 안내 문구를 설정한다.
- minlength : 입력할 최소 글자 수를 지정한다. 해당 조건에 부적합한 경우 경고창이 뜬다.
- maxlength : 입력할 최대 글자 수를 지정한다. 해당 조건에 부적합한 경우 경고창이 뜬다.
- required(속성값 없음) : 해당 입력창은 필수로 입력해야 함을 나타낸다. (입력하지 않은 경우 submit 불가)
- disabled(속성값 없음) : 입력창을 사용할 수 없도록 막기 위해 비활성화 상태로 만든다.
- value : 일종의 초기값. 입력하지 않아도 기본적으로 설정되는 값이다.(placeholder와 다름)
<input type="email" placeholder="이메일을 입력하세요" />text type의 input과 유사하지만 '@'를 작성하지 않으면 에러 처리를 하고 사전에 유효성 검사를 통해 사용성 개선을 해준다.
<input type="password" placeholder="비밀번호를 입력하세요" minlength="8" />비밀번호는 보안이 필요하기 때문에 * (별표)모양으로 처리되어 표시된다.
<input type="url" placeholder="포트폴리오 URL을 작성하세요" />URL 형태로 작성하지 않은 경우 경고창이 뜬다.
<input type="number" min="8" max="100" placeholder="나이를 입력하세요(8세 이상~100세 이하)" />minlength는 입력할 수 있는 문자 갯수를 제한하는 것과는 달리
min은 입력할 수 있는 값의 최솟값을 의미한다.(차이 구분!)
min, max 조건에 부적합한 경우 경고창이 뜬다.
<input type="file" accept=".png, .jpg" />파일을 첨부할 수 있도록 '파일 찾기' 버튼이 생긴다.
accept: 첨부가 허용 가능한 파일 확장자를 (예)'png' 또는 'jpg'로 제한할 때 사용한다.
// png, jpg파일만 허용
<input type="file" accept=".png, .jpg" />
// 모든 이미지 파일, 오디오 파일, 비디오 파일 허용
<input type="file" accept="image/* , audio/*, video/*" />🧐 여기서 궁금점❗
Q. button 태그와 input 태그의 type 속성값 submit의 차이❓
A. 기능적인 차이는 아무것도 없고, 둘 중 어느 것을 써도 상관이 없다.
button 태그와 input 태그는 동일하게 작동하나, button은 더 풍부한 렌더링을 할 수 있게 한다.
<button>
<img src="./assets/images/icon-confirm" alt="" />
제출하기
</button>참고 공식 문서
풍부한 렌더링(=richer rendering)이라는 것은, <input type="submit" / >을 사용할 때는 그 안에 아이콘 이미지를 넣을 방법이 없지만, button 태그는 손쉽게 이미지 요소를 포함한 다른 요소를 넣을 수 있기에 더 풍부한 렌더링 옵션을 제공한다고 말할 수 있다.
기능상 완전히 동일하다면 의미가 더 명확한 button 태그를 사용하는 것이 나을 수 있다.
(이상 김버그님 q&a 답변, 개인적인 의견)
Form(2) Label
폼 양식에 이름을 붙이는 태그로 input에 대한 제목, 이름 등의 역할(필수 작성은 아님)
작성 시 문법 주의! 반드시 for라는 attribute를 사용!
특정 input에 대한 이름이기 때문에 '어떤 input'을 위한 label인지 연결이 필요하다!
'input 필드의 id'와 'label 태그의 for' 속성값이 동일해야 한다.
label을 클릭하면 연결된 input 태그가 클릭되면서 focus된다.
=> form 관련 태그 사용 시 label을 통한 사용성 개선✨
<label for="user-name">라벨</label>
<input type="text" id="user-name" /> // ◀해당 input이 위의 label과 짝꿍!
<input type="email" />Form(3) Radio & Checkbox
Radio: 여러 항목 중에 하나만 선택
Checkbox: 여러 항목 중에 다중 선택 가능
<form action="" method="GET">
<label for="subscribed">구독중</label>
<input type="radio" name="subscription" value="subscribed" id="subscribed" />
<label for="unsubscrbed">미구독</label>
<input type="radio" name="subscription" value="unsubscribed" id="unsubscribed" />
<button type="submit">제출</button>
</form>문법 주의! radio는 name 속성과 value 속성을 반드시 작성해야 한다!
name 속성을 통해 하나의 항목으로 연관되어있음(한 그룹으로 묶임)을 표시할 수 있다.
name 속성을 동일하게 설정하지 않으면 각각의 항목으로 간주되어 함께 선택할 수 있는 문제가 발생한다.
GET 요청 방식으로 submit하게 되면 url에 name 속성값이 보여진다.(동일하게 작성)
서버에게 어떤 아이템이 선택되었는지 알려주기 위해, 각각의 아이템을 구분하기 위해 input type radio는 value 속성을 반드시 작성해야 한다!(각각 다르게 작성)
url에서 'name = value' 형태로 서버에게 전달된다.
checkbox는 다중 선택이 가능하다는 차이점 외에 radio와 사용 방식이 동일하다. (체크 갯수를 제한하는 것은 JavaScript가 하는 일)
해당 checkbox가 어떤 것을 나타내는지 label 태그를 통해 알려주고, input 태그와 label을 연결시켜 준다.
항목들이 서로 연관됨을 나타내기 위해 name 속성을 이용해 하나의 그룹으로 묶어줘야 한다.
서버 입장에서 어떤 항목이 선택되었는지 알기 위해 value 속성을 사용한다.
<form action="" method="GET">
<input type="checkbox" name="skills" value="html" id="html" />
<label for="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="skills" value="js" id="js" />
<label for="js">JavaScript</label>
<button type="submit">제출</button>
</form>