HTML 폼 태그

<form> Tag

 

<form> : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

• 회원가입, 쇼핑몰 주문, 게시판, ... 에서 아주아주 유용하고 또 많이 사용된다.
• Validation, 즉 값 검증 기능같은 세세한 기능은 JavaScript 를 이용한다.
• 데이터들을 전달받아 서버 혹은 다른 페이지에 전달해준다.

속성들

1. action : 데이터를 전달할 url을 넣는다. 파일명도 가능하다. (🔫 어디로 데이터를 쏠까??)
2. method : 양식을 제출할 때 사용할 HTTP 메서드이다.
   POST 와 GET 방식이 있다.

Q) POST 와 GET  다른점

• POST : URL에 받은 데이터가 찍히지 않음.
  보안성을 챙길 수 있으니까 로그인같은 민감한 기능에 사용될 수 있겠네요.
• GET : URL에 받은 데이터가 고스란히 찍힘.
  보안성은 없지만 서버에서 처리할 필요 없는 단순한 검색 기능에 사용.

---

<label> Tag

<label> : 사용자 인터페이스 항목의 설명을 나타낸다.

• <input> 태그와 함께 사용되며, 입력 칸의 제목을 나타낸다.
• 관련 <label> 을 클릭해서 <input> 자체에 초점을 맞추거나 활성화를 시킬 수 있다.
  ✅ <label> 과 한 쌍이다.
• 한 쌍으로 묶을 때에는 for 속성을 사용하거나, <label> 사이에 <input> 을 위치시킨다.

<label>Click me <input type="text"></label>

<label for="username">Click me</label>
<input type="text" id="username">

---

<input> Tag

<input> : 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.

• 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다.
• 기본적으로 인라인(Inline) 요소이다.
  한줄에 하나씩 출력하고싶으면? --> <div> 같은 구획 태그로 묶어주자!
• 태그 안의 내용은 텍스트로 제한된다. (이미지 등 다른 요소 불가능)

속성들

1. type : 태그에 들어갈 데이터 형식. 기본(default) = text 이다.
   ex) text, password, email, ...
2. name : 서버로 데이터를 보낼 때의 데이터명.
   🚫 <form> 내에서는 같은 이름 사용 불가능하다!
3. id : 문서 내에서 태그를 식별하기 위한 이름.
   ✅ <label> 에서 for 속성으로 묶는 부분이 여기 들어가는 이름이다.
4. placeholder : 입력창에 아무 값도 없을 때 사용자에게 어떤 값을 입력할지 가이드해준다.
   값을 입력하면 사라지고, 지우면 다시 나타난다.
5. autocomplete : 자동완성 기능.
   이전에 입력했던 값들을 사용자에게 하단 리스트로 제안한다.
   🚫 Boolean 타입이 아니므로 값을 지정해주어야 한다! --> on / off
6. required : 필수 입력란 지정 기능.
   해당 속성이 있는 <input> 요소를 비우고 제출하면 제출이 진행되지 않는다.
7. disabled : 입력을 막고, 데이터 제출 요소에도 포함시키지 않는다.
   Q) 그럼 왜 써요..? 🤔
   A) 추후 JavaScript 로 해당 값을 넣고 빼는 작업이 가능합니다.
8. readonly : 읽기 전용으로 변경하는 기능.
   사용자가 건들 수 없는 기본값을 설정하고 수정을 막을 때 사용한다.
   ✅ 단순히 입력만 안될 뿐, 제출은 진행된다!

---

<input> Type

많이 쓰이는 것들만!

• text
  1) 개행이 불가능하다. (엔터를 누르면 바로 데이터가 submit 된다.)
  2) minlength 와 maxlength 로 최소/최대 글자수를 지정할 수 있다.
• password
  비밀번호를 입력받기 때문에 masking 처리되어 보여진다.
  ⭐GET 방식으로 받게 될 경우 입력시 masking 되더라도 URL 에 비밀번호가 고스란히 보인다.
  보안이 필요한 데이터는 무조건 POST 방식으로!!
• email
  1) email 형식으로 입력받았는지 validation check 를 진행한다. ('@' 포함 여부를 확인한다.)
  2) 모바일 브라우저 환경에서는 자동으로 이메일 입력 키보드를 띄워준다.
• tel
  1) email 과 다르게 따로 validation check 는 진행하지 않는다.
  2) 모바일 브라우저 환경에서는 자동으로 전화번호(숫자 입력) 패드를 띄워준다.
• number
  1) 숫자를 편하게 조절할 수 있는 스피너를 표시한다.
  2) 숫자 데이터만 제출이 가능하다. 
  3) 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시한다.
• range
  1) 값이 가려진 숫자를 입력받는다.
  2) 디폴트 값 = 중간값인 범위 위젯이다.
  3) min 과 max 속성으로 수용가능한 값의 범위를 정의한다.
• date
  1) 시간을 제외한 년, 월, 일 을 입력받을 수 있다.
  2) 지원되는 브라우저에서는 날짜를 선택할 수 있도록 달력을 띄워준다.
  ✅ 비슷한 타입들로 month, week, time 이 있다.
• submit
  1) 디폴트 값 = "제출" 버튼이다.
  2) value 속성으로 버튼 문구를 수정할 수 있다.
  3) <form> 내부에서 입력받은 데이터를 제출한다.
• reset
  1) 디폴트 값 = "초기화" 버튼이다.
  2) value 속성으로 버튼 문구를 수정할 수 있다.
  3) <form> 내부의 입력 폼을 전부 초기화한다.
• button
  1) 버튼 자체로는 아무 기능이 없다.
  2) 특정한 기능을 시키려면 JavaScript 를 이용한다.
• checkbox
  1) 단일 값을 선택하거나 선택 해제할 수 있다. (중복 선택 가능)
  2) 체크된 데이터는 on value 로 넘어간다.
  3) checked 속성으로 미리 체크된 상태를 만들 수 있다.
• radio
  1) 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 한다.
  ✅ checkbox 와 차이점 : 묶어줄 radio 요소들끼리 name 을 똑같이 써야 한다.
  2) value 속성을 지정하여 선택할 radio 값을 할당한다.

---

<fieldset> Tag

<fieldset> : 웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용한다.

• 여러 <input> 과 <label> 들을 한군데 묶고 싶을때 사용하면 좋다.
  ex) 설문조사, 회원가입 영역 등 폼의 영역을 구분하고 싶을때 사용! 👍🏻
• <form> 내부에 위치하며, 자동으로 영역에 박스를 만들어준다.
  ✅ 단순 스타일링적인 이점보다는 Semantic 이점에 집중하자.

속성들

1. disabled : 지정한 경우, 모든 자손 컨트롤을 비활성화한다.
   🚫 비활성 컨트롤은 편집할 수 없고, <form>을 제출할 때 데이터에 포함되지 않는다.
   🚫 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않는다.

---

<button> Tag

<button name="reset">리셋이에요</button>
<button name="submit">제출할게요</button>
<button name="button">눌러보세요</button>

• submit : 디폴트 값. 버튼이 서버로 양식 데이터를 제출한다.
  유효하지 않은 값일 때도 사용한다.
• reset : <input type="reset"> 처럼 모든 컨트롤을 초깃값으로 되돌린다.
• button : 기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다.
  JavaScript 로 행동을 지정해준다.
  접근성 측면에서 --> 사용자가 어떤 버튼인지 알 수 있게 해준다.

---

<textarea> Tag

<textarea> : 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.

• <input type="text"> 와는 다르게 여러 줄을 입력할 수 있다.
• <pre> 태그처럼 개행이나 띄어쓰기도 그대로 반영된다.
• rows 와 cols 로 가로, 세로 길이 지정이 가능하다.
  ❗️기본 폰트 사이즈 기준이므로, CSS 로 정확하게 스타일링 하도록 하자!

<label for="comment">댓글 : </label>
<textarea name="comment" id="comment" rows="10" cols="50"></textarea>