HTML에서 폼 요소로 쓰이는 태그를 정리해봤다.

---

🙌🏻 잠깐 시작하기 전에..

• 지금까지 태그들은 정보 전달 목적이었기 때문에,
  들어갈 정보(데이터)들을 미리 알고 있었습니다.

• 이 글에서 주체가 되는 <form> 요소는 입력을 통해 사용자로부터 정보를 '전달 받습니다'.

사용자와 대화할 수 있는 Interactive한 파트인 것!!

---

<form> Tag

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

• 회원가입, 쇼핑몰 주문, 게시판, ... 에서 아주아주 유용하고 또 많이 사용된다.

• Validation, 즉 값 검증 기능같은 세세한 기능은 JavaScript 를 이용한다.

• 데이터들을 전달받아 서버 혹은 다른 페이지에 전달해준다.

속성들

1. action : 데이터를 전달할 url을 넣는다. 파일명도 가능하다. (🔫 어디로 데이터를 쏠까??)

2. method : 양식을 제출할 때 사용할 HTTP 메서드이다.
   POST 와 GET 방식이 있다.

Q) POST 와 GET ?? 뭐가 달라요? 🧐

A) 쉽게 설명할게요!

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

Example

<form action="search.html" method="GET">
        <input type="text" name="test">
        <button type="submit">제출</button>
</form>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

---

<label> Tag

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

• <input> 태그와 함께 사용되며, 입력 칸의 제목을 나타낸다.

• 관련 <label> 을 클릭해서 <input> 자체에 초점을 맞추거나 활성화를 시킬 수 있다.
  ✅ <label> 과 한 쌍이다.

• 한 쌍으로 묶을 때에는 for 속성을 사용하거나, <label> 사이에 <input> 을 위치시킨다.

Example

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

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

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

---

<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 : 읽기 전용으로 변경하는 기능.
   사용자가 건들 수 없는 기본값을 설정하고 수정을 막을 때 사용한다.
   ✅ 단순히 입력만 안될 뿐, 제출은 진행된다!

Example

<div>
        <label for="username">이름 : </label>
        <input
          type="text"
          name="username"
          id="username"
          placeholder="홍길동"
          required
        />
      </div>

      <div>
        <label for="job">직업 : </label>
        <input type="text" name="job" id="job" />
      </div>

      <div>
        <label for="age">나이 : </label>
        <input
          type="text"
          name="age"
          id="age"
          placeholder="10"
          value="20"
          readonly
        />
        
      <div>
      <label for="score">평점 : </label>
      <input type="number" id="score" min="0" max="10" value="0" step="2"/>
      </div>
</div>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

---

<input> Type

<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>을 제출할 때 데이터에 포함되지 않는다.
   🚫 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않는다.

Example

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

Q) <legend> 태그는 또 뭔가요? 🤔

A)
<fieldset> 태그에서 박스 영역의 제목을 붙여주는 태그입니다~!
"범례" 라고도 하죠.

• <fieldset> 의 첫번째 자식으로 들어가야 합니다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset

---

<button> Tag

클릭 가능한 버튼을 나타낸다. 우리가 하루에 몇백번도 더 누르는 그 버튼 맞다.

• 양식 내부는 물론, 간단한 버튼 기능이 필요한 곳이라면 문서 어디에나 배치 가능하다.

• 일반적으로 <input> 태그와 비슷한 속성들을 사용한다.

Example

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

<button> 의 타입 세 가지

• submit : 디폴트 값. 버튼이 서버로 양식 데이터를 제출한다.
  유효하지 않은 값일 때도 사용한다.

• reset : <input type="reset"> 처럼 모든 컨트롤을 초깃값으로 되돌린다.

• button : 기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다.
  JavaScript 로 행동을 지정해준다.
  접근성 측면에서 --> 사용자가 어떤 버튼인지 알 수 있게 해준다.

Q) <input type="[reset|submit|button]"> 이랑 뭐가 달라요? 🤔

A)
버튼 안에 내용을 넣는다고 가정해봅시다.
<input> 의 value 속성에는 텍스트 타입밖에 지정하지 못하죠?
대신 <button> 태그는 열고 닫는 태그 사이에 이미지같은 컨텐츠를 집어넣을 수 있어요!
훨씬 다양하죠 👍🏻

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

---

<select> & <option> Tag

<select> : 옵션 메뉴를 제공하는 컨트롤을 나타낸다.

• <select> 내부에 <option> 으로 선택 요소를 배치한다.

• <option> 태그에 value 속성이 지정되어있지 않으면 디폴트로 태그 사이의 텍스트 내용이 옵션이 된다.
  ❗️ 안내문구같은 내용을 넣을 때는 value="" 로 지정하여 값이 없다고 인식할 수 있도록 하자!

• selected 속성으로 초기 선택값을 지정할 수 있다.

• <optgroup> 태그로 <option> 들을 종류에 따라 묶을 수 있다.
  label 속성과 함께 사용하여 그룹명을 설정할 수 있다.

Example

<label for="movie">좋아하는 영화 : </label>
<select name="movie" id="movie" required>
    <option value="">--Please Choose an Option--</option>
    <optgroup label="Animation">
        <option value="toystory">토이스토리</option>
        <option value="zootopia" selected>주토피아</option>
        <option value="insideout">인사이드아웃</option>
    </optgroup>
    <optgroup label="SF">
        <option value="matrix">매트릭스</option>
    </optgroup>
</select>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/select

---

<datalist> Tag

<datalist> : 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.

Example

<label for="movie">좋아하는 영화 : </label>
<input type="text" id="movie" name="movie" list="movie-list" />

<datalist id="movie-list">
    <option value="toystory1">토이스토리1</option>
    <option value="toystory2">토이스토리2</option>
    <option value="toystory3">토이스토리3</option>
    <option value="zootopia">주토피아</option>
    <option value="insideout">인사이드아웃</option>
</datalist>

Q) <select> 랑 다른 점이 뭐에요? 🤔

A) <datalist> 는 값을 선택 후 사용자가 수정할 수 있어요!
추천 항목일 뿐 수정해도 되는 항목들일 때 사용하면 좋습니다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist

---

<textarea> Tag

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

• <input type="text"> 와는 다르게 여러 줄을 입력할 수 있다.

• <pre> 태그처럼 개행이나 띄어쓰기도 그대로 반영된다.

• rows 와 cols 로 가로, 세로 길이 지정이 가능하다.
  ❗️기본 폰트 사이즈 기준이므로, CSS 로 정확하게 스타일링 하도록 하자!

Example

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

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea